@import url('loader.css');
@import url('../fonts/fonts.css');

body { font-family: 'db_helvethaica_xregular'; background: #e6e6e6;  color: #2e2e2e; }

/* --------------------------------------------- note */
.bx-respone { text-align: center; display: none;}
.note-success { color: #04987B;}
.note-danger { color: #CC0000;}

/* --------------------------------------------- general */
.left {float: left;}
.right {float: right;}
.clearfix {float: none;clear: both;}
.t-brown { color: #bd966a;}
.t-processing { color: #cc0909  !important;}
.t-delivered { color: #0a9253  !important;}
.t-softgray { color: #959a99;}
.font-size1 { font-size: 1rem;}
.title-upper { text-transform: uppercase; font-size: 1.4rem;}
.text-discount { color: #959a99; text-decoration: line-through;}
.noresult { color: #81898f; padding: 1rem;}
.hide { display: none;}


/* --------------------------------------------- link */
a { color: #f15b27; text-decoration: none; font-size: 1.3rem;}
a:hover { text-decoration: none; color: #e14008;}
.viewmore { font-size: 1.2rem; color:#3386e3 }
.viewmore:hover { color:#0f5099; text-decoration: none; }

.link_place:hover { text-decoration: none; color: #F9D8D8;}

a.link-continue {  font-size: 0.85rem; color: #000; display:inline-block; padding: .375rem .9rem;  border: 1px solid #ccc; border-radius: .25rem; }
a.link-continue:hover { background: #eee;}


/* --------------------------------------------- menu */
.navbar-brand {}
.bg-light {background: #fff !important; border-bottom: 1px solid #d0d0d0;  }
.my-nav{ color: #585858;  text-align: center; }
.my-menu .nav-link {color: #585858 !important; padding:2.2rem 0.6rem 0 0.6rem  !important; background-position:center top; background-repeat: no-repeat; }
.my-menu .nav-link:hover, .nav-item a.active {color: #f15b27 !important;}

.my-menu .navbar-nav { margin-top:0.5rem; }
.my-menu li.nav-item { padding: 0 1rem;}
.my-menu li.nav-item a{position: relative; font-size: 1.25rem; }

#mu1 { background-image: url(../images/icon/home.png);}
#mu2 { background-image: url(../images/icon/fabric.png);}
#mu3 { background-image: url(../images/icon/accessory.png);}
#mu4 { background-image: url(../images/icon/wishlist.png);}
#mu5 { background-image: url(../images/icon/shopping.png);}
#mu6 { background-image: url(../images/icon/profile.png);}
#mu7 { background-image: url(../images/icon/logout.png);}

#mu1:hover, #mu1.active { background-image: url(../images/icon/home_active.png);}
#mu2:hover, #mu2.active { background-image: url(../images/icon/fabric_active.png);}
#mu3:hover, #mu3.active { background-image: url(../images/icon/accessory_active.png);}
#mu4:hover, #mu4.active { background-image: url(../images/icon/wishlist_active.png);}
#mu5:hover, #mu5.active { background-image: url(../images/icon/shopping_active.png);}
#mu6:hover, #mu6.active { background-image: url(../images/icon/profile_active.png);}
#mu7:hover, #mu7.active { background-image: url(../images/icon/logout_active.png);}

.num-notic-cart { position: absolute;  top: 0px; right: 15px; background: #ee5151; color: #fff; font-size: 1rem; width: 24px; height: 24px;  text-align: center;  border-radius: 14px;}
/* --------------------------------------------- /menu */

/* --------------------------------------------- footer */
.footer {  font-size: 1rem; color: #a5a5a5; text-align: right;}
.contact_link a{ font-size: 1rem; }
/* --------------------------------------------- /footer */


/* --------------------------------------------- main */
.main{ font-size: 1.5rem; color: #757779;}
.title-xl { font-size: 1.8rem; color: #2e2e2e;}
.title-sm { font-size: 1.5rem; color: #757779;}


/* --------------------------------------------- /main */

/* --------------------------------------------- title bar */
.title-section { background-color: none;  padding: 0;  margin: 0 auto;  min-height: 0;  height: auto;}
.title-crumb {  font-size: 0.8rem;  padding: 0.5rem 1rem; }
.title-crumb ul {display: block;  margin: 0;  padding: 0;}
.title-crumb ul li { display: inline-block;  line-height: 1.5;  color: #4c4d4f;}
.title-crumb ul li::after {  font-family: FontAwesome;  content: "\f105";  font-weight: 300;  font-size: 14px;  display: inline-block;  vertical-align: middle;  margin-left: 10px;  margin-right: 10px;  margin-top: -2px;}
.title-crumb ul li:last-child a {color: #505253;}
.title-crumb ul li:last-child a:hover { color: #000; }
.title-crumb ul li:last-child::after { content: " ";  display: none;}
.title-crumb ul li a { font-size: 0.8rem;  color: #bd966a;}
.title-crumb ul li a:hover { color: #a97f4f; }
/* --------------------------------------------- /title bar */

/* --------------------------------------------- customer name */
.scus  { display: inline-block; vertical-align: middle; font-size: 1.4rem; color:#2e2e2e; }
/* --------------------------------------------- /customer name */

/* --------------------------------------------- card */
.bg-place { background: #ee5151; color: #fff; font-size: 2.5rem; font-weight: bold;}
.bg-place i { font-size: 2.2rem; margin-left:0.8rem;}
.card-title { font-size: 1.4rem; line-height:1.4rem;  margin:1rem 0rem 0rem 2.2rem;  }
.mycard { padding: 1rem 1rem 0 1rem;}
.mycard .card-body { padding: 0;}

/* --------------------------------------------- /card */


/* --------------------------------------------- logo */
.logo_s { text-align: right;}

/* --------------------------------------------- bar */
.search_bar {}



/* --------------------------------------------- table */
table th, table td { font-size: 1.1rem; color: #2e2e2e; font-weight: normal; }
.table-striped tbody tr:nth-of-type(2n+1) { background: #f9f9f9;}
.table td { border-bottom: 1px solid #dee2e6; border-top: 0; color: #757779;}
.table td, .table th { padding: 0.5rem;}
.processing td { color: red;}
.td-fit {white-space: nowrap; width: 2%;}
.f-1 { font-size: 1rem;}
.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
    background-color: #eaeff2;
}
.head-order th { background:#eaeff2; padding-top: 1rem; padding-bottom: 1rem; }
.head-order-date { color: #595959; font-weight: normal;}
.head-order-no { font-size: 1rem; color: #004085;}

/* --------------------------------------------- box order */
.order-box { position: relative; font-size: 1.2rem; border: 1px solid #d8d8d8;border-radius: .25rem; margin-bottom: 3rem;}
.order-head { background:#f9f9f9; border-bottom: 1px solid #d8d8d8; padding: 10px;}
.order-body { }
.order-items { border-bottom: 1px solid #d8d8d8; padding: 10px;}
.order-foot { background:#f9f9f9; padding: 10px; border-top:1px solid #d8d8d8; }
.order-no { font-size: 1.25rem; color: #004085;}
.order-date { color: #595959; font-weight: normal;}
.order-status { font-size: 1.25rem; text-align: right; }

/* --------------------------------------------- input form */
.form-control { border: 1px solid #cfcfcf; color: #737373; font-size: 1.2rem;  height: 2.4rem; }

.SPCode { min-width: 420px; }
.input_qty { width: 137px;}
.input_orno { width: 120px;}
.input_piece {  border-left: 0 !important; border-right: 0 !important;}
.textarea-remark { height: 90px !important; max-width: 515px;}

.btn-outline-secondary { color: #000; border-color: #cccccc; background: #e7e7e7; }
.input-group-prepend button { border-right: 0 !important; }
.input-group-append button { border-left: 0 !important; }
.input-group-number-spin { width: 115px;}

.btn-shopping-cart { background:url(../images/icon/shopping_cart.png) no-repeat 1rem center #b68650; padding-left:3.2rem; color: #fff;  font-size: 0.85rem; }
.btn-shopping-cart:hover { color: #fff; background-color: #a06d34; }

.btn-shopping-cart-s { background:url(../images/icon/shopping_cart_sm.png) no-repeat 0.5rem center #b68650; padding:.2rem .6rem .2rem 2rem; color: #fff;  font-size: 0.75rem; border-radius: 0.5rem }
.btn-shopping-cart-s:hover { color: #fff; background-color: #a06d34; }




.btn-circle {
    width: 22px;
    height: 22px;
    text-align: center;
    padding: 3px 0;
    font-size: 0.8rem;
    line-height: 0.8rem;
    border-radius: 18px;
    background: #000;
    color: #fff;
}

.cc-red { background: #e40808;}
.cc-red:hover { color: #fff; background: #bc0707;}

.cc-org { background: #f15b27;}
.cc-org:hover { color: #fff; background: #c34c23;}

.cc-mint { background: #1ec39c;}
.cc-mint:hover { color: #fff; background: #16a987;}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #7f7f7f;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #7f7f7f;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #7f7f7f;
}

.form-normal { background: none !important; border: none; width: 100px;}
/* --------------------------------------------- /input form */


/* --------------------------------------------- box */
.box { position: relative; font-size: 0.9rem; border: 1px solid #d8d8d8; border-radius: .25rem; padding: 10px; margin: 1rem 0; }
.box label { color: #000; font-size: 0.8rem; margin-bottom: 0.1rem; font-weight: bold; width: 100%; text-align: center; }
.box .row { margin-left: -10px; margin-right: -10px;}
.box .text-total { font-size: 1rem;}
.box .block { display: block;}
.box .btn-remove { position: absolute; top:0; right:0; color: #c5c4c4; z-index: 9;  }
.box .input_qty { width: 100%;}
.box .input-group-number-spin { width: 100%;}

/* --------------------------------------------- /box */

/* --------------------------------------------- change bootstrap css */
.btn-default {  background: #f15b27; border-color:#f15b27; padding: 0rem .9rem; color: #fff; font-size: 1.4rem; }
.btn-default:hover{ background: #d7410d; color: #fff;}


/* --------------------------------------------- select2 */
.select2-container--default .select2-selection--single { border: 1px solid #ccc; font-size: 1.2rem;}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: #737373}
.select2-container .select2-selection--single { height: 38px;}
.select2-container .select2-selection--single .select2-selection__rendered { padding:.375rem 1.2rem 0.375rem .75rem;}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px;}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #737373; }
.select2-selection__clear { color: #888888;}

/* --------------------------------------------- slide search */
.slide_search  { }
.slide_search a { color: #717b8a;; font-size: 1rem;}
.slide_search i:last-child { margin-left: 5px;}

/* --------------------------------------------- pagination */
.top_paging_bar { font-size: 1.2rem;}

.pagination {  margin: 0;}
.pagination li{ margin-left: 0.2rem; margin-right: 0.2rem;  }
.pagination li a{  color: #737373}
.pagination li a i{  color: #737373; font-size:1rem;}
.page-link { border-radius: 0.25rem; font-size: 1.2rem; padding: 0.35rem 0.8rem; border-color:#cfcfcf; }
.page-link:hover  { background-color: #f15b27; color: #fff;}
.page-link:hover i{ color: #fff;}
.page-total { line-height: 1.25; padding: 0.5rem 0.1rem;}
.page-bottom { position: relative;}
.page-abso { position: absolute; top:0; right: 0;}
/* --------------------------------------------- /pagination */

/* --------------------------------------------- toast */
.toast-title { font-size: 1.3rem;}

.toast-custom { background: #f15b27;  padding: 1rem 2rem !important;}
.toast-custom .toast-title { font-size: 1.1rem; font-weight: normal;}
.toast-custom .toast-message { font-size: 1.3rem; line-height: 1.3rem;}

/* --------------------------------------------- /toast */

/* --------------------------------------------- alert */
.alerted {
    padding: 20px 30px;
    font-size: 1.1rem;
    line-height: 20px;
    text-align: center;
}

.alerted h4 {
    font-size: 1.8rem;
    line-height: 40px;
    margin: 10px auto;
}


.btn-modal {
    margin: 5px auto;
    font-size: 20px;
    background: #f15b27;
    color: #fff;
    padding: 0 50px;
    border-radius: 5px;
    outline: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.btn-modal:focus,
.btn-modal:active,
.btn-modal:hover {
    outline: none;
    background-color: #d7410d;
    color: #fff;
}

/* --------------------------------------------- widhlish */
.fancybox-outer { border-radius: 0;}
.frm-wh {  }
.frm-wh .frm-wh-top { background:#333333; line-height:50px; z-index: 99; }
.frm-wh .frm-wh-top div { background:#333333; }
.frm-wh .frm-wh-title { font-size: 1.4rem; color: #fff; padding-left: 1rem;}
.frm-wh .frm-wh-add a{ font-size: 1.3rem; padding-right: 1rem;}
.frm-wh .frm-wh-content {  height: 300px; overflow: auto;}
.frm-wh .btn-modal { font-size: 1.1rem; padding: 0 1rem; border: none; margin: 5px; min-width: 70px;}
.frm-wh .btn-modal i { font-size: 0.8rem; padding-top: 6px;}
.frm-wh .btn-yes { background: #f15b27;}
.frm-wh .btn-yes:hover { background: #d7410d;}
.frm-wh .btn-no { background: #6e6e6e;}
.frm-wh .btn-no:hover { background: #464545;}
.frm-wh .frm-wh-bottom { height:45px;z-index: 99; }

/* --------------------------------------------- tab */
.project-tab {
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
}
.project-tab #tabs{
    background: #007b5e;
    color: #eee;
}
.project-tab #tabs h6.section-title{
    color: #eee;
}
.project-tab #tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #d7410d !important;
    background-color: transparent;
    border-color: transparent transparent #d7410d !important;
    border-bottom: 3px solid !important;
    font-size: 1.4rem;
    font-weight: bold;
}
.project-tab .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    color: #585858;
    font-size: 1.25rem;
    font-weight: normal;
}
.project-tab .nav-link:hover {
    border: none;
}
.project-tab thead{
    background: #f3f3f3;
    color: #333;
}
.project-tab a{
    text-decoration: none;
    color: #333;
    font-weight: 600;
}

/* --------------------------------------------- picture profile */
.img-profile-sm { max-width: 50px; }
.img-profile-md { max-width: 105px; }
.img-profile {  }
.txt-welcome { line-height: 1.8rem; padding-top: 1rem; }


/* --------------------------------------------- product card */
.container-pd {display: flex;flex-wrap: wrap; margin-top: 0.5rem; }
.parent-pd {width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));  }
.card-pd { padding: 0.8rem; width: 230px; }
.card-pd .card-img { position: relative;}
.card-pd .card-body { margin:0; padding: 1rem 0.4rem 0 0.4rem; }
.card-pd .card-body .card-title {  margin:0; font-size: 1.6rem; color: #737373; line-height: 1.4rem;}
.card-pd .card-body .pdetail { font-size: 1.25rem; color: #b8b8b8; line-height: 1.3rem;}
.card-pd .card-body .pname { font-size: 1.45rem; color: #737373; line-height: 1.3rem;}
.card-pd .form-group { text-align: center; font-size: 1.25rem; margin: 0.8rem 0 0.4rem 0;}
.card-pd .form-group label{ margin: 0;}
.card-pd .form-group .form-control{ font-size: 1.4rem;}

.card-pd .text-qty { width: 84px; }
.card-pd .select-unit { }
.card-pd .btn_shopping_cart { background: #b8b8b8; border-color: #b8b8b8;}
.card-pd .btn_shopping_cart:hover { background: #737272;  border-color: #737272}

.card-pd .pd-heart{
    background: transparent url("../images/icon/ic_heart.png") center center no-repeat;
    width: 26px;
    height: 24px;
    margin-top: 7px;
    cursor: pointer; 

    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
.card-pd .pd-heart.active{
    background: transparent url("../images/icon/ic_heart_active.png") center center no-repeat;
    width: 26px;
    height: 24px;
}
.card-pd .pd-heart:hover{ 
    background: transparent url("../images/icon/ic_heart_hover.png") center center no-repeat;
    width: 26px;
    height: 24px;
}

.card-pd .tag { position: absolute; bottom: -8px; left: 15px; }

.tag { color: #fff;  font-size: 1.05rem; border-radius: 0.8rem; min-width: 60px; text-align: center; padding: 0 0.2rem; line-height: 1.4rem;}
.tag-green { background: #58e722; }
.tag-red { background: #e30000; }
.tag-yellow { background: #fdd412; }

.img-wmark { position: absolute; top: 0; left: 0;}

/* --------------------------------------------- /product card */

/* --------------------------------------------- product checkout */
.row-pd { border-top: 1px solid #e6e6e6;}
.row-pd .pcode {  font-size: 1.5rem; color: #737373; line-height: 1.4rem;}
.row-pd .pdetail { font-size: 1.25rem; color: #b8b8b8; line-height: 1.3rem;}
.row-pd .pname { font-size: 1.4rem; color: #737373; line-height: 1.3rem;}
.row-pd .pbrand { font-size: 1.4rem; color: #737373; line-height: 1.3rem;}
.row-pd .pwidth { font-size: 1.4rem; color: #b8b8b8; line-height: 1.3rem;}
.row-pd .qty { font-size: 1.35rem; color: #737373; line-height: 1.3rem;}
.row-pd .unit { font-size: 1.35rem; color: #737373; line-height: 1.3rem;}
.row-pd .tag { line-height: 1.05rem; padding: 0.05rem 0.2rem; margin-top: 0.2rem; width: 60px;}
.row-pd .sm-txt { font-size: 1.25rem; }
/* --------------------------------------------- /product checkout */

/* --------------------------------------------- Popup Right */
.popup-slide-right, .popup-slide-left {
    cursor: pointer;
}
.popup-slide-right-card {
    width: 500px;
    background-color: #fff;
    box-shadow: 0px 0px 14px 0px rgba(0,0,0,.2);
    position: fixed;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    z-index: 9999;
    top: 0;
    right: -100%;
}
.popup-slide-wrapper {
    position: relative;
}
.popup-slide-header {
    height: 102px;
    padding: 5px 15px 10px 15px;
    background: #e5e6e7;
    color: #555353;
    font-size: 1.4rem;
    line-height: 30px;
}
.popup-slide-header .popup-slide-right-close img {
    max-width: 15px;
    cursor: pointer;
}
.popup-slide-header p {
    color: #000000;
    font-size: 1.6rem;
    margin-bottom: 0;
}
.popup-slide-content {
    font-size: 1.3rem;
    padding: 10px 15px;
    height: calc(100vh - 102px);
    height: calc((var(--vh, 1vh) * 100) - 102px);
    overflow-y: auto;
    -ms-overflow-style: none;  
    scrollbar-width: none; 
}
.popup-slide-content::-webkit-scrollbar {
    display: none; 
}
.popup-slide-content .d-rolls {
    display: inline-block;
    width: 50px;
    border: 1px solid #9a9999;
    text-align: center;
    font-size: 1.3rem;
    margin: 0 2px 5px 0;
}
.popup-slide-content .d-note {
     border: 1px solid  #d7410d;
}
.popup-slide-content .d-booked {
    background: #d7410d;
    color: #fff;
}
.tooltip {
    z-index: 9999;
}
/* --------------------------------------------- /Popup Right */


/* --------------------------------------------- media screen */
@media (min-width: 1250px) {
    .container { max-width: 1230px;}
}
@media (min-width: 1200px) {
    .textarea-remark { margin-left: 4rem;}
}


@media (max-width: 1199.98px) {
    .my-menu li.nav-item { padding: 0 0.2rem;}
 }   

@media (max-width: 991.98px) {
    .bg-light { padding:0.7rem; }
    .navbar-brand{ background-position: left top; background-size: 27px 29px; padding:0 0 0 3rem;}
    .my-menu .navbar-nav { display:inline-block; text-align: left; }
    .my-menu .nav-link { background-position: left top; padding:0.4rem 0.6rem 0.4rem 2.4rem  !important;}
    .my-menu .nav-item { margin: 0.8rem;}
    .my-nav { position: absolute; top: 63.4px; left: 0; background: #f9fbfd; width: 100%; z-index: 99;}
    .num-notic-cart { left:10px !important; right: auto;}

    .dv_place { padding-left: 0; padding-right: 0;}

    .col-contact { text-align: center !important;}
    .contact_border { margin-right:0 !important; width: 100%; }
    .contact { text-align: center;}
    .contact_content { display: table; margin: 0 auto;}
    .mycard { padding: 1rem;}
    .r-link { padding-right: 1rem !important;}
    .panel_page_top { padding-top: 15px;}
    .slide_search { display: block;}
    .row-search-cate { display: none;}
    .row-search-cate .form-group { padding: 0 15px !important; margin-bottom: 0.5rem;}
    .row-search-cate button { width: 100%;}
    .footer { text-align: center;}
    .navbar-brand { padding-left: 0;}
    .img-logo { max-height: 50px;}
}

@media (max-width: 767.98px) {
    /*    .logo_s { display: none; text-align: left !important;}*/
    .page-abso { position: relative;}
}

@media (max-width: 575.98px) {
    .col-logo-b { text-align: center;}
    .SPCode { min-width: max-content;}
    .title-md { margin-top: 1rem;}
    .alerted h4 { font-size:1.2rem;}
    .order-status { text-align: left !important;}
    .nav-profile {justify-content: center !important;}
    .nav-profile .title-xl { text-align: center;}
    .nav-profile .title-sm { text-align: center;}
}

@media screen and (max-width: 500px) {
  .popup-slide-right-card, .popup-slide-left-card {
    width: 100%;
  }
}

@media (max-width: 405.98px) {
    .project-tab .nav-link { padding: 0;}
}


@media (min-width: 768px)  { 
    .form-inline .form-group {
        display: inline-block;
        margin-bottom: 1rem;
        margin-right: 5px;
        vertical-align: middle;
    }
}

@media (min-width: 300px) and (max-width: 991.98px) { 
    .img-profile{ max-width: 250px;}
}