@charset "utf-8";
* { margin:0;padding:0; }
html,body,div,span,label,ul,ol,li,form,select,input,textarea,strong,a,p { font:normal 13.5px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",Helvetica, Arial, "Lucida Grande", sans-serif;}
body{ background-color:#f1f2f5; }
a{text-decoration: none;}
div,span,label,ul,ol,li,strong,a,p { color:#232323; }
strong { font-weight:bold;; padding:0;}
strong.large { font-size: 20px;}
strong.xlarge { font-size: 30.5px;}
ol,ul,li { list-style:none;text-align:left; }
input:not(.btn),select,textarea{ background-color:#f1f2f7 ;border:1px solid #ebebeb;padding: .25rem .5rem;min-height: 2.5rem;box-sizing: border-box;border-radius:.5rem;color:#232323}
select{ padding: .25rem .25rem; }
::placeholder {  color:#959595; }
textarea:focus, input:focus{    outline: none;}
textarea{ min-height: 100px;resize: none; }
form>div{ border-radius:.5rem; }
form>div>div{}
label,p{line-height: 23px}
span{line-height: 18px}

.container{ height:100vh;}

/*color*/
.bgc-main{ background-color:#f1f2f5; }
.bgc-second{ background-color:white; }
.bgc-third{ background-color:#ededed; }
.bgc-list li:hover{ background-color:#ededed; }
.bgc-list{ background-color:#f6f6f6;}
.bgc-list>li:hover{ background-color:#ededed;cursor:pointer; }
.bgc-none{ background-color: transparent !important; box-shadow: none !important;}
.btncol-main{ background-color:#027df0; }
.btncol-second{ background-color:white; }
.btncol-third{ background-color:#ededed }
.btncol-fourth{ background-color: #f7941d ; }
.btncol-fourth.btn:hover{ background-color: #f7941d; }
.btncol-angry{ background-color: red;}
.btncol-angry.btn:hover { background-color: red; }
.btncol-go{ background-color: #8dc63f;}
.btncol-go:hover{ background-color: #8dc63f !important;}

.tcol-r{ color:red;}
.tcol-w{ color:white;}
.tcol-w-all *{ color:white;}
.tcol-g{ color:#03fc84;}
.tcol-gr{ color:#959595 !important;}
.tcol-bk{ color:black !important;}
/*color*/

/*default classes*/
.di-fl{ display:flex; }
.fl1{ flex:1; }
.fl2{ flex:2;}
.fl3{ flex:3; }
.fl-all *{ flex:1; }
.fl-c{ display:flex;justify-content: center;}
.fl-r{ display:flex;justify-content: flex-end;align-items: center}
.fl-sb{ display:flex;justify-content: space-between;}
.fl-at{ display:flex; align-items: flex-start !important ;}
.fl-dc{ display:flex;flex-direction: column;}
.fl-c>div{ margin:5px; }
.ai-c{ align-items: center; }
.ai-s{ align-items: stretch; }
.f-dir-c{ flex-direction: column;}
.fd-rr{flex-direction: row-reverse;}
.fl-w{ flex-wrap: wrap; }

.di-b{display:block;}
.di-i{display:inline;}
.di-ib{display:inline-block;}
.di-n{display:none !important; }
.vat{ vertical-align: top }
.vam{ vertical-align: middle }
.ovv{overflow: visible !important; }
.ovh{overflow: hidden;}
.ovy-a{overflow-y: auto;}
.poa{ position: absolute; }
.pof{ position: fixed; }
.defLh{ line-height: 23px }
.opac0 { opacity: 0 !important; -webkit-user-select: none;  -moz-user-select: none; user-select: none;  cursor:default;}

.mwi-40{ max-width: 40px; }
.mwi-50{ max-width: 50px; }
.mwi-60{ max-width: 60px; }
.mwi-70{ max-width: 70px; }
.mwi-80{ max-width: 80px; }
.mwi-100{ max-width: 100px; }
.mwi-110{ max-width: 110px; }
.mwi-120{ max-width: 120px !important; }
.mwi-130{ max-width: 130px; }
.mwi-140{ max-width: 140px; }
.mwi-150{ max-width: 150px; }
.mwi-160{ max-width: 160px; }
.mwi-170{ max-width: 170px; }
.mwi-180{ max-width: 180px; }
.mwi-190{ max-width: 190px; }
.mwi-200{ max-width: 200px; }
.mwi-250{ max-width: 250px; }
.mwi-270{ max-width: 270px; }
.mwi-300{ max-width: 300px; }
.mwi-350{ max-width: 350px !important; }
.mwi-400{ max-width: 400px; }
.mwi-450{ max-width: 450px; }
.mwi-500{ max-width: 500px; }
.mwi-550{ max-width: 550px; }
.mwi-570{ max-width: 570px; }
.mwi-600{ max-width: 600px; }
.mwi-650{ max-width: 650px; }
.mwi-700{ max-width: 700px; }
.mwi-750{ max-width: 750px; }
.mwi-800{ max-width: 800px !important; }
.mwi-850{ max-width: 850px; }
.mwi-900{ max-width: 900px; }
.mwi-980{ max-width: 980px; }
.mwi-1000{ max-width: 1000px; }
.mwi-1100{ max-width: 1100px; }
.mwi-1150{ max-width: 1150px; }
.miw-250{ min-width: 250px; }
.miw-300{ min-width: 300px; }
.mhi-35{ max-height: 35px !important;}
.mhi-40{ max-height: 40px !important;}
.mhi-100{ max-height: 100px; }
.mhi-300{ max-height: 300px; }
.mhe-80p{ max-height:  80vh; }
.mihe-90p{ min-height: 90%; }
.mih-0{ min-height: 0; }
.mih-150{ min-height: 150px; }
.hei-80{ height:  80px; }
.hei-120{ height:  120px; }
.hei-180{ height:  180px; }
.hei-350{ height:  350px; }
.mar-cont>*{margin:6px;}
.mar-cont p{margin-bottom:0px;}
.mar0{ margin:0 !important;}
.mar5{ margin:5px;}
.mar10{ margin:10px;}
.mar-l0{margin-left:0px !important;}
.mar-l3{margin-left:3px;}
.mar-l5{margin-left:5px;}
.mar-l10{margin-left:10px;}
.mar-l15{margin-left:15px;}
.mar-l20{margin-left:20px;}
.mar-l30{margin-left:30px;}
.mar-r5{margin-right:5px  !important; }
.mar-r6{margin-right:6px;}
.mar-r8{margin-right:8px;}
.mar-r10{margin-right:10px  !important; }
.mar-r15{margin-right:15px;}
.mar-r20{margin-right:20px }
.mar-r30{margin-right:30px;}
.mar-t0{margin-top:0px !important;}
.mar-tn1{margin-top:-1px;}
.mar-tn3{margin-top:-3px;}
.mar-tn5{margin-top:-5px;}
.mar-t3{margin-top:3px;}
.mar-t5{margin-top:5px !important;}
.mar-t8{margin-top:8px !important;}
.mar-t10{margin-top:10px;}
.mar-t15{margin-top:15px;}
.mar-t20{margin-top:20px;}
.mar-t25{margin-top:25px;}
.mar-t30{margin-top:30px;}
.mar-t35{margin-top:35px;}
.mar-b0{margin-bottom:0px !important; }
.mar-b5{margin-bottom:5px !important; }
.mar-b10{margin-bottom:10px !important; }
.mar-b15{margin-bottom:15px !important;}
.mar-b20{margin-bottom:20px !important;}
.mar-b100{margin-bottom:100px !important;}
.mar-tb5{margin:5px 0;}
.mar-tb10{margin-bottom:10px;margin-top:10px;}
.mar-tb20{margin:20px 0;}
.pad0{ padding:0 !important; }
.pad3{ padding:3px  !important; }
.pad-5{ padding:5px  !important; }
.pad-10{ padding:10px; }
.pad-13{ padding:13px; }
.pad-15{ padding:15px; }
.pad-15-2{ padding:18px 15px; }
.pad-20{ padding:20px; }
.pad-25{ padding:25px; }
.pad-t0{ padding-top:0px !important}
.pad-t3{ padding-top:3px !important; }
.pad-t5{ padding-top:5px !important; }
.pad-t8{ padding:8px 0 !important; }
.pad-t10{ padding-top:10px !important; }
.pad-b0{ padding-bottom:0px !important; }
.pad-b5{ padding-bottom:5px !important; }
.pad-b8{ padding-bottom:8px !important; }
.pad-b10{ padding-bottom:10px; }
.pad-b15{ padding-bottom:15px !important; }
.pad-l3{ padding-left:3px !important; }
.pad-l8{ padding-left:8px; }
.pad-l15{ padding-left:15px; }
.pad-r0{  padding-right:0 !important;}
.pad-lr5{ padding-left:5px !important;  padding-right:5px !important;}
.pad-lr10{ padding-left:10px !important;  padding-right:10px !important;}
.pad-lr15{ padding-left:15px !important;  padding-right:15px !important;}
.pad-tb3{ padding-top:3px !important;padding-bottom:3px !important; }
.pad-tb5{ padding-top:5px !important;padding-bottom:5px !important; }
.pad-tb8{ padding-top:8px !important;padding-bottom:8px !important; }
.pad-tb20{ padding-top:20px !important;}
.pad-tb15{ padding-top:15px !important;  padding-bottom:15px !important;}
.pad-tb20{ padding-top:20px !important;  padding-bottom:20px !important;}
.pad-tb10{ padding:10px 0; }
.pad-l15{ padding-left:15px !important; }
.pad-20{ padding:20px; }

.bor-50 { border-radius:50% !important; }
.bor-1 { border-radius:.5rem !important; }
.bor-2 { border-radius:15px !important;  }
.divider{  border-bottom:1px solid #ebebeb;padding:4px 0;margin-bottom:10px;}
.dividerL{  border-left:1px solid #ebebeb;}
.bord0{  border:0 !important;}
.bor-top{  border-top:1px solid #ebebeb;}
.bor-bot{  border-bottom:1px solid #ebebeb;}
.bor-right{  border-right:1px solid #ebebeb;}
.bordBlack{ border:1px solid black; }
.bordDef{ border:1px solid #ebebeb; }
.bordDef2{ border:2px solid #ebebeb; }

.requi{  margin-left: 10px;}
.link{ cursor:pointer;; color:#027df0; }

.btn{ border-radius:.5rem;border:0;font-weight:bold;;color:white;min-height: 2.5rem;cursor:pointer;;display:flex;justify-content:center;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
.btn:hover{ background-color:#3d64c7;}
.icon{ width:30px;height:30px; border-radius:50%;}
.addIcon{ background: lightblue url("../icons/img_icons-add.png") no-repeat;background-size: 33px;width:33px;height:33px; border-radius:50%;cursor:pointer;; }
.remIcon{ background: lightblue url("../icons/img_icons-delete.png") no-repeat;background-size: 33px;width:33px;height:33px; border-radius:50%;cursor:pointer;; }
.radio{ display:flex; cursor:pointer;;}
.radio *{  cursor:pointer;;}
.radio input{ margin: -6px 15px 0 0; vertical-align: top;}
.txtBasic{ border-radius:.5rem; padding:5px 6px;background-color:#f1f2f5;}
.ta-c{ text-align:center; }
.ta-r{ text-align:right; }
.fo-bo{ font-weight:bold;; }
.cup{ cursor:pointer;; }
.hideMe{ opacity: 0 !important;width:0%; overflow:hidden;margin:0 !important;padding:0 !important;position:absolute;top:-99999px;}

.ellipsis {  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
input.xlarge{ font-size: 40px; text-align:right;padding-top:20px;padding-bottom:20px;}
/*default classes*/

.strips{ padding:10px 15px; background-color:#027df0; color: white;  border-radius:20px; }

.strips:hover{ background-color:#3d64c7;}
.strips.unfoc{ background-color:#ededed;color: black}
.strips.unfoc:not(.nohov):hover{ background-color:#e4e4e4;}
.strips.unfoc2{ background:#e4e4e4;color: black}
.strips.unfoc2:hover{ background-color:#dbdbdb;}
.strips.unfoc3{ background:white;color: black}
.strips.unfoc3:hover{ background-color:#dbdbdb;}
.strips-small{ padding:3px 10px 3px 10px; background-color:#027df0; color: white;  border-radius:20px; }
.strips-small.fsmall{ font-size:12px; }
.strips-small.angry{ background-color: red;}
.strips-large{ padding:15px; background-color:#027df0; color: white; border-radius:.5rem; display:flex;min-width:150px;cursor:pointer;; }
.strips-large:hover{ background-color:#3d64c7;}
.strips-large.unfoc:hover{background:#3d64c7;color: black }
.strips span:not(#IONotif){ padding:3px 8px; margin-left:10px; background:white;border-radius:20px;font-weight:bold;;color:black;}
.strips:hover span{ color:#3d64c7;}
.strips.unfoc span{ color: black}

.stampHolder{ margin:20px -10px -10px -10px; padding:15px; border-top:1px solid #ebebeb;}

.nav-holder{width:100%; height: 60px; }
.nav{ width:100%; height: 60px; background-color:white;display:flex;justify-content: center;;position:fixed;top:0;z-index:4}
.nav>div, .nav>span {height: 57px;display:flex;align-items: center; padding: 0 30px;font-weight:bold;;  cursor:pointer;;}
.nav>div:hover{ border-bottom:3px solid #eb7d00; cursor:pointer;;}
.nav .foc{ border-bottom:3px solid #eb7d00; }
.nav ul{ display:none;position: absolute; z-index: 4;top:65px;margin-left:-75px;}
.nav .me{ position:absolute;left:0px;}
.nav .me p{ margin-left:15px;font-weight:bold;;}
.nav .out{ position:absolute;right:0px;}

.leftmenupadding{ width:220px;}
.leftmenu{ position: fixed; }

.list-holder{ border-radius:.5rem; margin-top: 5px; padding: 15px;max-width:180px; }
.list-holder a, .list-holder strong{ padding:.8rem 1rem ; width:165px;max-width:165px;display:block;}
.list-holder li:not(:first-child){ margin-top:10px;}
.list-holder strong{ padding: 4px; margin-left: 10px; margin-bottom:10px;}
.list-holder li:not(:first-child):not(.sel):not(.not-hov):not(.divider):hover { background-color:#f6f7fa;border-radius:.5rem;}
.list-holder li:not(:first-child):hover * { cursor:pointer;;}
.list-holder li.sel { background-color:#027df0;border-radius:.5rem;font-weight:bold;;}
.list-holder li.sel *{ color:white;cursor:pointer;;font-weight:bold;;}
.list-holder .di-fl{ display:flex;align-items: center;padding:4px 10px ;}

.login{ height:95%;display:flex;justify-content:center;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
.login>form{ width:550px; background-color:white; padding:20px 60px;border-radius:.5rem;}
.login div{ padding:3px 0;display:flex;}
.login input, .login div>span{ flex:1;margin:5px 120px;}
.login .head>*{ font-family: 'Montserrat'; }
.login .head>p:first-child{ font-size: 30px;  margin-bottom:20px; font-weight:bold;;}
.login .head>p a{ font-size: 22px; color: #b7b7b7;font-weight: bold;}
.login .head strong { font-size: 22px; color:#232323}
.loginbtn{ position: absolute; margin:10px;}
.loginbtn li{margin-right:10px;display: inline-block}
.loginbtn li a{ width: 150px;}

.list {flex:1;}
.list>ul{ display:flex;margin-top:10px;}
.list>ul>li{ flex:1;  max-width:160px; background-color:#f6f7fa; padding: 10px;color:#959595; text-align:center; font-weight:bold;;cursor:pointer;;border-top-left-radius: 1vh;border-top-right-radius: 1vh;}
.list>ul>li:first-child{ margin: 0 15px; }
.list .foc{ color:#232323; background: white}
.list>ul>section>li:not(.foc):hover{ color:#232323;background-color:#f6f7fa; }
.list>div{ border-radius:.5rem;  display:flex; padding:0 ;overflow: hidden; }
.list div ul{ display:flex; flex:1; flex-direction: column; }
.list div a{ cursor:pointer;; }
.list div:not(:first-child) a>li:not(.btn):hover { background-color:#f6f7fa;cursor:pointer;}
.list div li{ padding:10px 15px;border-bottom:1px solid #f1f2f5; display:flex; align-items: center}
.list div li img{ margin-right: 10px;}
.list-l{ max-width: 950px;flex:1; }


.info {margin-left: 10px;}
.info li:not(:last-child) { display:flex;align-items: center;;margin-bottom:15px;}
.info li >div {margin:0px 3px 0 5px;flex:1;display:flex;}
.info li >div:nth-child(2){flex:2;}
.info div span:not(.select2-container *,.select2-container),.info div img{ margin-right:5px;}
.info .fl-at p{ margin-top:3px;}

.break {
  flex-basis: 100%;
  height: 0;
}

.plan-list{ display:flex;}
.plan-list-cont{ display:flex;margin:0 15px 0 15px;overflow-x:scroll;max-width:745px;}
.plan-list-cont::-webkit-scrollbar {  display: none;}
.plan-list-cont{  -ms-overflow-style: none;  /* IE and Edge */ scrollbar-width: none;  /* Firefox */}
.plan-list-cont div { width:175px; display:flex;align-items: center;;flex-direction:column;}
.plan-list-cont div a{ width:140px;max-width:140px;}
.plan-list-cont #yourplan{ cursor:default;}

.plan-list-cont div:not(:last-child){ margin-right:15px;}
.plan-list-cont img{ width:175px;margin-bottom:13px;}

.taxopt>div{ border: 2px solid #027df0;  flex: 1; border-radius:.5rem; }
.taxopt .ttl{align-items: center; display:flex; background-color:#027df0; padding: 3px 10px; color: white;justify-content: space-between;}
.taxopt .ttl label {color: white;}
.taxopt .ttl>div{ margin-top: 3px;}
.taxopt .cont{ padding: 15px; }
.taxopt .cont>span{  display:flex; align-items: center; }
.taxopt .cont>span>input{  max-width: 100px; margin-left: 10px;}
.taxopt .cont div{ display:flex;margin-top: 20px;}
.taxopt .cont div *{ flex: 1; max-width: 200px;}
.taxopt .cont div p:first-child{ max-width: 80px;}
.taxopt.disabled>div{border: 2px solid gray !important;}
.taxopt.disabled .ttl{ background-color:#ededed;}

.orderInfo li{ display:flex;align-items: center;max-width:420px;}
.orderInfo.po li{ max-width:480px;}
.orderInfo li:not(:first-child) {margin-top: 10px; }
.orderInfo li *:not(.pricetype){ flex:1;}
.orderInfo li .order-icon{ position:absolute;margin-left:430px;cursor:pointer;;}
.orderInfo li p{ max-width: 150px; }

.receiptList { padding-top: 5px;margin-bottom:15px;}
.receiptList input{ display: none;}
.receiptList label{ overflow: hidden; padding: 7px 7px 7px 10px; border-radius: 20px; border:2px solid #cbcbcb;}
.receiptList a{ cursor: pointer; margin-left:5px;vertical-align: middle}
.receiptList label:hover{ background-color:#f6f6f6;}
.receiptList label.foc{ background-color:#f6f6f6;}

#imgitem{ width: 115px; margin:15px 13px 0 0; }
#imgitem>p:hover{  color:#232323; }
.notifBar{  background-color:white; margin-top:20px;padding: 10px 30px;border-radius:20px;-webkit-box-shadow:0px 1.35px 2px .04px rgba(0,0,0,0.15);-moz-box-shadow:0 0 10px #000;-o-box-shadow:0px 1.35px 2px .04px rgba(0,0,0,0.15);-ms-box-shadow:0px 1.35px 2px .04px rgba(0,0,0,0.15);box-shadow:0px 1.35px 2px .04px rgba(0,0,0,0.15); }
.notifBar2{  background-color:white; border-radius:7px;display:flex;flex-direction: column; }
.notifBar2 span:not(:first-child){ border-top: 1px solid #00aeef;}
.notifBar2 span{padding: 15px; }
.notifBar2.blue{ background-color:#027df0; }
.notifBar2.blue span{ color:white;} 

.foot-version{ position:absolute;bottom:10px;width: 100%; text-align:center;}

.modnav{ width: 100%;display:flex;}
.modnav>li{ flex:1;text-align:center; margin-right: 20px;cursor:pointer;;padding:5px 6px 10px 6px; max-width: 120px;}
.modnav>li:hover{border-bottom:3px solid #eb7d00;font-weight:bold;;}
.modnav .foc{border-bottom:3px solid #eb7d00; font-weight:bold;;}
#listHolder div{ margin:15px 10px 0 10px;display: block}
#listHolder div span:first-child{ width: 20px;}
#listHolder div span{ display: inline-block;width:95%;vertical-align: top;line-height: 25px;}

.order-pop-list{ background-color:#f6f6f6;border-radius:.5rem; } 
.order-pop-list:not(:first-child){ margin-top:15px }
.order-pop-list li{ padding:10px; display:flex;align-items: center;;}
.order-pop-list li:not(.ttl):hover{ cursor:pointer;;background-color:#ededed;border-radius:.5rem; }
.order-pop-list li.ttl{ padding:10px; display:flex;align-items: center;;}
.order-pop-list li>*{ flex:1}

.order-setting{ margin-top:450px;background-color:white;border-radius:.5rem;width:330px; position:absolute;z-index:99;display:none;}
.order-setting.lowmarg1{ margin-top:315px;}
.order-setting.lowmarg2{ margin-top:370px;}
.order-setting>div{ padding:15px 15px 0 15px;}
.order-setting>div.bor-bot{ padding-bottom:15px;}
.order-setting>div p{ color:#959595}
.order-setting>div>div{ margin-right:10px;}

.orderList #qty{ margin-left:10px !important;}

.help-tips-home {padding:15px;}
.help-tips-home .slick-prev,.help-tips-home .slick-next{ opacity:0;}
.help-tips-home .cont{ background-color:#f6f6f6;border-radius:.5rem;padding:10px; border: 2px solid #ebebeb;height:155px;width:206px;}
.help-tips-home .cont:not(:last-child){margin-right:15px;}
.help-tips-home .cont:hover{ background-color: #f1f2f5;}
.help-tips-home .cont p{ height:70px;margin:5px 0;}

.side-help{ position:fixed; bottom:20px; right:20px;z-index:5; }
.side-help .slick-prev,.side-help .slick-next{ opacity:0;}
.side-help>div{ width:280px;height:445px;background-color:white;border-radius:.5rem; position:absolute;right:0; bottom:80px;display:none}
.side-help>div>div{padding:15px}
.side-help span{height:60px;display:block}

.pop-slick{max-width:350px;}
.pop-slick>img{margin-bottom:-25px; border-top-left-radius: .5rem;border-top-right-radius: .5rem;}
.pop-slick div{padding:0 15px 15px 15px;}
.pop-slick div a{margin-top:10px;}

.inv-order-info{  position: absolute; padding:15px;background-color:white;border-radius:5px; width:280px; margin-left:-188px; margin-top:30px;height:200px; }
.inv-order-info>div{  display:flex;align-items:center;margin-bottom:10px}


.orderOptHolder{margin-top:50px;padding:10px;background-color:white;border-radius:.5rem;width:150px; position:absolute;display:none; z-index:2;}
.orderOptHolder li{ padding:10px 15px;cursor:pointer;;text-align:center;border-radius:.5rem;font-weight:bold;;margin:5px 0}
.orderOptHolder li:hover{ background-color:#f6f7fa;}

.grand-total{ position:fixed; left: 20px; bottom:25px;border-radius:.5rem;padding:15px;background-color:white; }

.hovnon:hover{ background: transparent !important; color:black !important; }
.addhov:hover{ background-color:#3d64c7;}
.addhovline:hover{ text-decoration:underline;}
.addlisthov:hover{ background-color:#f6f7fa; cursor:pointer;;}
.addlisthov.foc{ background-color:#027df0; color: white ;}

.tooltip-help{position:fixed; bottom:20px; right:20px; z-index:999;background-color:white; }

#reportrange:hover{ background-color:#f6f7fa; cursor:pointer;;}
.pop-slide-arrow{ width:40px;height:40px; cursor:pointer;;position: absolute;top: 50%;border:0 }
.prev-blue-arrow{ background: url("../icons/img_icons-system-arrow-previous-white.png") no-repeat;background-size: 40px;left: -75px;}
.next-blue-arrow{ background: url("../icons/img_icons-system-arrow-next-white.png") no-repeat;background-size: 40px;right: -75px; }