/* trade-portal 2.1.3*/
/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/material_icon.woff2) format('woff2');
}

/* fallback */
@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/material_icon_outline.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Icons Round';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/material_icon_round.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Icons Sharp';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/material_icon_sharp.woff2) format('woff2');
}
/* fallback */
@font-face {
  font-family: 'Material Icons Two Tone';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/material_icon_twotone.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: text-bottom;
}

.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: text-bottom;
}

.material-icons-round {
  font-family: 'Material Icons Round';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: text-bottom;
}

.material-icons-sharp {
  font-family: 'Material Icons Sharp';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: text-bottom;
}

.material-icons-two-tone {
  font-family: 'Material Icons Two Tone';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: text-bottom;
}


.material-icons.sm,
.material-icons-outlined.sm,
.material-icons-round.sm,
.material-icons-sharp.sm,
.material-icons-two-tone.sm{ font-size: 18px;  }

.material-icons.md-48,
.material-icons-outlined.md-48,
.material-icons-round.md-48,
.material-icons-sharp.md-48,
.material-icons-two-tone.md-48{ font-size: 48px; }


.material-icons.md-64,
.material-icons-outlined.md-64,
.material-icons-round.md-64,
.material-icons-sharp.md-64,
.material-icons-two-tone.md-64{ font-size: 64px; }

::-ms-reveal {        display: none;    }					 
html.loginOuter{ position: relative;    padding-bottom: 40px; }
html{ font-size: 14px;  }
body{
	line-height:1.5;
    font-family:Hiragino , "PingHei",STHeitiTC-Light,  微軟正黑體, "Microsoft JhengHei",微軟雅黑, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: #eeeeee;
    height: 100%;
    overflow: auto;

}
h1,h2,h3,h4,h5,h6 {font-family: Hiragino , "PingHei",STHeitiTC-Light, 微軟正黑體, "Microsoft JhengHei",微軟雅黑, 'Helvetica Neue', Helvetica, Arial, sans-serif;}

body:lang(en),
h1:lang(en),
h2:lang(en),
h3:lang(en),
h4:lang(en),
h5:lang(en),
h6:lang(en){
    font-family:Arial ;
}

a{ text-decoration: none;}
h4{ font-size: 18px;}
.text-left{ text-align: left;}
.text-center{ text-align: center;}
.text-right{ text-align: right;}

.label-fd{ font-size: 0.8em; display: block;}

.row{ position:relative;}
.invalid-tooltip{ min-width:100px; }
.tooltip-inner{max-width:300px;}
.radio label .iradio_square-blue .tooltip-inner,
.checkbox label .icheckbox_square-blue .tooltip-inner,
.radio label .iradio_square-custom .tooltip-inner,
.checkbox label .icheckbox_square-custom .tooltip-inner{ word-break: keep-all;  white-space: nowrap;}

.login-page, .register-page{background:url(../images/bg.jpg) no-repeat; background-size:cover; background-attachment: fixed;  padding-bottom: 30px;height: 100%; min-height: 100%; }

.user_ib{ background: url(../images/icon_ib.png) left no-repeat; background-size:20px 20px; padding-left: 20px; display: inline-block;}
.user_trader{ background: url(../images/icon_trader.png) left no-repeat; background-size:20px 20px;  padding-left: 20px; display: inline-block;}
.tb_custom .user_trader:before,
.tb_custom .user_ib:before{  position: relative;  width: 10px; height: 5px; left: -30px;}
.modal-header .user_ib,
.modal-header .user_trader,
.widget-user .user_ib{ background-size:40px 40px;  width: 40px; height: 40px; display: inline-block;}
.widget-user .user_trader{ background-size:40px 40px;  width: 40px; height: 40px; display: inline-block;}



