body, .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-family: 'Source Sans Pro', sans-serif!important;}
 body.page-login {display: table; margin: 0; padding: 0;   background-image: url('../img/health_backgoround.jpg'); background-position: top center; background-size: cover;
            position: relative; height: 100%; width: 100%; overflow: auto; background-repeat: no-repeat; z-index: 1; background-attachment: fixed;font-family: 'Source Sans Pro', sans-serif!important; }
  .page-login #slick {width: 100%; height: auto; display: block; padding: 0; margin: 0 auto;}



/**************************max code***********************/
/*layout*/
section.content {padding-bottom: 0; min-height: calc(100vh - 217px)}
section.content div.content {min-height: calc(100vh - 235px)}
.content-header>h1 {font-weight: bold; text-transform: uppercase}
.content-wrapper {background: #faf6f5}
.breadcrumb {background: transparent;}
.breadcrumb a {color: #777}
.breadcrumb span:nth-last-child(2)  {color: #df869a; }
.not-editable{display: block; width: 100%; height: 40px; padding: 9px 12px; font-size: 14px; line-height: 1.42857143; color: #a9a4a4; background-color: #eaeaea; border: 1px solid #ccc; border-radius: 0;}
a { color: #df869a;}
a:hover, a:active, a:focus { outline: none; text-decoration: none;  color: #9e344d;}
input[type=checkbox], input[type=radio] { line-height: normal; width: 18px; height: 18px; display: inline-block; vertical-align: middle; margin: 0 5px 0 0;}

/*page login*/
.page-login section.default {display: table; width: 100%; height: 100vh; margin: 0; padding: 0; }
.page-login .container {display: table-cell;  vertical-align: middle; padding: 0 20px; margin: 0;}
.page-login .container #ContentPlaceHolder1_divLogin{display: table;width: 100%;max-width: 450px;padding: 40px 40px;border: 1px solid #ccc;margin: 0 auto;background: rgba(255, 255, 255, 0.9);  box-shadow: 0px 8px 8px 0px rgba(127, 155, 255, 0.075), 0 0 8px rgba(123, 122, 122, 0.29);}
.page-login h3{ color: #e092a2}
.page-login .container .logo-holder {display: block; width: 100%; max-width: 200px; margin: 0 auto 30px!important; padding: 0!important;}
.page-login .container .logo-holder img {display: table; width: 100%; margin: 0 auto!Important; padding: 0!important;}
.page-login #slick .field span.icon { margin: 0; position: absolute; top: 0; left: 0; color: #e092a2; background: #ddd; font-size: 16px; line-height: 40px; text-align: center; width: 38px; height: 100%;}

.page-login .container #ContentPlaceHolder1_divLogin .col-md-3, .page-login .container #ContentPlaceHolder1_divLogin .col-md-6 {display: block; width: 100%; margin: 0 auto; padding: 0;}
.page-login .container #ContentPlaceHolder1_divLogin input[type='text'], .page-login .container #ContentPlaceHolder1_divLogin input[type='password']{color: #222;border: 1px solid #ccc;background-color: #fff;height: 40px;box-shadow: 0 1px 1px rgba(127, 155, 255, 0.075) inset, 0 0 8px rgb(232, 232, 232);outline: 0 none;padding-left: 45px;}
.page-login .container #ContentPlaceHolder1_divLogin .form-control:focus { border-color: rgb(249, 183, 7); box-shadow: 0 1px 1px rgba(127, 155, 255, 0.075) inset, 0 0 8px rgb(249, 183, 7); outline: 0 none;}
.page-login .container #ContentPlaceHolder1_divLogin input::placeholder {color: #ccc}

.page-login #slick .field div{ width: 100%;}
.page-login .btn-default {display: block; width: 100%; padding: 10px; text-align: center; min-height: 40px; background-color: #3b3b3b; color: white; width: 100%; text-align: center; margin: auto;color: white; font-size: 12px;}
.page-login .btn-default span {color: #fff!important}

/*pw input field*/
.page-login #slick .pw-input-holder {display: table; width: 100%; }
.page-login #slick .pw-input-field {display: block; width: calc(60% - 10px); margin: 0 10px 0 0; padding: 0; float: left}
.page-login #slick .pw-input-view {display: block; width: calc(40% - 10px); margin: 0 0 0 10px; padding: 0; float: left; border: 1px solid #ccc; box-shadow: 0 1px 1px rgba(127, 155, 255, 0.075) inset, 0 0 8px rgb(232, 232, 232); background: #ccc; height: 40px;}
.page-login #slick .pw-input-view img.related1 { height: 100%; display: table; width: auto; float: left;}
.page-login #slick .pw-input-view a{display: block; width: 20px; float: right; margin: 6px 18px 6px 7px;}

/*btn lang*/
.btn-lang {display: block; position: absolute; top: 0; right: 0; padding: 2px 4px; margin: 20px; background-color: rgba(255, 255, 255, 0.8);}
.btn-lang select { display: block!important; position: relative; border: 1px solid #e092a2!important; background: transparent!important; color: #e092a2!important; outline: none}
.btn-lang select option { background: black!important; position: relative; padding-left: 30px}
.btn-lang select:before { content: ''; display: block; width: 20px; height: 20px; float: LEFT;  background: url(../img/flag/china.svg) no-repeat center; background-size: 20px; margin: 0;  padding: 0;}


.page-login .container #ContentPlaceHolder1_divLogin .btn-login { display: block; width: 100%; margin: 0 auto 10px; padding: 0;}
.page-login .container #ContentPlaceHolder1_divLogin input[type='submit'] { display: block; width: 100%; margin: 0; height: 40px; background: #e092a2;  color: white; text-transform: uppercase; font-weight: bold; font-size: 14px; border: 0 /*box-shadow: 1px 1px 1px #fff*/}
.page-login .container #ContentPlaceHolder1_divLogin input[type='submit']:focus { outline: #e092a2}
.page-login .container #ContentPlaceHolder1_divLogin .forget-password {font-size: 12px; text-align: center; color: #fff; line-height: normal; padding: 0; margin: 0 auto; }
.page-login .container #ContentPlaceHolder1_divLogin .forget-password a {color: #fff; text-decoration: underline}

.page-login .form-group {display: block; position: relative; margin-bottom: 20px}
.page-login .entypo-user.icon, .page-login .entypo-lock.icon {display: block; position: absolute; top: 0; left: 0; float: left; width: 20px; height: 20px; margin: 10px; padding: 0; }
.page-login .icon svg { fill: #e092a2 }

/*dashboard - home page*/
.main-header .logo {
    -webkit-transition: width .3s ease-in-out;
    -o-transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
    display: block; float: left; height: 50px; font-size: 20px; line-height: 50px; text-align: center; width: 230px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300; overflow: visible; background: rgba(0,0,0,0.2);
}
.skin-blue .main-header .logo:hover { background-color: transparent;}
.main-header .logo .logo-lg {
    display: block
}
.main-header .logo .logo-mini {
    display: none
}

/*menu top*/
.navbar-custom-menu.menu-right {display: block; float: right; margin: 0 auto; padding: 10px; background: transparent}
.navbar-custom-menu.menu-right .btn { display: inline-block; padding: 6px 25px; margin-bottom: 0; font-size: 14px; font-weight: 400; margin-top: 0; line-height: 1.42857143; text-align: center; white-space: nowrap;
    vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
    user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px;    background: transparent; color: #fff;}
.navbar-custom-menu.menu-right .profile-username { font-size: 1.2em; margin: 10px;}
.navbar-custom-menu.menu-right .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; float: left; min-width: 10rem; padding: 4px 0;
    margin: .125rem 0 0; font-size: 1em; color: #212529; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem; }
.navbar-custom-menu.menu-right .dropdown-item { display: block; width: 100%; padding: 8px 25px; clear: both; font-weight: 400; color: #212529; text-align: inherit;
    white-space: nowrap; background-color: transparent;  border: 0;}
.navbar-custom-menu.menu-right .dropdown-item .fa {margin-right: 5px}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus { outline: none; outline-offset: -2px;}
.btn:active {-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow: none;}
.navbar-custom-menu.menu-right .dropdown-item:hover,
.navbar-custom-menu.menu-right .dropdown-item:hover .fa { background: #1e282c; color:#df869a}
.navbar-custom-menu.menu-right .profile-username-arrow {fill: white; width: 12px; height: 12px; transform: rotate(90deg); margin: 0; padding: 0;}

.main-header { position: relative; max-height: 100px; border-bottom: none; z-index: 1030; box-shadow: none}
.main-header .navbar { box-shadow: 5px 0px 7px 4px rgba(0,0,0,0.15);}
.main-header .sidebar-toggle { float: left; background-color: transparent; background-image: none; padding: 8px 30px; font-family: fontAwesome; font-size: 30px;}
.skin-blue .main-header .navbar .sidebar-toggle:hover { background-color: transparent;}

/*side menu*/
.sidebar { padding-bottom: 100px;}
.main-sidebar {padding-top: 140px;  box-shadow: 1px 1px 3px #CCC;}
.main-header .logo .logo-lg {height: 100px!important; margin: 10px auto;}
.sidebar-mini.sidebar-collapse .sidebar-menu>li>a { margin-right: 0; width: 100%; padding: 15px 10px; text-align: center;}
.sidebar-menu>li>a>.fa {text-align: left;}
.sidebar-mini.sidebar-collapse .sidebar-menu>li>a>.fa {text-align: center;}
.sidebar-mini.sidebar-collapse .main-sidebar {padding-top: 60px;}

.skin-blue .sidebar a {font-weight: 600; color: #222}
.skin-blue .sidebar-menu>li>a { border-left: 3px solid transparent; font-size: 1em;}
.skin-blue .sidebar-menu>li>a>span>p {padding-left: 20px; opacity: .8}
.sidebar-menu li>a>.fa-angle-left,
.sidebar-menu li>a>.pull-right-container>.fa-angle-left { width: auto; height: auto; padding: 0; margin-right: 10px; transform: rotate(-180deg); transition: ease all 0.2s; font-weight: bold}
.sidebar-mini.sidebar-collapse .sidebar-menu>li>a>span{ text-align: left;}
.sidebar-mini.sidebar-collapse .sidebar-menu>li>a>span.pull-right-container{ text-align: right;}
.skin-blue .sidebar-menu>li>.treeview-menu { background: #293235; box-shadow: inset 1px 2px 6px #000000e3;; width: 100%; margin: 0; padding: 10px 25px;}
.skin-blue .sidebar-menu .treeview-menu>li>a {  color: #ccc;}
.skin-blue .sidebar-menu .treeview-menu>li>a:hover {  color: #df869a;}
.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container { left: 215px !important;}
.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > .treeview-menu { top: 100%;}

.sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu>li:hover>a>span p {padding-left: 0}




/*right sticker menu*/
.no-print, .no-print.open {display: none!important}

/*Dashboard*/
.referral-link-holder {display: inline-block!important; color: #555}
.referral-link-holder a {text-decoration: underline; color: inherit}

    /*box*/
.box {border-top: 1px solid #ddd; border: 1px solid #ddd; padding: 0 20px 20px 20px }
.box.box-info, .box.box-success {border-top-color: #ddd}

   /*multiple thumb*/
.c-widget-size-small {display: table; width: 100%; border-bottom: 1px solid #ddd!important; margin: 0 auto; height: auto; min-height: 160px; padding: 20px; }
.c-widget-icon {position: static; display: table; width: 100%; margin: 0 auto 10px ; text-align: center; padding:0 }
.c-widget-icon svg {width: 50px; height: 50px; margin: 0 auto; padding: 0; fill: #df869a}
.c-wdiget-content-block {color: #555; float: none; text-align: center; padding: 0 10px; margin: 0 auto; background-color: transparent; display: block;}
.cash-wallet-label {display: none}
.thumb-title-label {color: #df869a; font-weight: bold; display: block; text-align: center; padding: 0; clear: both}
.thumb-title-unit {font-size: 2em; font-weight: normal ; text-align: center; padding: 0; margin: 0 auto; color: #000;}
.thumb-small-description {display: none; max-width: 110px; margin: 0 auto; font-size: 0.8em; min-height: 32px;}
.dashboard-page .col-md-4 {margin-bottom: 40px}

.swiper-container-holder {display: block; width: 100%; margin: 0 auto; padding: 0; position: relative}
.swiper-container { width: 100%; height: 100%;}
.swiper-slide { text-align: center; font-size: 1em; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex;  display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center;  -ms-flex-align: center; -webkit-align-items: center; align-items: center; }

.swiper-button-next, .swiper-button-prev {display: block; position: absolute; margin: 10px; background-size: 12px 20px; background-position: center; background-repeat: no-repeat; margin-top: 0px; top: -40px; background-color:#654a51; height: 30px; width: 30px; }
.swiper-button-prev, .swiper-container-rtl .swiper-button-next { background-image: url(../Images/icon/left-arrow.svg); left: auto; right: 45px;}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev { background-image: url(../Images/icon/right-arrow.svg) ; right: 10px; left: auto;}
.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 1; cursor: auto; pointer-events: none; background-color: #acacac;}



    /*cash wallet canvas*/
.box-cash-wallet .box-header {border-bottom: none;}

/*footer*/
footer {display: table!important; width: calc(100% + 30px); margin: 0 auto; padding: 20px 10px; background: #fcdedd; color: #000; font-size: 0.9em; }
footer a {text-decoration: underline; color: inherit}
footer .footer_logo {display: table; width: auto; margin: 0 auto 10px; padding: 0; clear: both; max-width: 70px}
footer .footer_logo img{display: table; width: 100% ; margin: 0 ; padding: 0; }
#back-to-top {position: fixed; z-index: 999; margin: 10px; padding: 0; bottom: 55px; right: 0; cursor: pointer;}

/*latest announcement*/
.box-announcement {position: relative}
.box-announcement .box.box-info{height: 604px; overflow-x: hidden; overflow-y: auto; margin-bottom: 0}
.box-announcement .box.box-info::-webkit-scrollbar {display: none}
.box-announcement .col-md-12.col-xs-12:before {content: '';display: block;width: calc(100% - 32px);margin: 0 16px; height: 80px ;position: absolute; z-index: 2; bottom: 0px;left: 0;background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 4%, rgba(255,255,255,1) 64%, rgba(255,255,255,1) 100%);background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 4%,rgba(255,255,255,1) 64%,rgba(255,255,255,1) 100%);background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 4%,rgba(255,255,255,1) 64%,rgba(255,255,255,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );}

.box-header {width: calc(100% - 0px); margin: 0 auto; padding: 20px 0; border-bottom: 1px solid #ccc; }
.box-header h3, .box-header h4 {font-size: 1.4em; font-weight: bold; text-align: left; padding: 0; margin: 0; color: #df869a; float: left}
.box-announcement .table-striped > tbody > tr:nth-of-type(odd) {background: transparent!important}
.box-announcement .table>tbody>tr>th {display: none;}
.box-announcement .table>tbody>tr>td {border-top: none;}
.box-announcement .table>tbody>tr {border-bottom: 1px solid #ddd;position: relative;display: block;}
.box-announcement .table>tbody>tr:hover {opacity: 0.9; }
.box-announcement .table>tbody>tr:last-child {border-bottom: none}

.box-announcement .table>tbody>tr>td:first-child {width: 100%;padding: 40px 0 20px;text-align: left;}
.box-announcement .table>tbody>tr>td:nth-child(2) {position: absolute;left: 0;font-weight: bold;top: 20px;padding: 0;}

/*loading page*/
.progressTest { top: 0%; left: 0%; width: 100%; height: 100%; position: fixed; z-index: 10000; background-color: rgba(255, 255, 255, 0.8);  color: #000;}
.progressTest img {width: 70px; margin: 0 auto; padding: 0; clear: both; display: block; }
.progressTest span.loading {font-size: 1.4em; font-weight: normal; text-align: center; padding: 0; margin: 0 auto;}

@keyframes blink {
    0% {
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
}
.loading span {
    animation-name: blink;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}
.loading span:nth-child(2) {animation-delay: .2s;}
.loading span:nth-child(3) {animation-delay: .4s;}

/*inside page*/
.btn-clear:hover, .btn-clear:active, .btn-clear.hover {background-color: #75434e; }
button, html input[type=button], input[type=reset], input[type=submit] {background: #df869a; border: #75434e; margin: 10px 5px 0; padding: 6px 25px;    box-shadow: 1px 1px 0px 0px #75434e;}
.table tr td .btn {background: #df869a; border: #75434e; margin: 4px 5px; padding: 6px 25px;}
.table tr td .btn:hover,
.btn-primary:hover, .btn-primary:active, .btn-primary.hover {background: #75434e; border: #df869a; }
.table>tbody>tr>th {border-top: none; background: #df869a;}
.table>tbody>tr>th, .table>tbody>tr>th>a {color: #fff;}
.box .box-body {padding: 0; padding-top: 0}
.box-header select {color: #000;}
.form-control {min-height: 40px;}
.box.box-primary { border-top-color: #ddd}
.table-striped>tbody>tr:nth-of-type(odd) {background:#eaeaea !important }
.btn-searh:hover, .btn-searh:active, .btn-searh.hover { background-color: #75434e; color: #fff; border: #df869a;}

/*pagenation*/
.dataTables_paginate {display: table; width: auto; margin: 10px auto; position: relative}
.dataTables_paginate .pagination {display: block; position: relative; left: 10%; margin: 0 20px; padding: 0;}
.pagination>li>a.aspNetDisabled {background: #df869a!important; color: #fff;}

/*sales order*/
.bg-green, .callout.callout-success, .alert-success, .label-success, .modal-success .modal-body {background-color: transparent!important; color: #00a65a !important;
    border: none; font-weight: bold; padding: 10px 0;  margin: 0;}

 /*filter by*/
    .filter-by {display: block; float: right; margin: 0; padding: 0; font-weight: bold }

/*page announcement*/
.box-body.box-form .col-md-12,
.box-body.box-form .col-md-9,
.box-body.box-form .col-md-6 {margin-bottom: 20px}


/*modal*/
.modal .box-content {display: block; margin: 0 auto 40px;}
.modal .controls input[type="text"] {display: block; width: 100%; margin: 0 auto; height: 40px;}
.modal button.close { -webkit-appearance: none; padding: 0; cursor: pointer; background: 0 0; border: 0; color: #000; opacity: 1; box-shadow: none; float: right !important;
    margin: 0px 5px; font-size: 30px;}
#ContentPlaceHolder1_MemberListControl1_ctl00 .box.box-primary {padding: 0; border: 0; background: transparent; box-shadow: none;}
#ContentPlaceHolder1_myModal {padding: 10px; padding-left: 10px!important;}
#ContentPlaceHolder1_myModal .box-title-noMargin {display: block; width: 100%; height: auto; position: relative; z-index: 111111;}
#ContentPlaceHolder1_myModal .box-title-noMargin h4 {display: none;}
#ContentPlaceHolder1_MemberListControl1_ctl00 .box.box-primary .box-title {display: table; width: 100%; margin-bottom: 20px}
#ContentPlaceHolder1_MemberListControl1_gv {box-shadow: inset 0px 0px 0px 1px #ddd}


/*Register Page*/
.page-register .logo-lg {display: table; max-width: 90px; margin: 0 auto; width: 100%; padding: 10px 0;}
.page-register .header {background-color: #df869a; box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.15);}
#ddlCulture {display: none}
.page-register .btn-info { background-color: #df869a; border-color: #df869a;}
.page-register .btn-info:hover, 
.page-register .btn-info:active, 
.page-register .btn-info.hover { background-color: #75434e;}
.page-register .box .box-body { padding: 30px 20px; padding-top: 30px;}
.page-register table tr td label {margin-right: 10px;}
.page-register .box-body .form-group.col-md-6 .flex select:nth-child(2) {margin: 0 20px}

.page-register .progress.progress-sm.m-t-sm {margin-bottom: 0}
.page-register .nav-tabs-custom > .tab-content {padding: 0; border: 0}
.page-register .nav.nav-tabs a .fa{margin-right: 5px}
.page-register .nav-tabs-custom > .nav-tabs > li.active {border-top-color: #df869a;}
.page-register .nav-tabs-custom {box-shadow: none}
.page-register .btn-default { background: #df869a; border: #75434e; margin: 10px 5px 0; padding: 6px 25px; box-shadow: 1px 1px 0px 0px #75434e; color: #fff; border-radius: 4px}
.page-register .btn-default:hover,
.page-register .btn-default:focus,
.page-register .btn-default:active { background: #75434e; border: #75434e; color: #fff;}
.page-register .nav>li>a {padding: 10px 8px}
.page-register .nav-tabs-custom > .nav-tabs > li {margin-right: 0}
.page-register .progress-bar-light-blue, .progress-bar-primary { background-color: #a90000;}
.page-register .no-m.text-success {width: 100%; text-align: right}


.desktop-only {display: block!important;}
.mobile-only {display: none!important;}

@media (min-width: 1500px){
    .box-announcement .box.box-info{ height: 785px; overflow-x: hidden; overflow-y: auto;  margin-bottom: 0;}
}


@media (min-width: 768px){
    .sidebar-mini.sidebar-collapse .main-header .logo { width: 50px; padding: 4px 5px;}

    /*referral link*/
    .referral-link-holder.desktop-only {display: inline-block!important}

    /*multiple thumb*/
    .page-dashboard .swiper-wrapper {display: block}
    .page-dashboard .swiper-slide.col-md-3 { display: block; width: 25%; }
    .swiper-dashboard-next, .swiper-dashboard-prev {display: none;}
    .swiper-slide {display: contents}

    /*sales order*/
    .box-grey-divider {display: block; width: calc(100% + 44px); margin: 0 auto; padding: 0; height: 40px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #faf6f5; margin-left: -22px}

     /*form table*/
   .form-table.table-bordered {border: none!important} 
   .form-table td {display: block; width: 100%!important; border: none!important}
   .form-table .hidden-480 {display: none!important;}
   .form-table tr {display: block; width: 100%; padding: 10px 0}
   .form-table.col-2-form tr,
   .col-2-form.form-control {width: 50%; float: left}
   .form-table td:first-child { font-weight: bold; padding-bottom: 0;}
   .form-table td .col-md-9, .form-table td .col-md-3  {padding: 0; width: 100%!important; }
   .form-table td .col-md-3  {display: table; width: auto!important; margin: 5px auto ; }

   /*modal*/
   .modal .form-actions {text-align: right}
}


@media (max-width: 991px){ 
    .content-header>.breadcrumb {background: transparent}

}


/*mobile device start here*/
@media (max-width: 767px){
    .desktop-only {display: none!important;}
    .mobile-only {display: block!important;}
    
    /*layout*/
    .content-header>.breadcrumb {display: none}

    /*page login*/
    .page-login .container .logo-holder {width: 60%; }
    .page-login .container #ContentPlaceHolder1_divLogin {padding: 25px 20px}
    .page-login h3 {margin-top: 0;}

    .page-login #slick .pw-input-field {display: block; width: calc(55% - 10px); margin: 0 10px 0 0; padding: 0; float: left}
    .page-login #slick .pw-input-view {display: block; width: calc(45% - 10px); margin: 0 0 0 10px; padding: 0; float: left; border: 1px solid #ccc; box-shadow: 0 1px 1px rgba(127, 155, 255, 0.075) inset, 0 0 8px rgb(232, 232, 232); background: #ccc; height: 40px;}
    .page-login #slick .pw-input-view a { margin: 6px 8px 6px 2px; }

    /*side menu*/
   .skin-blue .main-sidebar {padding-top: 60px; }
   .skin-blue .sidebar a.logo {display: block; width: 100%; margin: 20px auto; padding: 0; max-width: 160px }
   .skin-blue .sidebar a.logo img {display: table; width: 100%; margin: 0 auto; padding: 0; }

   /*referral link*/
   .referral-link-btn {display: table!important; margin: 10px auto 30px; padding: 10px 30px; text-align: center; color: #fff; background: #df869a; border-radius: 4px;}

   /*multiple thumb*/
   .dashboard-page .col-md-4 {width: 100%; margin-bottom: 30px;}
   .c-widget-size-small {padding: 30px}
   .swiper-container {width: calc(100% + 20px)}
   .swiper-button-next, .swiper-button-prev {top: -47px}

   /*box announcement*/
   .box-announcement .col-md-12.col-xs-12 {padding-left: 30px; padding-right: 30px}
   .box-announcement .box.box-info {height: 400px}
   .box-announcement .col-md-12.col-xs-12:before {content: ''; display: block; width: calc(100% - 62px); margin: 0 31px;}

   /*inside page*/
   .box-footer{ text-align: center; display: block; border-top: none}
   button, html input[type=button], input[type=reset], input[type=submit] { display: inline-block; float: none!important;}

   /*page announcement*/
   .box-body.box-form .col-md-12, 
   .box-body.box-form .col-md-9, 
   .box-body.box-form .col-md-6 {padding: 0}

   /*sales order*/
    .bg-green, .callout.callout-success, .alert-success, .label-success, .modal-success .modal-body {padding: 10px }
    .table-product-details .box-body.table-responsive {border: 0}
    
    #ContentPlaceHolder1_step1 .form-table tr {border: 1px solid #ddd;}

    #ContentPlaceHolder1_step2 .form-table td input[type="submit"] {width: 44%; display: inline-block}
    .box-grey-divider {display: block; width: calc(100% + 44px); margin: 0 auto; padding: 0; height: 40px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #faf6f5; margin-left: -22px}
    #ContentPlaceHolder1_step2 .form-table td.controls {text-align: center}
    #ContentPlaceHolder1_gv2 tr:first-child {display: none; }
    #ContentPlaceHolder1_fillingForm .box-grey-divider {height: 60px}
    #ContentPlaceHolder1_step2_Product .box-header {margin-top: -50px; border-bottom: none}
    .modal .box-primary .form-actions input[type="submit"] {width: 44%; display: inline-block}

    #ContentPlaceHolder1_gv3 tr:nth-child(3) td:nth-child(3) {display: none!important}

    #ContentPlaceHolder1_gv4 tr:nth-child(3) td:nth-child(3), 
    #ContentPlaceHolder1_gv4 tr:nth-child(3) td:nth-child(4) {/* display: none!important */}
    #ContentPlaceHolder1_gv4 tr:nth-child(3) td:nth-child(6) {/* display: table!important; */}

    #ContentPlaceHolder1_gv5 tr:nth-child(3) td:nth-child(2),
    #ContentPlaceHolder1_gv5 tr:nth-child(3) td:nth-child(3),
    #ContentPlaceHolder1_gv5 tr:nth-child(3) td:nth-child(4) {display: none!important; }
    
    #ContentPlaceHolder1_gv5 tr:nth-child(3) td:nth-child(5),
    #ContentPlaceHolder1_gv5 tr:nth-child(3) td:nth-child(6) {display: table!important; }

    #ContentPlaceHolder1_gv6 tr:nth-child(3) td:nth-child(3) {display: none!important;}
   
    /*form table*/
   .form-table.table-bordered {border: none!important} 
   .form-table td {display: block; width: 100%!important; border: none!important}
   .form-table .hidden-480 {display: none!important;}
   .form-table tr {display: block; width: 100%; padding: 10px 0}
   .form-table td:first-child { font-weight: bold; padding-bottom: 0;}
   .form-table td .col-md-9, .form-table td .col-md-3  {padding: 0; width: 100%!important; }
   .form-table td .col-md-3  {display: table; width: auto!important; margin: 5px auto ; }


   /*max table*/
   .max-table { width: 100%; border: 0; }
   .max-table, .max-table thead, .max-table tbody, .max-table th, .max-table td, .max-table tr { display: block; }	
   .max-table thead tr { position: absolute; top: -9999px; left: -9999px;}	
	.max-table tr { border: 1px solid #ccc; margin-bottom: 40px; }	
    .max-table tr:first-child, .max-table tr th { display: none}	
    .max-table td { position: relative; text-align: right; width: 100%!important }
    .max-table td:before { position: absolute; top: 6px; left: 6px; width: 45%;	padding-right: 10px; white-space: nowrap; content: attr(data-column); color: #000;
		font-weight: bold;	text-align: left;}
    .max-table td input[type="text"] { text-align: right; width: auto; max-width: 100px; height: 30px; padding: 5px; border: 1px solid #ccc}
    .max-table.table-striped>tbody>tr:nth-of-type(odd) { background: transparent!important;}

        /*table with total*/
     .max-table-total tr:last-child, .max-table-total tr:last-child td {border: 0; font-weight: bold}
     .max-table-total tr:last-child { margin-top: -30px; font-size: 1.4em;}
     .max-table-total tr:last-child td{display: table;}
     .max-table-total tr:last-child td:nth-child(3), 
     .max-table-total tr:last-child td:nth-child(4),
     .max-table-total tr:last-child td:nth-child(5) {display: table;}

     /*page register*/
        /*page table*/
        .content.col-lg-10.no-padding #ContentPlaceHolder1_gv tr td:nth-last-child(2) {display: table; text-align: right; }
        .content.col-lg-10.no-padding #ContentPlaceHolder1_gv tr td:first-child {display: none}
        .content.col-lg-10.no-padding #ContentPlaceHolder1_gv tr td input {float: right; clear: both; display: block; margin: 10px 5px;}

        #ContentPlaceHolder1_UpdatePanel4 .panel.panel-white {padding: 10px 15px}
        #ContentPlaceHolder1_UpdatePanel4 #ContentPlaceHolder1_ddlPaymentMethod {margin-bottom: 20px}

        .invoice .col-md-8 {display: table}
        .invoice .col-md-8 h1.m-b-md {font-size: 2em;}
        .invoice .col-md-12 .panel-heading.clearfix {padding: 10px 0}

        .invoice #gv tr td:nth-child(3) {display: none}
        .invoice .thank-you-summary {text-align: center;display: block;margin: 0 auto 15px;padding-bottom: 15px;border-bottom: 2px solid #ccc;}
        .invoice .text-total-holder {display: table; width: auto; margin:0 auto; padding: 0; float: none; text-align: center;}
        .invoice .text-total-holder h1,
        .invoice .text-total-holder h4 {display: block; float: left; width: auto!important; text-align: left!important; vertical-align: middle; padding: 0; margin: 0 auto}
        .invoice .text-total-holder h4 {margin: 10px; } 
        .invoice .no-m span {font-weight: bold; }
        .pager li:last-child {float: right}

        #personalInfoTable tr td {border-bottom: none}
        #personalInfoTable tr td:first-child {width: 90px!important; display: block;  float: left;}
        #personalInfoTable tr td:nth-child(2) {width: calc(100% - 90px)!important; display: block;  float: left; word-break: break-word;}
        #personalInfoTable tr {width: 100%;  display: table;}

    /*box footer*/
    .box-footer {border-top: none;}
}

/*Global1.Master menu notification*/
 .label {clear: both; display: block; width: 94%; white-space: normal; margin: 10px auto; text-align: right;}

  @media (max-width: 767px) {.label {text-align: center;}}