.option_hr{  margin: 20px 0px; color: #777777; text-align: center; min-height: 20px; line-height:20px; }
.option_hr hr{ margin-top: -10px; margin-bottom:0px; border-top:1px solid #777777;}
.option_hr span{ padding: 0px 15px; background: #FFFFFF; display: inline-block; line-height:20px;}

.btn-wechat{background:#04be02; color:#FFFFFF;}
.btn-wechat:hover{background:#2ad928; color:#FFFFFF;}

h1,h2,h3,h4{ margin : 0px;}
h4{ margin-bottom: 10px;}
.amount{ margin-bottom:5px; font-size:26px;}
.box.nonUse{ opacity: 0.7;}
.box-header,
.box-body,
.box-footer{ padding: 10px 15px; background: none;}
.box-header{
-webkit-border-radius: 8px 8px 0px 0px;
-moz-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
}
.box-footer{ border-top:0px; 
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px;

}
.box.box-widget .box-title{ line-height: 30px;}
.box-widget .box-body h4{ line-height: 20px;}
.login{ margin-top: 5%;}


.welcome_txt{font-size: 22px; font-weight: bold; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); line-height: 2em;
    text-align: left; color:#FFFFFF; padding-bottom: 20px; }
.welcome_txt .enlarge{ font-size: 1.55em;}
.login-box, .register-box{ max-width: 460px; width: auto; margin: 0px auto; color:#333333; }
.register-quick-box{ max-width: 660px;  margin: 0px auto; color:#333333; }
.login-box .box, .register-box  .box,
.register-quick-box .box{padding: 20px 10px;
-webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
    min-height: 280px;
}

.wechat-box{ width: 400px;  margin: 20px auto 0px auto; }
.wechat-box .box{padding: 30px 10px;
-webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
}
.wechat-box-body{ padding:0px 20px;}
.img-wechatqr{text-align:center;}
.img-wechatqr img{max-width:300px; width:100%;}

.box-header h2{color: #0073b7; }

.register_real{ max-width: 1320px; margin: 30px auto 0px auto;  position: relative;}
.register_real .box{ padding-top: 10px;}
.content .register_real{ max-width:none;}
.main-sidebar .logo-large {        display: block;     max-width: 100%;    }
.main-sidebar .logo-horizontal,
.main-sidebar .logo-icon{ display: none;}
.sidebar-mini.sidebar-collapse .main-sidebar  .logo-large{    display: none;}
.sidebar-mini.sidebar-collapse .main-sidebar  .logo-icon{    display: block;max-width: 100%;  }

.navbar-custom-menu > .navbar-nav{ flex-direction: row;}
.navbar-custom-menu > .navbar-nav > li{ font-size: 15px; line-height: 25px; padding: 0px 1px;}
.navbar-custom-menu > .navbar-nav > li a{ cursor: pointer;  }
.navbar-custom-menu > .navbar-nav > li .icon_img { width: 20px; height: 20px; display: inline-block; margin-top: -5px; }

.navbar-nav>.user-menu>.dropdown-menu { width: 220px; text-align: right; padding: 5px;}
.navbar-nav>.user-menu>.dropdown-menu li{ padding: 5px; }
.navbar-nav>.user-menu>.dropdown-menu li label{ width:90px; text-align: left; float: left;}
.navbar-custom-menu .fa{ font-size: 20px;  margin-right: 5px;}
.navbar-custom-menu .dropdown-item .fa{font-size: 1em;}

#menu_messages > li > a { padding: 0.25rem 1rem;     border-bottom: 0px;}

.sidebar-menu .treeview-menu{ padding: 0px;}
.sidebar-menu,
.sidebar-menu .treeview-menu>li>a{ font-size: 13px; white-space: normal; line-height: 20px;}
.sidebar-menu > li > a{ padding: 10px 5px; border-left:0px; }
.sidebar-menu:lang(vi),
.sidebar-menu:lang(vi) .treeview-menu>li>a{ font-size: 13px;}
.sidebar-menu:lang(en),
.sidebar-menu:lang(en) .treeview-menu>li>a{ font-size: 13px;}

.sidebar-menu .treeview-menu>li{ margin: 2px 0px 2px 0px;}

.sidebar-menu .treeview > span{line-height:20px;}

.sidebar-menu .icon_img{ width: 25px; height: 25px; display: inline-block; position:relative;top:-2px; margin-right: 5px;}

.sidebar-mini.sidebar-collapse .sidebar-menu .icon_img{margin-right: 0px; margin-left:5px;}
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right), .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu, .sidebar-mini.sidebar-collapse .sidebar-menu > li.ee > .treeview-menu{ width: 250px; margin-left: 0px; box-shadow: 4px 0px 4px 0px rgba(0, 0, 0, .2);}
.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu{ padding-top:0px; padding-bottom:0px; }
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span {
    padding: 12px 5px 12px 15px;
}
.sidebar-mini.sidebar-collapse .treeview-menu > li > a{  white-space:normal; }



.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu{  margin-left: 0px;}
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .fa{ font-size: 16px; text-align: center;}
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > img{ margin-left: 5px;}

.label{ font-size: 0.9em; border-radius: 5px; padding: 4px 8px 4px 8px; display: inline-block; line-height: 1.3em; min-height: 15px; word-break: keep-all; }
.widget-user .widget-user-header {
    padding: 10px;
    height: auto;
    
     border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}

.main-sidebar, .left-side{ padding-top: 0px; z-index: 1040; }
.main-header {box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, .1); }
.main-header .navbar { padding-top: 0px;   padding-bottom: 0px;  background:none; }
.main-header .navbar .dropdown-toggle::after{display: none;}
.main-header .navbar .nav-link{ padding-right:0.5rem;  padding-left:0.5rem; height: 40px; border-radius: 5px; }
.main-header .navbar .nav-link .material-icons{ float: left;}
.main-header .navbar .nav-link span:not(.material-icons, .material-icons-outlined){ margin-left: 5px;} 
.main-header .navbar .notifications-menu { position: relative;}
.main-header .navbar .notifications-menu .userName{ padding-right: 5px; float: left; text-overflow: ellipsis; max-width: 200px; max-height:40px; overflow: hidden;  display: -webkit-box; -webkit-line-clamp: 1;    -webkit-box-orient: vertical;}
.main-header .navbar .notifications-menu .kyc{display: none; width: 20px; height: 14px; position:relative; top:6px; float: left; }
.main-header .navbar .notifications-menu .kyc.v1{ background: url(../images/v1.png) no-repeat bottom; background-size:contain; display: inline-block; }
.main-header .navbar .notifications-menu .kyc.v2{ background: url(../images/v2.png) no-repeat bottom; background-size:contain; display: inline-block; }
.main-header .navbar .notifications-menu .label{padding: 0px 3px !important; line-height: 15px !important; top:3px !important; right: 3px !important;}
.main-header .navbar .notifications-menu  > .dropdown-menu > li.footer{  border-top: 1px solid #f4f4f4;;}
.main-header .navbar .notifications-menu  > .dropdown-menu > li.footer > a{ font-size: 14px; background: none !important;}

.kyc-label.v1{ background: url(../images/v1.png) no-repeat bottom; background-size:contain; display: inline-block; width: 30px; height: 20px; position:relative; top:4px;}
.kyc-label.v2{ background: url(../images/v2.png) no-repeat bottom; background-size:contain; display: inline-block; width: 30px; height: 20px; position:relative; top:4px; }


.widget-user .box-body{ padding: 0px 10px ;}
.widget-user .widget-user-header h4{ margin: 0px; line-height: 1.2em;}
.widget-user .acc_id{ font-weight: bold;}
.widget-user .box-footer {    padding-top: 10px;

     border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
}

.user_acc_group {
    padding: 15px;
    border: 1px solid #bbbbbb;
    border-radius: 15px;
    margin-bottom: 30px;
}

.siteName{ padding-left: 5px; font-size: 1.4rem;   margin: 0px; display:inline-block; font-weight: bold; color: #FFFFFF; line-height: 40px; }
.pageName{   line-height: 30px; display:inline-block; font-weight: bold; color: #336699;}
.content-wrapper{min-height: 1200px;}
.content-wrapper, .right-side{background:#efefef;  padding: 15px 0px; }
.content-header {
        padding: 0px 15px 0 15px; }

.user_info{ min-height: 150px; padding: 0px;  line-height: 30px; min-height: 30px;      flex-wrap: wrap;  flex-direction: column;}
.user_info li{ padding: 3px 5px 3px 3px; font-weight: bold;  display: flex; }
.user_info li dd{  width: auto;  margin: 0px; flex: 0 0 auto; }
.user_info li dd.fd{ width: 130px; float: left; }
.user_info li dd.password_edit{ width: 200px; position: relative;}
.user_info li dd.password_edit input{ }
.fd{font-weight: bold;}

.more_info .user_info li{ padding: 3px 5px 3px 140px;}
.more_info .user_info li dd.fd{ width: 140px; float: left; margin-left: -140px;}


.select-page{ width: auto; float: right; display: inline-block;     font-size: 12px; padding: 0px 5px; margin-left:10px;    line-height: 1.5; height: 30px;}
.select-row{ width: auto; display: inline-block;     font-size: 12px;  margin:0px 5px;    line-height: 1.5; height: 30px;}
.display-row{ margin-bottom: 10px;}



.desktop_shortcut{ background: #FFFFFF;   padding: 5px 0px 0px 0px; position: fixed; right: 0px; top: 50%; margin-top: -180px; z-index: 10; }
.desktop_shortcut ul { width: 100%; display: inline-block; padding: 0px; margin: 0px; width: 80px;}
.desktop_shortcut ul li{ width: 100%; display: inline-block; list-style: none; text-align: center;margin: 0px auto;width: 80px; height: 60px;  }
.desktop_shortcut .icon{ width: 26px; height: 26px; margin: 0px auto; display: block;}
.desktop_shortcut ul li a{width: 100%; cursor: pointer; font-size: 14px;}
.desktop_shortcut ul li a:hover,
.desktop_shortcut ul li a:hover .icon{ opacity: 0.6;}

.mobile_shortcut{ display: none;}

.icon_deposit{ background: url(../images/icon_deposit.png) no-repeat; background-size: 100%; }
.icon_withdrawal{ background: url(../images/icon_withdrawal.png) no-repeat; background-size: 100%; }
.icon_history{ background: url(../images/icon_history.png) no-repeat; background-size: 100%; }
.icon_position{ background: url(../images/icon_position.png) no-repeat; background-size: 100%; }
.icon_order{ background: url(../images/icon_order.png) no-repeat; background-size: 100%; }
.icon_order_history{ background: url(../images/icon_order_history.png) no-repeat; background-size: 100%; }
.icon_add_acc{ background: url(../images/icon_add_acc.png) no-repeat; background-size: 100%; }
.icon_add_acc{ background: url(../images/icon_add_acc.png) no-repeat; background-size: 100%; }


.img-id-card{ max-width: 250px; width: 100%;}
.dropdown-menu  li.header{padding: .25rem 1rem;}
.navbar-nav > .notifications-menu > .dropdown-menu > li.header, 
.navbar-nav > .messages-menu > .dropdown-menu > li.header,  
.dropdown-menu > li.header{ background: none; }
.menu-lang>li>a{ color: #0073b7!important;}



.price-down-txt, .price-down-text, .red-text{ color: #F52E2E;}
.price-up-text, .price-up-text, .green-text{ color: #00ae50;}
.blue-text{ color:#0066ff;}


.buy-label{ padding: 2px 8px;  display: inline-block; background:#F52E2E; color: #FFFFFF; border-radius: 5px; position: relative; top:-1px; margin-right: 3px;}
.sell-label{padding: 2px 8px;  display: inline-block; background:#00ae50; color: #FFFFFF;border-radius: 5px; position: relative; top:-1px; margin-right: 3px;}
.deposit-label{  display: inline-block; color: #00ae50;}
.withdrawal-label{ display: inline-block;  color: #F52E2E;}
.transfer-label{ display: inline-block; color: #1fb7fe;}
.tel-label{ padding: 2px 5px; font-size: 0.8em; background: rgba(120,120,120,0.2); border-radius: 3px;}


.btn-lang,
.sidebar-toggle{ font-size: 15px; }
.main-header .sidebar-toggle {    padding: .5rem 1rem; line-height: 25px; border-radius: 5px; }

.summary{ font-weight: bold; background: rgba(55,185,255,0.05); padding: 15px;  margin: 0px 0px  10px 0px; border:1px solid rgba(35,165,235,0.15); border-radius: 8px;     display: inline-block;    width: 100%;}
.summary hr{ background:rgba(15,145,215,0.7); }
.warning{ background: #f2dede; color:#a94442;  padding: 10px; margin-top: 10px; border:1px solid #eebaba; border-radius: 8px; font-size: 0.9em;}
.warning p{ margin-bottom: 0px; }
.img-logo{ width: 200px;  margin-top: 10px; }
.btn-group{ width: 100%; margin-bottom: 10px;}


.info-body{}
.info-body h3{ margin-bottom: 10px;}
.info-body .time{ font-size: 0.8em; color: #555555;}




.label-normal{ border-radius: 5px; padding: 0px 5px;}
.tb .dropdown-menu{ left: inherit; right: 0px;  min-width: 150px; }
.tb .dropdown-menu dd{ padding: 2px 5px;}



.group_ttl{ font-weight: bold; float: left; display: inline-block; line-height: 50px; color: #0073b7;}
.list_summary{}
.list_summary ul { display: flex; list-style: none; margin: 0px; line-height: 25px; padding: 0px; width: 100%; flex-wrap: wrap;}
.list_summary ul li{ width: auto;     max-width: 100%; padding: 0px 30px 0px 0px; flex: 1 0 0%;}
.list_summary ul li .item_value{ display: block; }


.summary{}
.summary dl { display: inline-block; list-style: none; margin: 0px; line-height: 25px; padding: 0px;}
.summary dl dd{display: inline-block; width: auto; float: left; padding: 3px 15px; text-align: center; min-width: 120px;}
.summary dl dd .item_value{ display: inline-block; }
.summary dl dd .fd{color: #9b8143;}
.summary dl dd .fd:after{content: ':'; margin-right: 10px;}



.groups_option{width: auto; margin: 20px -10px 0px -10px; text-align: center;}
.all_groups ,
.selected_groups {  width: 50%; display: inline-block; padding: 0px 10px; }
.selected_groups{ float: right;}
.all_groups ul,
.selected_groups ul{border: 1px solid rgba(0,0,0,0.2); background: rgba(150,150,150,0.15); padding: 5px;overflow: auto; height: 280px; list-style: none;}

.all_groups ul li,
.selected_groups ul li{ background: #FFFFFF;  margin-bottom: 3px; line-height: 25px; padding: 0px 10px; font-size: 1.1em;  cursor: move;}
.all_groups ul li:hover,
.selected_groups ul li:hover{background: #dffbfe;}
.all_groups ul li.ui-state-highlight,
.selected_groups ul li.ui-state-highlight{ background: #dffbfe; content: ''; display: inline-block; height: 25px; width: 100%;  }


.select2-container{line-height: normal;}
.select2-container--default .select2-selection--multiple .select2-selection__choice{ color: #333333;}
.select2-container--default .select2-selection--single{  border-radius:0px; height: 34px; border: 1px solid #cccccc; }
.select2-container--default .select2-selection--multiple{border-radius:0px;}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height: 34px; margin-top: -6px; padding-left: 0px;}
.select2-container--default .select2-selection--multiple .select2-selection__choice{    background-color: #e4e4e4;  color: #000000;  border: 1px solid #aaa;    border-radius: 4px;}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{ color: #888888;}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{ color: #222222;}

.no-bg{ background: none;}
.more-info .row{ margin-bottom: 5px;}



.lang { display: inline-block; width: auto; float: right; position: relative;padding:5px 10px 5px 10px;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;

}
.lang > a{padding-right: 15px; color: #FFFFFF;}
.lang > a:after{ content:''; border-bottom: 4px solid transparent; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #FFFFFF; position: absolute; right:10px; top: 12px;}
.lang .menu-lang{ right: 0px; left: inherit;}


.img_success,
.img_fail{ width: 120px; margin-bottom: 30px; margin-top: 30px;}
.img-qrcode {
    width: auto;
    max-width: 250px;
}
.copyright{ clear: both; display: inline-block; }
/*laptop */
@media (max-width:1199px) {
	.list_summary ul li{ min-width:inherit;     flex: 0 0 auto;    width: 25%; margin-bottom: 5px; padding:0px 20px 0px 0px;}
    .login{ margin-top: 20px;}
	.welcome_txt{font-size: 20px;padding-top: 0px; }

}



/* tablet  */
@media (max-width:991px) {
    body{ font-size: 13px;}
    .amount{  font-size:20px;}
	.pageName,
    .small-box h3{ font-size: 20px;}
    .main-sidebar, .left-side{width:180px;}
    .content-wrapper, .right-side, .main-footer,
    .main-header>.navbar{ margin-left: 180px;}

    .navbar-custom-menu .navbar-nav>li>a{     padding: .5rem 1rem; line-height: 25px;}
    .navbar-nav>.user-menu .user-image{ margin-top: -3px;}
    .navbar-custom-menu>.navbar-nav>li>.dropdown-menu{ right: 0px;}

    .sidebar-menu >  .treeview,
    .sidebar-menu >  .treeview > .treeview-menu > li > a,
    .sidebar-menu  a{ font-size:12px;}
    .img-id-card{ width: 100%; display: inline-block;}
    .desktop_shortcut{ display: none;}
    .mobile_shortcut{  padding: 5px 0px 0px 0px; display: inline-block; position: relative; top: 0px; right: inherit; margin: 0px; width: 100%; background: #FFFFFF;}
    .mobile_shortcut ul { width: 100%; display: inline-block; padding: 0px; margin: 0px;}
    .mobile_shortcut ul li{ width: 33.3333%; float: left; display: inline-block; list-style: none; text-align: center;margin: 3px auto; height: auto;}
    .mobile_shortcut .icon{ width: 26px; height: 26px; margin: 0px auto; display: block;}
    .mobile_shortcut ul li a{width: 100%; cursor: pointer; font-size: 14px;}
    .mobile_shortcut ul li a:hover,
    .mobile_shortcut ul li a:hover .icon{ opacity: 0.6;}

    .user_info li dd {    line-height: 25px;  min-height: 25px;}
    .user_info li dd.fd{ width: 150px; }

	.welcome_txt{font-size: 16px; line-height: 1.7em; padding: 0px 20px; }
    .welcome_txt .enlarge{ font-size: 1.2em;}
    .tb{ font-size: 12px;}

    /* sidebar-mini-auto*/
    .sidebar-mini .sidebar-menu > li {
        position: relative;
    }
    .sidebar-mini .sidebar-menu > li > a {
        margin-right: 0;
            padding: 10px 5px 10px 5px;
      }
  .sidebar-mini .sidebar-menu > li > a > span {
        border-top-right-radius: 4px;
      }

  .sidebar-mini .sidebar-menu > li:not(.treeview) > a > span {
        border-bottom-right-radius: 4px;
      }
  .sidebar-mini .sidebar-menu > li > .treeview-menu {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom-right-radius: 4px;
  }
  .sidebar-mini .sidebar-menu > li:hover > a > span:not(.pull-right),
  .sidebar-mini .sidebar-menu > li:hover > .treeview-menu,
   .sidebar-mini .sidebar-menu > li.ee > .treeview-menu{
    display: block;
    position: absolute;
    width: 250px;
    left: 50px;
  }
    .sidebar-mini .sidebar-menu > li:hover > a > span,
    .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span {
    top: 0;
    margin-left: 0px;
    padding: 10px 10px;
        line-height: 25px;
    background-color: inherit;
  }
  .sidebar-mini .sidebar-menu > li:hover > .treeview-menu {
    top: 45px;
    margin-left: 0;
  }
    .sidebar-menu .treeview-menu > li > a {
        padding: 10px;
    }
    .sidebar-mini .main-sidebar .user-panel > .info,
    .sidebar-mini .sidebar-form,
    .sidebar-mini .sidebar-menu > li > a > span,
    .sidebar-mini .sidebar-menu > li > .treeview-menu,
    .sidebar-mini .sidebar-menu > li > a > .pull-right,
    .sidebar-mini .sidebar-menu li.header {
        display: none;
        -webkit-transform: translateZ(0);
    }
    .sidebar-mini .sidebar-menu .icon_img {
        margin-right: 0px;
        margin-left: 5px;
    }
    .sidebar-mini .main-sidebar .logo-icon {
        display: block;
        max-width: 100%;
    }
    .sidebar-mini .main-sidebar .logo-large {
        display: none;
    }
    .sidebar-mini .main-header .navbar  {
        margin-left: 50px;
    }
    .sidebar-mini .main-sidebar { width:50px;    }
    .sidebar-mini .content-wrapper,
    .sidebar-mini .right-side,
    .sidebar-mini .main-footer {
        margin-left: 50px;
    }


	.list_summary ul li{  width: 33.3333333333%; }


}


/* mobile */
@media (max-width: 767px) {
    .register_real{ margin: 0px auto 0px auto; }
    .box-header, .box-body, .box-footer{ padding: 10px;}
    .content{ padding: 10px;}
    .content-header{padding: 0px 10px;}
    .content-wrapper, .right-side, .main-footer,
    .sidebar-mini .main-header .navbar { margin: 0px; }
    .navbar-custom-menu .fa{ margin: 0px; }
    .sidebar-open .content-wrapper, .sidebar-open .right-side, .sidebar-open .main-footer {
        -webkit-transform: translate(200px, 0);
        -ms-transform: translate(200px, 0);
        -o-transform: translate(200px, 0);
        transform: translate(200px, 0);
    }

    .content-wrapper, .right-side{padding: 0px;  }
    .main-header{ position: fixed; width: 100%; }
    .sidebar-mini .main-sidebar .logo-icon {
        display: none;
    }
    .sidebar-mini .main-header .navbar  {
        margin-left: 0px;
    }
    .sidebar-mini .main-sidebar, .left-side{width:200px; }
    .sidebar-mini .content-wrapper,
    .sidebar-mini .right-side,
    .sidebar-mini .main-footer {
        margin-left: 0px;
    }
    .sidebar-mini .main-sidebar .user-panel > .info,
    .sidebar-mini .sidebar-form,
    .sidebar-mini .sidebar-menu > li > a > span,
    .sidebar-mini .sidebar-menu > li > .treeview-menu,
    .sidebar-mini .sidebar-menu > li > a > .pull-right,
    .sidebar-mini .sidebar-menu li.header {
        display: inline-block;
    }
    .sidebar-mini .sidebar-menu > li > .treeview-menu {
        display: none;
    }
    .sidebar-menu li.active > .treeview-menu {
        display: block;
        padding-top:0px;
        padding-bottom:0px;
    }

    .sidebar-mini .sidebar-menu > li:hover > a > span:not(.pull-right) {
        position: relative;
        display: inline;
        top:auto;
        left:auto;
        width:auto;
    }
    .sidebar-mini .sidebar-menu > li:not(.active):hover > .treeview-menu {
            display: none;
            top:auto;
            left:auto;
    }
    .sidebar-mini .sidebar-menu > li:hover > a > span,
    .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span,
    .sidebar-mini .sidebar-menu > li:hover > .treeview-menu{
        position: relative;
        top: 0;
        left: 0;
        margin-left: 0px;
        line-height: normal;
        padding: 0px;
        width:auto;
      }
    .sidebar-menu .treeview-menu > li:hover > a,
    .sidebar-menu .treeview-menu > li > a{ padding: 10px;}
    .content-wrapper{padding-top: 60px!important; border-radius:0px;}
    .main-sidebar .logo-large,
    .main-sidebar .logo-icon,
    .sidebar-mini.sidebar-collapse .main-sidebar  .logo-icon{        display: none;    }
    .main-sidebar .logo-horizontal{ display: block; width: 100%; max-width: 160px; max-height: 60px;}


    .label {    border-radius: 2px;}



    table.dataTable thead > tr > th{ padding-right: 10px; line-height: 1;}
    .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{ padding: 5px 2px; line-height: 1.2em;}
    table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after{ top: 5px;}


    .table_container{ overflow: auto;}
    .table_container table{ min-width: 500px;}

    .buy-label,
    .sell-label{ line-height: 1em; padding: 2px 5px 2px 5px; border-radius:2px; height: 20px; line-height: 16px; }

    .register_real{ padding: 0px 0px; }


    .visible-xs {    display: inline-block!important;}
    .tb .dropdown-menu{ font-size: 12px; }


    .group_ttl { display: block; float: none; text-align: center; line-height: 25px;}
    .all_groups ul li,
    .selected_groups ul li{  line-height: 35px; }

    .input-group{ margin-bottom: 5px;}
    .login{ margin-top: 10px;}

    .summary{padding: 10px;}
	.list_summary ul li{ width: 100%; padding: 0px;     display: flex;    align-items: center; }
    .list_summary ul li:last-child{ margin-bottom: 0px;}
    .list_summary ul li .fd{ width: 50%; display: inline-block;}
    .list_summary ul li .item_value{ width: 50%; display: inline-block; text-align: right;}
}


/*mobile small*/
@media (max-width: 500px) {
    body{ font-size: 3.2vw;}
    body:lang(en){ font-size: 3vw;}
    .img-logo{ width: 170px; }
    .login-logo, .register-logo{ margin-bottom: 20px;}
    .label{ padding: 2px 4px;}
	h3{ font-size:4.2vw;}
    .siteName{font-size: 16px; padding-left:0px; text-overflow: ellipsis; max-width: 140px; max-height:40px; overflow: hidden;  display: -webkit-box; -webkit-line-clamp: 1;    -webkit-box-orient: vertical;}
    .pageName{  font-size: 4.6vw;  }
    .main-header .sidebar-toggle{ padding: 0.5rem 0.75rem ;}
    h4{ font-size: 3.8vw;}
    .table,
    .tb ,
    .tb_custom,
    .tb ul.tb_thead{ font-size: 3.2vw; }





    .all_groups ,
    .selected_groups { padding: 0px 5px;}

    .nav>li>a{ padding: 10px;}
    
    

}

@media (max-width: 360px) {
    
    .siteName{ max-width: 110px; }
    .siteName{ font-size: 12px; }
}



/*Form style
--------------------------------------------------------------
*/

textarea:focus,
input.form-control:focus,
select:focus{
    outline: 0px;
   border-color:#4a65a8;
}
.form-check{ margin-bottom: 0.5rem;}
.form-check-inline{ padding-left: 0px;}
.form-check-inline > input{width: 21px; height: 21px; margin-right: 3px; margin-top: -1px;}
.dropzone{ border: 1px solid rgba(0, 0, 0, 0.15); padding: 0px; display: flex;  align-items: center;  justify-content: center; min-height: 120px; margin-bottom: 20px; }
.dropzone .dz-message .dz-button{ opacity: 0.7;}
.dropzone .dz-message{ font-size: 1.1em; margin:0px 0px;}
.dropzone .dz-message .fa{ font-size: 2em;}
.ps,
.form-horizontal .form-group .ps{ font-size: 0.9em; color: #555555; line-height: 1.5em; margin-top:5px;  margin-bottom:10px;}

.num-input{ width: auto; max-width: 100px; display: inline-block; padding: 3px 0px; height: 25px; text-align: center;}
.star{ color: #FF0000; margin-right: 2px;}
input.form-control{border-radius: 0.25rem;}
.form-control[readonly]{ background: #FFFFFF;}

.form-control.input-readonly{ border: 0px; padding-left: 0px;}

.form-horizontal .has-feedback .form-control-feedback {    left: 10px;    right: inherit; }
.has-feedback .form-control {    padding-left: 30px; padding-right: 5px;}

.form-inline { margin: 0px -10px;}
.form-inline .select_item{ padding:0px 10px; float: left; display: inline-block;}
.form-inline.w-250{ width: 250px;}

.form-floating .input-group label {
      position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem .75rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out,transform .1s ease-in-out;
    z-index: 100;
}
.form-floating .input-group input {

    height: calc(3.5rem + 2px);
    padding: 1rem .75rem;
}
.form-floating  .input-group  input::-webkit-input-placeholder,
.form-floating  .input-group  .form-control::placeholder{
      color: transparent;
    }

.form-floating> .input-group > .form-select {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
  }

.form-floating > .input-group .form-control:focus,
.form-floating > .input-group .form-control:not(:placeholder-shown),
.form-floating > .input-group .form-control:-webkit-autofill {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
}


.form-floating> .input-group .form-control:not(select) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-floating > .input-group .form-control:focus ~ label,
.form-floating > .input-group .form-control:not(:placeholder-shown) ~ label,
.form-floating > .input-group .form-select ~ label {
    opacity: .65;
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}
.form-floating > .input-group .btn{ height: 100%;}



.form-check-inline .form-inline{ display: inline-block; margin-top: -10px; margin-left: 5px;}


.upload_file{ display: inline-block;}
.upload_file input[type="file"]{ position: absolute; top: 0px; left: 0px; visibility: hidden; width: 10px; height: 10px;}

.upload-img{  border: 1px solid #ced4da; height: 200px; margin-bottom: 10px; position: relative; overflow: hidden; position: relative; text-align: center;}
.upload-img img{ position: absolute; top:50%; left: 50%; z-index: 100; max-width: 100%; max-height: 100%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
   top:0%\9;
    left:0%\9;
    position: relative\9;
}


.upload-img .tips{ position: absolute; top: 50%; margin-top: -20px; line-height: 40px; color: #777777; width: 100%; text-align: center; font-weight: bold; left: 0px;}

.form-group.has-error .form-control,
.has-error .form-control{
    border-color: #FF0000;
    box-shadow: none;
}


.form-horizontal .radio, .form-horizontal .checkbox,
.radio{  margin-right: 20px;   display: inline-block; padding-top:5px;}
.form-horizontal .radio input[type=text] { max-width:150px;  margin-top: -5px; }

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 25px;
  top:3px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 21px;
  width: 21px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(34px);
  -ms-transform: translateX(34px);
  transform: translateX(34px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


.form-horizontal .control-label{ line-height: 24px; padding-top: 5px; text-align: left; }
.form-horizontal. label{ text-align: left; }

.radio label .iradio_square-blue,
.checkbox label .icheckbox_square-blue,
.radio label .iradio_square-custom,
.checkbox label .icheckbox_square-custom{ margin-left: -28px; margin-right: 5px; position: relative; top: -2px;}
.radio label,
.checkbox label{ text-align:left; line-height:25px;    padding-left: 28px;}
.form-control[disabled]{ background:#e9ecef;}

.has-captcha{ position: relative;}
.has-captcha .form-control{ width: 120px; display: inline-block;}
.has-captcha .form-control-captcha{ display: inline-block;}
.has-captcha .form-control-captcha img{ width: 80px; height: 30px;}
.control-label{ float: left; display: inline-block;  padding-top: 5px;     line-height: 24px; padding-bottom: 5px;}
.form-horizontal .form-group p{ line-height: 24px; padding-top: 5px;}
.img-captcha{    width: 100px;    display: inline-block;    height: 50px; }

.filter-form{  display:inline-block;  width:100%;}
.filter-form .bg_search{ height:32px; color:#888888; display:inline-block; line-height:32px;  float:left;  position:relative; margin-right:20px; font-weight:bold; font-size:16px; }
.filter-form .btn{ min-width:inherit;   }
.filter-form .input-item{padding:0px 20px 10px 0px; display: inline-block; float: left; }
.filter-form .control-label{ float:left;}
.filter-form .form-control,
.filter-form .form-select{ width:auto;  float:left; margin-bottom:0px;}

.filter-form select.form-control{ max-width: inherit;}
.filter-form .input-item > .select2-container{  display: inline-block; min-width: 180px; width: auto;  float: left;  }
.filter-form .select2-container > .select2-container{ width: 100% !important;}
.filter-form .input-item > .select2-container select.js-tags{ max-height: 32px;}
.filter-form .input-item > .select2-container select.js-tags option{ visibility: hidden; }
.filter-form .input-group{ width:320px; max-height: 34px;}
.filter-form .input-group input,
.filter-form .input-group select{ max-width: inherit; width: 1%; height: 34px;}

.filter-form .input-group-text{ padding: 6px 5px; font-size:inherit; text-align: center;}
.filter-form .input-group-select{ display: flex; width: auto;}
.filter-form .input-group-select .form-control,
.filter-form .input-group-select .form-select,
.filter-form .input-group-select > .select2-container{  min-width: 100px;  margin-right: 5px;  float: none; }

.filter-form .filter-form-btn{ display: inline-block; width: 100%;}
.filter-form .filter-form-btn >div{  display: inline-block; float: left; margin-right: 10px; margin-bottom: 15px;}
.filter-form .btn{ min-width:inherit; }
.btn_filter{ display: none;}


.input-group .input-tel-area{ max-width: 80px;}
.input-group .input-tel-num{max-width: 700px; }
.input-group .input-group-text{ min-width: 50px; background: none; color: inherit; line-height: 24px;}
.input-group .input-group-text.no-border{ min-width:inherit; width: auto;}
.input-group-sm{line-height: 28px;}
.input-group-sm>.form-control, .input-group-sm>.input-group-text, .input-group-sm>.input-group-btn>.btn {

    height: 28px;
    font-size: 14px;
    padding: 3px 10px;
    line-height: 1em;
}
.input-group .btn{ min-width: 80px;     border-top-left-radius: 0;    border-bottom-left-radius: 0; height: 100%; }


.input-group-tel{ display: grid; column-gap: 5px;   grid-template-columns: 80px 20px 1fr;  }

.input-group-tel  .input-group-addon { width: auto; background: none; padding: 0px; padding-top: 5px; text-align: center;  }
.input-group-tel .input-tel-area{}
.input-group-tel .input-tel-num{ }

.label_follower{  padding-left: 30px;}
.label_follower label{ position:absolute; top: 50%; margin-top: -30px; left: 0px;}
.label_follower .img-border{ width: 150px; height: 150px; text-align: center; background: #efefef; border: 1px solid #dddddd; position: relative;}
.label_follower img{ position: absolute; top:50%; left: 50%; z-index: 100; max-width: 100%; max-height: 100%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
   top:0%\9;
    left:0%\9;
    position: relative\9;
}



@media (max-width:991px){
 .filter-form { margin: 0px -10px 10px -10px; text-align: right; width: auto; display: block;}
    .filter-form .input-item{ width: 100%;  padding: 0px 10px 5px 10px; text-align: left; float: none; }
    .filter-form  .input-item > .select2-container,
    .filter-form .form-control,
    .filter-form .form-select,
    .filter-form .input-group,
    .filter-form .input-group-select{ width: 70%; max-width:inherit;}
    .filter-form .control-label{ width: 30%; min-width: 0px; margin-bottom: 0px;}
    .filter-form .input-group-select .select2-container > .select2-container--default{ width: 100% !important;}



    .filter-form .form-control.full-xs,
    .filter-form .control-label.full-xs{ width: 100%; }

    .filter-form .input-group .input-group-text{ width: 10%; float: left; display: inline-block; padding: 6px 0px 0px 0px;}

    .filter-form .input-group-select > .select2-container,
    .filter-form .input-group .form-control { width: 45%; float: left; display: inline-block; min-width: inherit;}
    .num-input{ width: 100%;}


    .filter-form .input-group-select .form-control{ width: 47%; margin-right: 0px; }
    .filter-form .input-group-select .form-control:last-child{ float: right;}
    .filter-form .filter-form-btn{ padding: 0px 10px;}



    .filter-form .filter-form-btn{ display: block; width: auto; margin: 0px -10px;}
    .filter-form .filter-form-btn > div{ width: 50%;  padding:10px 10px 10px 10px; float: left; margin: 0px; }
    .filter-form .filter-form-btn > div.btn1Div{ width: 100%;  }
    .filter-form .btn{ width: 100%; }

    .filter-form .long-label .form-control{ width: 60%; max-width:inherit;}
    .filter-form .long-label .control-label{ width: 40%; min-width: 0px; margin-bottom: 0px;}

    .filter-form .form-control.full-xs,
    .filter-form .control-label.full-xs{ width: 100%; }



    .btn_filter{ display: block; width: 100%; margin-bottom: 20px;}
    .btn_filter .show-txt,
    .btn_filter.clicked .close-txt{ display: block;}
    .btn_filter.clicked .show-txt,
    .btn_filter .close-txt{ display: none;}
    .filter-form{ display: none;
            margin: 0px -10px 0px -10px;
            -webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
    }
    .filter-form.active{ display: block; }

    .upload-img{ height: 150px;}

}

@media (max-width: 767px) {
    .form-group{ margin-bottom: 0px; }
    .form-group .form-control,
    .upload_file,
    .form-horizontal .radio,
    .form-horizontal .checkbox,
    .radio{  margin-bottom:10px; }
    .input-group .form-control{ margin-bottom: 0px;}
    .form-horizontal label{ text-align: left; }
    .form-horizontal .control-label,
    form .control-label{clear: left; margin-bottom: 0px;}
    .filter-form { margin: 0px 0px 10px 0px;}
    .filter-form .input-item{display: inline-block; float: none; width: 100%; padding: 0px;  margin-bottom: 3px;}
    .filter-form .btn{ min-width:inherit; width:100%; margin-bottom: 5px;}
    .filter-form .input-group-select .select2-container > .select2-container--default{ width: 100% !important;}
    .filter-form .filter-form-btn {margin: 0px -5px 0px -5px; width: auto; padding:0px; display: block;}
    .filter-form .filter-form-btn > div{ padding: 0px 5px 10px 5px;}



    .filter-form  .input-item > .select2-container,
    .filter-form .form-control,
    .filter-form .form-select,
    .filter-form .input-group,
    .filter-form .input-group-select{ width: 75%; max-width:inherit;}
    .filter-form .control-label{ width: 25%;}

    .form-group .col-xs-9{ }


    .col-pull-xs-1,.col-pull-xs-2,.col-pull-xs-3,.col-pull-xs-4,.col-pull-xs-5,.col-pull-xs-6,.col-pull-xs-7,
    .col-pull-xs-8,.col-pull-xs-9,.col-pull-xs-10,.col-pull-xs-11,.col-pull-xs-12{ padding-top:5px;}

    .form-inline{ margin: 0px -5px;}
    .form-inline .select_item{ width: 33.3333%; padding: 0px 5px; }
    .form-group .radio:last-child{ margin-right: 0px;}

    .num-input{ margin-top: -2px;}

    .upload-img{ height: 130px;}
}
@media (max-width: 500px) {

    .form-control,
    .form-select{ font-size: 3.2vw;     line-height: 20px;}

/*
    .filter-form .input-group,
    .filter-form .input-group-select{ width: 100%;}*/
}





/*Modal style
--------------------------------------------------------------
*/

.box {
    position: relative;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #dddddd;
    margin-bottom: 20px;
    width: 100%;
    box-shadow:none;
}

.modal-header{ border: 0px; border-radius:0px; }
.modal-header.bg-gold,
.modal-header.bg-custom-header{
    color: #FFFFFF;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008db0), to(#008e7c));
background: -webkit-linear-gradient(left, #008db0, #008e7c);
background: -moz-linear-gradient(left, #008db0, #008e7c);
background: -o-linear-gradient(left, #008db0, #008e7c);
background: -ms-linear-gradient(left, #008db0, #008e7c);
background: linear-gradient(left, #008db0, #008e7c);
background-color: #008db0;

}
.modal-header.bg-danger { color: #FFFFFF;}
.modal-header.bg-custom-header  .close,
.modal-header.bg-danger  .close{  background: none; border: none; font-size: 24px; line-height: 24px;  opacity: 0.6;    padding: .5rem .5rem;,    margin: -.5rem -.5rem -.5rem auto; }
.modal-dialog{ margin: 0px auto 0px auto;  }
.modal-content {
    -webkit-box-shadow:none;
    box-shadow: none;
    overflow: hidden;
}
.modal-header .close{ opacity: 1; color: #FFFFFF;}
.modal-header .close:hover{ opacity: 0.7;}

.modal-dialog.auto-width-dialog{ width: auto;}
.modal-dialog.auto-width-dialog{ width: auto;}
.modal-dialog.small-dialog{ width: 500px; }
.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
}
.modal.in .modal-dialog{
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.modal-footer{ display: block; }
.page-control{ display: inline-block; width: 100%; margin-bottom: 10px;}
.modal-footer .load_entries,
.box-footer .load_entries,
.page-control .load_entries{
    float: left;
    display: inline-block;
}
.modal-footer .pagination, .box-footer .pagination, .page-control .pagination {
    float: right;
}


@media (max-width: 1199px) {
	.modal-dialog{ width: 900px;}
}
@media (max-width:991px) {
   .modal-dialog{ width: 650px;}

    .modal-dialog.small-dialog {    width: 300px;}
}
@media (max-width: 767px) {
	.modal-header,
    .modal-body{ padding: 0.5rem 1rem 0.5rem 1rem;}
    .modal-footer{ padding: 0.5rem 0.75rem;}
    .modal-header .close{ margin-top: 0px;}
	.modal.in  .modal-dialog.small-dialog{ width: 280px;  left: 50%;  margin-left: -140px;}
    .modal.fade .modal-dialog ,
    .modal.in .modal-dialog,
    .modal-dialog{ width: 100%;     }

}

@media (max-width: 500px) {
	.modal-footer .load_entries, .box-footer .load_entries{ line-height: 30px; height: 30px;}
    .modal-footer .pagination, .box-footer .pagination {
        clear: both;
        margin: 20px auto 0px auto;
    }
}




/*
Button style
--------------------------------------------------------------
*/
.btn{ border-radius: 5px;}
.btn-nobg{ cursor: pointer;}
.btn-lg{}
.btn-link{ line-height: 1;}
.btn-border {
	 border: 1px solid #999999;
	 color: #666666;
	 background: #fff;
}
 .btn-border:hover, .btn-border:active {
	 border: 1px solid #da7240;
     color: #da7240;
}

.option{
    padding: 5px 15px;
    border-radius: 5px;
    border: 1px solid #cccccc;

}



.option-button-group{ display: flex;   margin: 0px -5px;  flex-direction: row;  flex-wrap: wrap; }
.option-button-group .option-button{ flex: 1 0 50%; padding:5px 5px; height: 46px;    }
.option-button-group.more-option .option-button{ flex: 0 1 auto; padding:5px 5px;  }
.option-button-group .option-button > span{    padding: 0.5rem 1rem; line-height: 24px;  border:1px solid #ced4da;   border-radius: 3px;  width: 100%; display: inline-block; cursor: pointer; opacity: 0.5; font-weight: bold;}
.option-button-group .option-button:hover > span{ border-color: #2792cd;  color: #333333;   opacity: 1;}

.option-button-group .option-button span .payIcon{  width: 20px; margin-right: 3px; margin-top: -5px;}
.option-button-group .option-button input[type="radio"] { display: none;}
.option-button-group .option-button input:checked + span {
   border-color: #2792cd; color: #2792cd; opacity: 1;
}

.button-ontop{ text-align: right;}
.button-ontop .btn{ margin-bottom: 10px;}
.button-ontop-left{ text-align: left; display: inline-block; margin-left: 20px;}
.btn .fa,
.btn .ion { width: 20px; display: inline-block;margin-right: 2px;}

.btn-sm,
.btn-txt{ margin:5px 3px; min-width: inherit; border-radius:10px; padding: 3px 12px;  }
.btn_reset_pwd{ margin-top: 5px; display: inline-block;}
.bg-grey{ background: #888888;color: #FFFFFF;}
.bg-greyLight{color: #0073b7;}

.btn3-group{ text-align: center;}
.btn3-group .btn{ width: 28%; margin: 0px 2px; min-width: inherit;}


button.btn-icon{ width: 30px; height: 30px; padding: 0px;  display: inline-block; border: 0px; background: none; color: #0073b7;}


.btn.disabled, .btn[disabled], fieldset[disabled] .btn{ opacity: 0.4;}
.btn-transparent{ background: none; border: 0px; color: #FFFFFF;}
.btn-transparent:hover,
.btn-transparent:active{ color: #FFFFFF;}

button.close{ opacity: 0.4;  margin-left: 10px;}

.btn-con{ color: #008d4c; cursor: pointer; width: 20px; height: 20px; font-size: 20px; display: inline-block; top: 2px; position: relative; z-index: 5;}
.btn-con:hover{ color: #20cd7d;}
.btn-con .fa-minus-square{ display: none;}


.bottom-form-btn{  display: inline-block;  width: 100%;}
.bottom-form-btn >div{  display: inline-block; float: left;width: 50%; }
.bottom-form-btn >div.btn1Div{ width: 100%; float: none; }
.bottom-form-btn >div:last-child{ text-align: right;}


@media( max-width:1400px){
    .btn-sm,
    .btn-txt{padding: 3px 8px;}
}

@media (max-width:1199px) {

    .btn-sm{padding: 0px 0px;border-radius: 50%;width: 30px;height: 30px; text-align: center;}
    .btn-sm .fa,
    .btn-sm .ion{ width: auto; margin:0px; font-size: 15px; line-height: 30px; }

}




@media (max-width: 767px) {
    .btn{    padding: .5rem 1rem;}

    .btn-txt{ margin-bottom: 0x; padding: 5px 5px; text-align: center;}
    .btn-sm { width: 25px; height:25px; padding: 0px;}
    .btn-sm .fa,
    .btn-sm .ion{ width: auto; display: inline-block; font-size: 14px; margin-right: 0px; ; line-height: 25px; }
    .button-ontop{ text-align: left; padding: 10px 10px 0px 10px;}

    .button-ontop-left{ display: block; margin:0px 0px 0px 0px;  padding: 10px 0px 0px 0px; clear: both;}

    .btn-block-sm{ width: 100%;}
	}

@media (max-width: 500px) {
	.btn-sm{ min-width: inherit;}
    .btn-block-xs{ width: 100%; margin-bottom: 10px;}

    .bottom-form-btn{  display: block;  width: auto; margin: 0px -10px 0px -10px;}
    .bottom-form-btn >div{ padding: 0px 10px; }
    .bottom-form-btn .btn{  width: 100%; margin-bottom: 10px; }

    .button-ontop-left{   padding: 10px 5px 0px 5px;}
}

.input-go{
    position: relative;
    padding-right: 50px;
    width: 120px;
    float: right;
    margin-left: 20px;
}
.input-go .form-control{
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0px 5px;
}
.btn-go{
    position:absolute;
    top: 0px;
    right: 0px;
    width: 50px;

    height: 30px;
    padding: 5px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    min-width: inherit !important;
}



/*
Datetimepicker
--------------------------------------------------------------
*/
.bootstrap-datetimepicker-widget {-webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.6);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.6);
}
.bootstrap-datetimepicker-widget a.btn,
.bootstrap-datetimepicker-widget a.btn:hover,
.datepicker .next,
.datepicker .prev{ color: #0073b7;}
.datepicker table tr td.active:active, .datepicker table tr td.active:hover:active, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.active, .datepicker table tr td.active:hover.active, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled:hover.active, .open .dropdown-toggle.datepicker table tr td.active, .open .dropdown-toggle.datepicker table tr td.active:hover, .open .dropdown-toggle.datepicker table tr td.active.disabled, .open .dropdown-toggle.datepicker table tr td.active.disabled:hover,
.bootstrap-datetimepicker-widget table td span.active{background: #0073b7;}
.bootstrap-datetimepicker-widget table td.today{ background: #dddddd;}
.bootstrap-datetimepicker-widget table td.today:before {
    content: '';
    display: inline-block;
    border: solid transparent;
    border-width: 0 0 7px 7px;
    border-bottom-color: #0073b7;
    border-top-color: rgba(0,0,0,0.2);
    position: absolute;
    bottom: 4px;
    right: 4px;
}
.bootstrap-datetimepicker-widget table td.day:not(.active):hover,
.bootstrap-datetimepicker-widget table td.hour:not(.active):hover,
.bootstrap-datetimepicker-widget table td.minute:not(.active):hover {
  background: #e2f4ff !important;
}

.bootstrap-datetimepicker-widget .table-condensed .btn .fa{ width: auto!important; }
.bootstrap-datetimepicker-widget .btn,
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second{  margin: 0px!important;  float: none; }

.bootstrap-datetimepicker-widget.timepicker-sbs{ max-width: 320px;    padding:5px 15px;}
.datepicker.col-md-6,
.timepicker.col-md-6{ width: 100%;}
.datepicker{ margin-top: -1px; padding-top: 5px; border-bottom:1px solid #eeeeee; padding-bottom: 5px; }
.bootstrap-datetimepicker-widget table td{ line-height: 25px; height: 25px; padding: 3px !important;}
.bootstrap-datetimepicker-widget table td span{line-height: 25px; height: 25px;}
/*special*/
.bootstrap-datetimepicker-widget .timepicker-picker table td.separator{  width: 15px;}
.bootstrap-datetimepicker-widget .timepicker-picker table td:first-child{ text-align: center;}
.bootstrap-datetimepicker-widget .timepicker-picker table td:last-child{ text-align: center;}
.bootstrap-datetimepicker-widget .timepicker-minute{ text-align: center; }
.bootstrap-datetimepicker-widget .timepicker-hour{ text-align: center;}
.bootstrap-datetimepicker-widget a[data-action] {    padding: 3px 0;}
@media (max-width:991px){

    .bootstrap-datetimepicker-widget,
    .bootstrap-datetimepicker-widget.dropdown-menu {width: 280px !important;}
}
@media (max-width:767px){
    .bootstrap-datetimepicker-widget { position: absolute !important; left:inherit !important; right: 0px !important;  -webkit-transform: translate(-25%, 0px);
        -moz-transform: translate(-25%, 0px);
        -o-transform: translate(-25%, 0px);
        -ms-transform: translate(-25%, 0px);
        transform: translate(-25%, 0px);        

    }
    .bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before {
        display:none;
    }
    .bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after {
        display:none;
    }
    .bootstrap-datetimepicker-widget table{font-size: 13px !important;  }
}






/*
 * Custom Skin
 * ------------
 */


.nav-tabs-custom{ box-shadow: none; margin-top: 5px; }
.box-body .nav-tabs-custom{ margin: 0px -10px;}
.nav-tabs-custom > .nav-tabs > li { margin-right:0px; }
.nav-tabs-custom > .nav-tabs > li > a{font-weight: bold; font-size: 1.125em;  cursor: pointer;}
.nav-tabs-custom > .nav-tabs .nav-link{ border-top:0px; border-left:0px; border-right:0px; background: none;   padding: .75rem 1rem;
    border-bottom: 2px solid transparent;   }
.nav-tabs-custom > .nav-tabs .nav-link.active,
.nav-tabs-custom > .nav-tabs .nav-link.active:hover{ border-bottom:2px solid #4a65a8; color:#4a65a8;}


.nav-tabs-custom > .nav-tabs > li{border:none;}

.main-footer{ border: 0px; background: none; font-size: 12px; font-family: Arial; padding: 10px 15px;}
.index-footer{ font-size: 12px;  font-family: Arial; padding: 10px 20px; position: absolute; bottom:0px; left: 0px; width: 100%; color: #999999;}

.main-footer .version-txt,
.index-footer .version-txt{ float: left;}





@media (max-width:762px) {
    .nav-tabs-custom > .nav-tabs > li > a{ font-size: 1.1em;}
    .nav-tabs-custom > .nav-tabs .nav-item{ flex: auto; text-align: center;}
    .main-footer{ padding: 10px 15px; background: #eeeeee; color: #999999;}

    .nav-tabs-custom > .nav-tabs .nav-link{ padding: .325rem .325rem;}

}

@media (max-width:500px) {
    .main-footer{ padding: 10px; font-size: 3vw; }

}

/*
Table style
----------------------------------------
*/
.tb{ display: table; width: 100%; }

.tb  ul{ width:auto; display:table-row; margin: 0px; padding: 0px; border-bottom: 1px solid #eeeeee;}
table.tb_custom { width: 100%; margin-bottom: 20px;}
table.tb_custom  th{ word-break: keep-all;}
table.tb_custom  th,
table.tb_custom  td{ padding: 8px 5px;line-height: 20px; display:table-cell; float: none;  position: relative;  }


.tb_custom tr td .time {
    display: none;
}

table.treetable tr span.indenter a{    padding: 5px 0px;  width: 20px;   height: 30px; line-height:20px; cursor: pointer;}
table.treetable tr span.indenter a .fa{     position: relative;    left: -5px; font-size: 18px; color: #008d4c;}
table.treetable tr.collapsed span.indenter a .fa-minus-square,
table.treetable tr.expanded span.indenter a .fa-plus-square{ display: none;}
table.treetable .indenter .tree{   
    position: relative;
    top: -5px;
    width: 10px;
    height: 10px;
    content: '';
    border-bottom: 2px solid #999999;
    border-left: 2px solid #999999;
    display: inline-block;
    z-index: 4;
    margin-left: 5px;}

table.treetable tr.branch.leaf span.indenter:before{
    position: relative;
    top: -5px;
    width: 10px;
    height: 10px;
    content: '';
    border-bottom: 2px solid #999999;
    border-left: 2px solid #999999;
    display: inline-block;
    z-index: 4;
    margin-left: 5px;
}


table.tb_custom td.text-right{ text-align: right !important;}
table.tb_custom td.text-left{ text-align: left !important;}
table.tb_custom td.text-center{ text-align: center !important;}



table.tb_custom tr.bg_grey{background: #fafafa; }
table.tb_custom tbody tr:hover{ background: #e6f4fd;}
table.tb_custom > thead tr{    color: #999999;  font-weight: bold; text-align: center; }
table.tb_custom  th{  border-bottom:1px solid #aaaaaa;  }
table.tb_custom .action{ text-align: center; position: relative;}
table.tb_custom .ex_time{ display: block; font-size: 0.7em;}
table.tb_custom .morebtn{ text-align: center;  width: 30px;}



table.tb_custom  .sub_lv{ display: none; }
table.tb_custom .sub_lv.lv2,
table.tb_custom  .sub_lv.lv3,
table.tb_custom  .sub_lv.active{  display: table-row; }
table.tb_custom  .sub_lv td:nth-child(1):before{ position:relative; top: 0px; left: 0px; width: 10px; height: 10px;  content: ''; border-bottom: 2px solid #BBBBBB;  display:inline-block; z-index: 4; float: left; margin-right: 5px;  }
table.tb_custom  .sub_lv.with_sub_lv td:nth-child(1):before{ border-bottom: 2px solid #555555; border-left:2px solid  #555555;}

table.tb_custom  .sub_lv td:nth-child(1){  padding-left: 10px; padding-right:0px;}
table.tb_custom  .sub_lv.lv3 td:nth-child(1){  padding-left: 30px;}
table.tb_custom  .sub_lv.lv4 td:nth-child(1){  padding-left: 50px;}
table.tb_custom  .sub_lv.lv5 td:nth-child(1){  padding-left: 70px;}
table.tb_custom  .sub_lv.lv6 td:nth-child(1){  padding-left: 90px;}
table.tb_custom  .sub_lv.lv7 td:nth-child(1){  padding-left: 110px;}
table.tb_custom  .sub_lv.lv8 td:nth-child(1){  padding-left: 130px;}
table.tb_custom  .sub_lv.lv9 td:nth-child(1){  padding-left: 150px;}
table.tb_custom  .sub_lv.lv10 td:nth-child(1),
table.tb_custom  .sub_lv.lv11 td:nth-child(1),
table.tb_custom  .sub_lv.lv12 td:nth-child(1),
table.tb_custom  .sub_lv.lv13 td:nth-child(1),
table.tb_custom  .sub_lv.lv14 td:nth-child(1),
table.tb_custom  .sub_lv.lv15 td:nth-child(1),
table.tb_custom  .sub_lv.lv16 td:nth-child(1){  padding-left: 170px;}



.table_container{ overflow: auto; }


.tb-ps-position ul:nth-child(odd):not(.tb_thead) {
    background: none;
}



table.tb_custom.tb_hedging tr:odd-child td:nth-child(1){ text-align: center !important;}


table.tb_custom.tb_hedging tbody tr{ background: none;     }
table.tb_custom.tb_hedging tbody tr:nth-child(2n-2){ border-bottom: 1px solid #999999;  }
table.tb_custom.tb_hedging tbody tr.bg_grey{background: #efefef; border-bottom: 1px solid #999999; }
table.tb_custom.tb_hedging tbody tr.bg_grey td[rowspan] {border-bottom: 1px solid #999999; border-top: 1px solid #999999; }

table.tb_custom.tb_hedging tbody tr td:nth-child(1){ text-align: center;}


.btn-group .dropdown-menu{margin-top: -5px;}
td .dropdown-menu {
    left: inherit;
    right: 0px;
    border: 1px solid #CCCCCC;
}

    .tb_custom .show-lg{display: none;}
    .tb_custom .show-xl{display: none;}
    .tb_custom .show-md{display: none;}
    .tb_custom .show-sm{display: none;}
    .tb_custom .td_details,
    .tb_custom .td_details.active{display: none; height: 0; transition: 0.3s; word-break: break-all;}

.btn-tb-details i{ transition: 0.3s;}
.btn-tb-details.active i{ transform: rotate(180deg); }


@media (max-width:1399px) {
    .tb_custom .hide-xl{ display: none;}
    .tb_custom .show-xl{display: table-cell;}
    .tb_custom .td_details.active{display: table-row;     border-bottom: 2px double rgba(0,0,0,0.2);}
}

@media (max-width:1199px) {
    .tb_custom .hide-lg{ display: none;}
    .tb_custom .show-lg{display: table-cell;}
    .tb_custom .td_details.active{display: table-row;     border-bottom: 2px double rgba(0,0,0,0.2);}
}

@media (max-width:991px) {
    .table_container table.tb_custom,
    .table_container div.tb_custom{ min-width: 600px;}
    
    
    
    table.tb_custom  th,
    table.tb_custom  td,
    .tb  ul li{ padding: 5px 4px;}
    .tb_custom .hide-md{ display: none;}
    .tb_custom .show-md{display: table-cell;}

}

/* mobile */
@media (max-width: 767px) {

    .tb{ display: block; width: auto; }

    .tb  ul{ width: 100%; display: inline-block;  position: relative; padding: 7px 10px 7px 10px; margin-bottom: -5px;}

    .tb ul.tb_thead{ padding: 0px 10px; }
    .tb ul.tb_thead li{font-weight: bold; text-align: left; border-bottom: 0px;}
    .tb ul.tb_thead li.time{ display: none;}

    .tb ul li.time{ position: absolute; bottom: 0px; left: 0px; padding: 0px 1px 0px 10px; width: 50%; font-size: 0.6em; display: block; color: #555555; line-height: 15px; min-height: 20px; text-align: left !important;}
    .tb ul li.time2{ position: absolute; bottom: 0px; right: 0px; padding: 0px 10px 0px 1px; width: 50%; font-size: 0.6em; display: block; color: #555555; line-height: 15px; min-height: 20px; text-align: left !important;}


    .tb_custom .hide-sm{ display: none;}
    .tb_custom tr td .time{ display: block; font-size: 0.8em; margin-bottom: 0px;}
    .tb_custom .show-sm{display: table-cell;}



}

/*mobile small*/
@media (max-width: 500px) {
    table.tb_custom{ margin-bottom: 10px;}

}





.alipay-iframe{
	width: 100%;
	min-height: 300px;
	border:1px solid #DDDDDD;
}
.step-alipay{ display: inline-block;}
.payment-instruction{ display: inline-block; width: 100%; margin-bottom: 30px; padding: 10px; border: 1px solid #DDDDDD; border-radius: 5px;}
.payment-instruction > div{ float: left; width: 21%;  display: inline-block; padding-left: 10px; padding-right: 40px; position: relative; text-align: center;}
.payment-instruction > div:last-child{width: 16%; padding-right:0px;}
.payment-instruction > div span{ display: inline-block; line-height: 20px; text-align: left; }
.payment-instruction > div .fa{ position: absolute; right:20px; top: 10px;  font-size: 20px;}
.payment-instruction > div img{  width: 50px; margin-right: 5px;     vertical-align: top;}
.vertify_code{  display: flex; width: 200px;}
.vertify_code > div{ flex: auto; padding: 0px 5px; text-align: center;}
.bank{  background: rgba(255,250,120,0.1); padding: 10px; margin-bottom: 20px;  word-break: break-word;  }





@media (max-width:1199px) {
	.payment-instruction > div{ padding-left: 0px; padding-right: 20px; }
	.payment-instruction > div img{ width:30px; display:block; margin:0px auto;}
	.payment-instruction > div span{ width:100%; text-align:center;}
	.payment-instruction > div .fa{ right:5px;}

}




@media (max-width:767px) {
	.payment-instruction > div,
	.payment-instruction > div:last-child{ width:100%; float:none;  margin-bottom:10px; text-align:left;  }
	.payment-instruction > div img{ display:inline-block; margin:0px 10px 0px 0px; width:50px;  vertical-align: middle;}
	.payment-instruction > div span{ width:auto;  text-align:left;  }
	.payment-instruction > div span > br{ display:none;}
	.bank{ padding: 10px 10px;}
}








.crm-datatable-thead tr th{
}

.crm-datatable-thead li{
  /*  text-align: center !important;*/
}

.number-align{
    text-align: right !important;
}

.fixed-align{
    text-align: center !important;
}

.shortwords-align{
    text-align: left !important;
}

.input-tel-area{
    padding-right: 0px !important;
}
.crm-datatable-select-page{  float: right; display: inline-block;     padding: 0px 5px; margin-left:10px;    line-height: 1.5; height: 30px;}
.display-row{ margin-bottom: 10px; display: -webkit-inline-box;}



.referral_qr{
	display:inline-block;
    width: 210px;

    height: 210px;
	padding:5px;
	background:#eeeeee;
	border:1px solid #999999;
}
.referral_qr img{
    width: 100%;
}







/*-------------Banner----------*/
.banner{border-radius: 10px; overflow: hidden; margin-bottom: 20px;}
.owl-item{ border-radius: 10px; overflow: hidden; }
.unslider{ position: relative; }
.unslider-arrow.prev,
.unslider-arrow.next{ position: absolute;  width: 30px; height: 30px;
background: rgba(255,255,255,.4) !important; display: inline-block; top:50%; margin-top: -15px; line-height: 30px; text-align: center;}
.unslider-nav {
		position: absolute;
		bottom: 30px;
		z-index: 99;
		background: rgba(255,255,255,.4);
		border-radius: 15px;
		left: 50%;
		transform: translate(-50%,0);
		height: 20px;
		padding-left: 9px;
		padding-right: 9px;
	}

.unslider-nav ol {
  list-style: none;
  text-align: center;
}
.unslider-nav ol li {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 4px;
  background: transparent;
  border-radius: 5px;
  overflow: hidden;
  text-indent: -999em;
  border: 2px solid #fff;
  cursor: pointer;
}
.unslider-nav ol li.unslider-active {
  background: #fff;
  cursor: default;
}
.unslider-arrow.next{ right: 80px !important; }
.unslider-arrow.prev{ left: 80px !important;}



.unslider-nav ol li {
		position: relative;
		width: 10px !important;
		height: 10px !important;
		border: none !important;
		background: rgba(255,255,255,.4) !important;
	}

.unslider-nav ol li.unslider-active{
		margin-top:1px;
		width: 11px!important;
		height: 11px!important;
		background: url(../images/ku.png) center center no-repeat!important;
		-webkit-animation: rotateDot 4500ms cubic-bezier(0.6, 0, 0.6, 1) 1;
    	-moz-animation: rotateDot 4500ms cubic-bezier(0.6, 0, 0.6, 1) 1;
    	-o-animation: rotateDot 4500ms cubic-bezier(0.6, 0, 0.6, 1) 1;
    	animation: rotateDot 4500ms cubic-bezier(0.6, 0, 0.6, 1) 1;
	}


@keyframes rotateDot {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

		@-webkit-keyframes rotateDot {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
		@-moz-@keyframes rotateDot {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }



.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    color: #0073b7;
    font-size: 16px;
    margin: 0px;
    padding: 0px;
     width: 36px;
    height: 36px;
    line-height: 36px;
    background: rgba(255,255,255,.6) !important;
    display: inline-block;
    cursor: pointer;
    border-radius: 5px;
  top: 50%;
  margin-top:-18px;}

    .owl-theme .owl-nav [class*='owl-']:hover {
      color: #2497d1;
      text-decoration: none; }


.owl-nav div .fa{text-align: center;}
.owl-nav .owl-prev{
    position: absolute;
  left: 40px;
  padding-right:3px;
}

.owl-nav .owl-next{
    position: absolute;
  right: 40px;
  padding-left:3px;
}
.owl-theme .owl-dots{ position: absolute; bottom: 30px;     left: 50%;    transform: translate(-50%,0); padding:0px 7px; z-index: 50; width: auto; height: 20px; background: rgba(255,255,255,.4) !important;     border-radius: 15px;}
.owl-theme .owl-nav{ margin: 0px; /*	position:absolute;*/	top: 0px; width: 100%; height: 100%; }
.owl-card{ padding-bottom: 10px; }
.owl-card .owl-dots{ position: relative;      padding:0px 7px; z-index: 50; height: 25px;  text-align: center; }
.owl-card .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;
}
.owl-card .owl-dots .owl-dot span{
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: #D6D6D6;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity 200ms ease;
    border-radius: 30px;
}
.owl-card .owl-dots .owl-dot.active span{background: #2A528E;}
@media (max-width:991px) {
    .banner{ margin: 0px auto;}

	.owl-carousel.owl-loaded{ display:inline-block;}

    .owl-carousel .owl-nav button.owl-prev,
    .owl-carousel .owl-nav button.owl-next {width: 30px; height: 30px;  line-height: 30px;   font-size: 16px;   margin-top:-15px;}

.unslider-arrow.next{ right: 20px !important; }
.unslider-arrow.prev{ left: 20px !important;}

.owl-nav .owl-prev{   left: 20px;}
.owl-nav .owl-next{  right: 20px;}
.owl-theme .owl-dots{ bottom:10px;}
}

@media (max-width:767px) {

    .unslider-nav{ bottom:10px;}
}

/*------------end of Banner----------*/


/*-------------News----------*/
.news{  background: #FFFFFF; position:absolute; width: 100%; bottom: 0px; left: 0px;}
.news > .news-item{ padding-left: 120px; line-height: 39px; border-bottom: 1px solid #cccccc ; height: 39px;overflow: hidden;}

.news > div > label{ font-size: 20px; width: 110px; left: 0px; position:absolute; padding:0px 10px; color: #FFFFFF;
    background-image: linear-gradient(to bottom right, #cdaa6f, #b5873b);
}

body:lang(en) .news > .news-item{ padding-left: 220px; }

body:lang(en) .news > div > label{  width: 200px; }
.news > div > a{ cursor: pointer;}





.input-inline{ display: inline-block; }
.input-inline.has-feedback .form-control-feedback{ left: 0px;}

.new_list { padding: 0px;}
.new_list li{ list-style: none; border-bottom: 1px solid #CCCCCC; padding: 10px 0px;}
.new_list li a{ cursor: pointer;}
.new_list li .time{ color: #555555; font-size: 0.8em;}
.new_list li .news_ttl{ font-size: 1.3em; font-weight: bold;}
.new_list li .descript{ height: 25px; line-height: 25px; overflow: hidden; display: inline-block;}

@media (max-width:991px) {

.news{  position:relative; }
    .news > .news-item{ padding: 0px; height: auto;  }
    .news > .news-item .owl-carousel{ padding: 0px 10px;line-height: 20px;}
    .news > div > label{ position: relative; width: 100%;}
}
/*------------end of News----------*/

.img-qr-container{ background: #dddddd; padding: 15px; display: inline-block; min-width: 230px; min-height: 230px; margin: 0px auto;}
.img-qr-container img{ width: 200px;}


.form-floating .form-floating-addon,
.input-group .input-inside-btn{ position: absolute; top: 25px; right: 12px;  -webkit-transform: translate(0%, -50%);
-moz-transform: translate(0%, -50%);
-o-transform: translate(0%, -50%);
-ms-transform: translate(0%, -50%);
transform: translate(0%, -50%);
    z-index: 100;
}
.form-floating .form-floating-addon .btn{ border-radius: 3px;     padding: 0.25rem 0.6rem;}

.form-floating .form-control.is-invalid + .invalid-tooltip + .form-floating-addon,
.form-floating .form-control.is-valid + .form-floating-addon, 
.form-floating .form-control.is-invalid + .form-floating-addon, 
.form-floating .was-validated .form-control:invalid + .form-floating-addon{
    right: 35px;
}

.dropzone .dz-preview .dz-image {
      border-radius: 5px;}
.dz-error-message{ max-height: 300px;}

.quick_link .btn-quick{ padding:5px 10px; display: inline-block; text-align: center;background: none; border: 0px; width: 100%; line-height: 25px; font-size: 16px; font-weight: bold; }
.quick_link .btn-quick .fa{ font-size: 1.4em; display: inline-block; margin: 0px 5px;}
.quick_link .btn-quick span{ position:relative; top:-1px; }




.toggle-text{ font-size: 0.9em;}
.btn-toggle {
  margin: 0 4rem;
  padding: 0;
  position: relative;
  border: none;
  height: 1.5rem;
  width: 3rem;
  border-radius: 1.5rem;
  color: #6b7381;
  background: #bdc1c8;
}
.btn-toggle:focus,
.btn-toggle.focus,
.btn-toggle:focus.active,
.btn-toggle.focus.active {
  outline: none;
}
.btn-toggle:before,
.btn-toggle:after {
  line-height: 1.5rem;
  width: 4rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: absolute;
  bottom: 0;
  transition: opacity 0.25s;
}
.btn-toggle:before {
  content: "Off";
  left: -4rem;
}
.btn-toggle:after {
  content: "On";
  right: -4rem;
  opacity: 0.5;
}
.btn-toggle > .handle {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 1.125rem;
  background: #fff;
  transition: left 0.25s;
}
.btn-toggle.active {
  transition: background-color 0.25s;
}
.btn-toggle.active > .handle {
  left: 1.6875rem;
  transition: left 0.25s;
}
.btn-toggle.active:before {
  opacity: 0.5;
}
.btn-toggle.active:after {
  opacity: 1;
}
.btn-toggle.btn-sm:before,
.btn-toggle.btn-sm:after {
  line-height: -0.5rem;
  color: #fff;
  letter-spacing: 0.75px;
  left: 0.4125rem;
  width: 2.325rem;
}
.btn-toggle.btn-sm:before {
  text-align: right;
}
.btn-toggle.btn-sm:after {
  text-align: left;
  opacity: 0;
}
.btn-toggle.btn-sm.active:before {
  opacity: 0;
}
.btn-toggle.btn-sm.active:after {
  opacity: 1;
}
.btn-toggle.btn-xs:before,
.btn-toggle.btn-xs:after {
  display: none;
}
.btn-toggle:before,
.btn-toggle:after {
  color: #6b7381;
}
.btn-toggle.active {
  background-color: #29b5a8;
}
.btn-toggle.btn-lg {
  margin: 0 5rem;
  padding: 0;
  position: relative;
  border: none;
  height: 2.5rem;
  width: 5rem;
  border-radius: 2.5rem;
}
.btn-toggle.btn-lg:focus,
.btn-toggle.btn-lg.focus,
.btn-toggle.btn-lg:focus.active,
.btn-toggle.btn-lg.focus.active {
  outline: none;
}
.btn-toggle.btn-lg:before,
.btn-toggle.btn-lg:after {
  line-height: 2.5rem;
  width: 5rem;
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: absolute;
  bottom: 0;
  transition: opacity 0.25s;
}
.btn-toggle.btn-lg:before {
  content: "Off";
  left: -5rem;
}
.btn-toggle.btn-lg:after {
  content: "On";
  right: -5rem;
  opacity: 0.5;
}
.btn-toggle.btn-lg > .handle {
  position: absolute;
  top: 0.3125rem;
  left: 0.3125rem;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 1.875rem;
  background: #fff;
  transition: left 0.25s;
}
.btn-toggle.btn-lg.active {
  transition: background-color 0.25s;
}
.btn-toggle.btn-lg.active > .handle {
  left: 2.8125rem;
  transition: left 0.25s;
}
.btn-toggle.btn-lg.active:before {
  opacity: 0.5;
}
.btn-toggle.btn-lg.active:after {
  opacity: 1;
}
.btn-toggle.btn-lg.btn-sm:before,
.btn-toggle.btn-lg.btn-sm:after {
  line-height: 0.5rem;
  color: #fff;
  letter-spacing: 0.75px;
  left: 0.6875rem;
  width: 3.875rem;
}
.btn-toggle.btn-lg.btn-sm:before {
  text-align: right;
}
.btn-toggle.btn-lg.btn-sm:after {
  text-align: left;
  opacity: 0;
}
.btn-toggle.btn-lg.btn-sm.active:before {
  opacity: 0;
}
.btn-toggle.btn-lg.btn-sm.active:after {
  opacity: 1;
}
.btn-toggle.btn-lg.btn-xs:before,
.btn-toggle.btn-lg.btn-xs:after {
  display: none;
}
.btn-toggle.btn-sm {
  margin: 0 0.5rem;
  padding: 0;
  position: relative;
  border: none;
  height: 1.5rem;
  width: 3rem;
  border-radius: 1.5rem;
}
.btn-toggle.btn-sm:focus,
.btn-toggle.btn-sm.focus,
.btn-toggle.btn-sm:focus.active,
.btn-toggle.btn-sm.focus.active {
  outline: none;
}
.btn-toggle.btn-sm:before,
.btn-toggle.btn-sm:after {
  line-height: 1.5rem;
  width: 0.5rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: absolute;
  bottom: 0;
  transition: opacity 0.25s;
}
.btn-toggle.btn-sm:before {
  content: "Off";
  left: -0.5rem;
}
.btn-toggle.btn-sm:after {
  content: "On";
  right: -0.5rem;
  opacity: 0.5;
}
.btn-toggle.btn-sm > .handle {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 1.125rem;
  background: #fff;
  transition: left 0.25s;
}
.btn-toggle.btn-sm.active {
  transition: background-color 0.25s;
}
.btn-toggle.btn-sm.active > .handle {
  left: 1.6875rem;
  transition: left 0.25s;
}
.btn-toggle.btn-sm.active:before {
  opacity: 0.5;
}
.btn-toggle.btn-sm.active:after {
  opacity: 1;
}
.btn-toggle.btn-sm.btn-sm:before,
.btn-toggle.btn-sm.btn-sm:after {
  line-height: -0.5rem;
  color: #fff;
  letter-spacing: 0.75px;
  left: 0.4125rem;
  width: 2.325rem;
}
.btn-toggle.btn-sm.btn-sm:before {
  text-align: right;
}
.btn-toggle.btn-sm.btn-sm:after {
  text-align: left;
  opacity: 0;
}
.btn-toggle.btn-sm.btn-sm.active:before {
  opacity: 0;
}
.btn-toggle.btn-sm.btn-sm.active:after {
  opacity: 1;
}
.btn-toggle.btn-sm.btn-xs:before,
.btn-toggle.btn-sm.btn-xs:after {
  display: none;
}
.btn-toggle.btn-xs {
  margin: 0 0;
  padding: 0;
  position: relative;
  border: none;
  height: 1rem;
  width: 2rem;
  border-radius: 1rem;
}
.btn-toggle.btn-xs:focus,
.btn-toggle.btn-xs.focus,
.btn-toggle.btn-xs:focus.active,
.btn-toggle.btn-xs.focus.active {
  outline: none;
}
.btn-toggle.btn-xs:before,
.btn-toggle.btn-xs:after {
  line-height: 1rem;
  width: 0;
  text-align: center;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: absolute;
  bottom: 0;
  transition: opacity 0.25s;
}
.btn-toggle.btn-xs:before {
  content: "Off";
  left: 0;
}
.btn-toggle.btn-xs:after {
  content: "On";
  right: 0;
  opacity: 0.5;
}
.btn-toggle.btn-xs > .handle {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0.75rem;
  background: #fff;
  transition: left 0.25s;
}
.btn-toggle.btn-xs.active {
  transition: background-color 0.25s;
}
.btn-toggle.btn-xs.active > .handle {
  left: 1.125rem;
  transition: left 0.25s;
}
.btn-toggle.btn-xs.active:before {
  opacity: 0.5;
}
.btn-toggle.btn-xs.active:after {
  opacity: 1;
}
.btn-toggle.btn-xs.btn-sm:before,
.btn-toggle.btn-xs.btn-sm:after {
  line-height: -1rem;
  color: #fff;
  letter-spacing: 0.75px;
  left: 0.275rem;
  width: 1.55rem;
}
.btn-toggle.btn-xs.btn-sm:before {
  text-align: right;
}
.btn-toggle.btn-xs.btn-sm:after {
  text-align: left;
  opacity: 0;
}
.btn-toggle.btn-xs.btn-sm.active:before {
  opacity: 0;
}
.btn-toggle.btn-xs.btn-sm.active:after {
  opacity: 1;
}
.btn-toggle.btn-xs.btn-xs:before,
.btn-toggle.btn-xs.btn-xs:after {
  display: none;
}
.btn-toggle.btn-secondary {
  color: #6b7381;
  background: #bdc1c8;
}
.btn-toggle.btn-secondary:before,
.btn-toggle.btn-secondary:after {
  color: #6b7381;
}
.btn-toggle.btn-secondary.active {
  background-color: #ff8300;
}

.btn-skin-dark{display:block;}
.btn-skin-custom{display:none;}
.skin-dark .btn-skin-dark{display:none;}
.skin-dark .btn-skin-custom{display:block;}


.progress{ border-radius: 5px; overflow: visible; }
.progress .progress-bar{position: relative;overflow: visible;  border-radius: 5px;}
.progress .progress-value {
    min-width: 40px;
    width: auto;
    padding: 0px 10px;
    line-height: 25px;
    border-radius: 5px;
    background: #333333;
    color: #FFFFFF;
    font-size: 14px;
    position: absolute;
    top: -30px;
    right: 0;
    z-index: 2;
    text-align: center;
    transform: translateX(50%);
}
.progress .progress-value:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333333 transparent transparent transparent;
}