@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');

*{box-sizing:border-box}
a{text-decoration:none;color:#5A5E9A}
html{height:100%;}
body{margin:0;padding:0;font-family: 'Plus Jakarta Sans', sans-serif;color: #5A5E9A;font-size: 13px;background: radial-gradient(103.89% 81.75% at 95.41% 106.34%,#eaf8ef 6%,rgba(234,248,239,0) 79.68%),radial-gradient(297.85% 151.83% at -21.39% 8.81%,#faf1f1 0%,#faf1f1 15.29%,#f3edf5 21.39%,#e5f0fa 40.79%);width: 100%;height:100%;position: relative;right: 0;transition: right 0.3s;background-attachment: fixed;background: #fff;}
body.Query{pointer-events:none}

body.Offline{pointer-events:none}
body .WifiControl{display:none}
body.Online .WifiControl.Ok{display:block;color: #36bc3b;font-size: 16px;}
body.Offline .WifiControl.Er{display:block;color: #f00;font-size: 16px;}
body:not(.Online):not(.Offline) .WifiControl.Ok{display:block;color: #36bc3b;font-size: 16px;}

body:before{
   content:"";
   width: 100%;
   height: 310px;
   position: fixed;
   bottom: -35%;
   left: 0;
   filter: blur(100px);
   z-index: -1;
   background: radial-gradient(circle, #eeaeca 35%, #2986f3 100%);
}

body:after{
   content:"";
   width: 50vw;
   height: 310px;
   position: fixed;
   top: -20%;
   left: -20%;
   filter: blur(100px);
   z-index: -1;
   background: radial-gradient(circle, #eeaeca 35%, #2986f3 100%);
}

.mb_2{margin-bottom: 2px !important;}
.mb_5{margin-bottom: 5px !important;}
.mb_16{margin-bottom: 16px !important;}

.message-bubble {
	position: fixed;
	bottom: 130px;
	right: 20px;
	background-color: #ffcc00;
	color: #333;
	padding: 12px 20px;
	border-radius: 20px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
	font-size: 16px;
	opacity: 0;
	transform: translateY(20px);
	animation: popUp 1s ease-in-out forwards;
}

@keyframes popUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

#LeftSuccessBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    z-index: 99911199;
    background: #4CAF50;
    box-shadow: 0px 0px 129px 108px #4CAF50;
    display: none;
}
#RightSuccessBox {
    position: fixed;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    z-index: 99911199;
    background: #4CAF50;
    box-shadow: 0px 0px 129px 108px #4CAF50;
    display: none;
}
#LeftErrorBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    z-index: 99911199;
    background: #f91100;
    box-shadow: 0px 0px 129px 108px #f00;
    display: none;
}
#RightErrorBox {
    position: fixed;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    z-index: 99911199;
    background: #f91100;
    box-shadow: 0px 0px 129px 108px #f00;
    display: none;
}
#SoundBox{
    display: none;
}


.PageContent table{width:100%;border: 1px solid #e8e9ed;background: #fff;border-radius: 4px;border-spacing: 0;overflow: hidden;border-collapse: collapse;}
.PageContent table thead{width:100%}
.PageContent table thead tr{width:100%}
.PageContent table thead tr th{line-height: 25px;text-align: left;padding: 2px 10px;font-size: 12px;background: transparent;border-bottom: 1px solid #5a5e9b;}
.PageContent table tbody{width:100%}
.PageContent table tbody tr{width:100%}
.PageContent table tbody tr td{border-top: 1px solid #e8e9ed;vertical-align: middle;font-size: 12px;padding: 5px 10px;}
.PageContent table tbody tr td i.fa-comment.active{color: #2196F3;}
.PageContent table tbody tr td i.fa-messages.active{color: #4CAF50;}
.PageContent table tbody tr td i.fa-truck-fast.active{color: #FFC107;}
.PageContent table tbody tr td i.fa-bring-front.active{color: #F44336;}
.PageContent table tbody tr td .Box{background: #a9e1ab;font-weight: 100;font-size: 11px;padding: 2px 12px;border-radius: 2px;}
.PageContent table tbody tr td .BtnList{margin:0}
.PageContent table tbody tr:hover{cursor: pointer;}
.PageContent table tbody tr:hover td{background: #fffce1;}
.PageContent table tbody tr[supply_status="2"][invoice_status="1"] td{background: #e0f1cc;}
.PageContent table tbody tr[supply_status="2"][invoice_status="2"] td{background: #ccdcf1;}

.PageContent table tbody tr.OrderItem:not([data-status="filter_4"]) .Btn{
    background: #C3C3C3 !important;
    color: #fff;
    border-color: transparent;
    pointer-events: none;
}
.PageContent table tbody tr.OrderItem:not([last-control="1"]) .Btn[fr="tb_printCargo"]{
    background: #C3C3C3 !important;
    color: #fff;
    border-color: transparent;
    pointer-events: none;
}
.d-flex{display:flex;gap: 8px;}
.flex-center{align-items: center;justify-content: center;}


form[name="formInvoice"] input::placeholder{color:#fff;font-weight:100;font-size:13px}

.row {
    margin-right: -8px;
    margin-left: -8px
 }
 
 .row.Fle {
    display: flex
 }
 
 .row::before,.row::after {
    display: table;
    content: " "
 }
 
 .row::after {
    clear: both
 }
 
 .col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9 {
    float: left;
    padding-right: 8px;
    padding-left: 8px;
    padding-top: 0;
    padding-bottom: 0
 }
 
 .row.Fle .col-1,.row.Fle .col-10,.row.Fle .col-11,.row.Fle .col-12,.row.Fle .col-2,.row.Fle .col-3,.row.Fle .col-4,.row.Fle .col-5,.row.Fle .col-6,.row.Fle .col-7,.row.Fle .col-8,.row.Fle .col-9 {
    float: none
 }
 
 .col-12 {
    width: 100%
 }
 
 .col-11 {
    width: 91.66666667%
 }
 
 .col-10 {
    width: 83.33333333%
 }
 
 .col-9 {
    width: 75%
 }
 
 .col-8 {
    width: 66.66666667%
 }
 
 .col-7 {
    width: 58.33333333%
 }
 
 .col-6 {
    width: 50%
 }
 
 .col-5 {
    width: 41.66666667%
 }
 
 .col-4 {
    width: 33.33333333%
 }
 
 .col-3 {
    width: 25%
 }
 
 .col-2 {
    width: 16.66666667%
 }
 
 .col-1 {
    width: 8.33333333%
 }
 

.f10{font-size:10px !important}
.f11{font-size:11px !important}
.f12{font-size:12px !important}

.pt0{padding-top:0px !important}
.pt10{padding-top:10px !important}
.pt12{padding-top:12px !important}
.pt15{padding-top:15px !important}
.pt18{padding-top:18px !important}
.pt20{padding-top:20px !important}
.pt24{padding-top:24px !important}
.pt25{padding-top:25px !important}
.pt30{padding-top:30px !important}
.pt40{padding-top:40px !important}

.pr10{padding-right:10px !important}
.pr12{padding-right:12px !important}
.pr15{padding-right:15px !important}
.pr18{padding-right:18px !important}
.pr20{padding-right:20px !important}
.pr24{padding-right:24px !important}
.pr25{padding-right:25px !important}
.pr30{padding-right:30px !important}
.pr40{padding-right:40px !important}

.pl10{padding-left:10px !important}
.pl12{padding-left:12px !important}
.pl15{padding-left:15px !important}
.pl18{padding-left:18px !important}
.pl20{padding-left:20px !important}
.pl24{padding-left:24px !important}
.pl25{padding-left:25px !important}
.pl30{padding-left:30px !important}
.pl40{padding-left:40px !important}

.pb0{padding-bottom:0px !important}
.pb10{padding-bottom:10px !important}
.pb12{padding-bottom:12px !important}
.pb15{padding-bottom:15px !important}
.pb18{padding-bottom:18px !important}
.pb20{padding-bottom:20px !important}
.pb24{padding-bottom:24px !important}
.pb25{padding-bottom:25px !important}
.pb30{padding-bottom:30px !important}
.pb40{padding-bottom:40px !important}

.ml-5{margin-left: 5px !important;}


.mb-0{margin-bottom: 0px !important;}
.mb-16{margin-bottom:16px !important;}
.mb-32{margin-bottom:32px !important;}
.mb-60{margin-bottom:60px !important;}

.maxWFull{max-width: 100% !important;}
.w60{width: 60px !important;}
.w120{width: 120px !important;}
.w160{width:120px !important;}
.w200{width:120px !important;}

textarea,input,select{
    font-family: 'Plus Jakarta Sans';
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0px;
    color: inherit;
}

.NotificationBar{position: fixed;bottom: 10px;display: flex;flex-direction: column;z-index: 1001;right: 10px;}
.NotificationBar .Notification{min-width: 220px;max-width: 30%;background: #fff;border: 1px solid #f1f1f1;border-right: 3px solid #f3f3f3;padding: 8px;margin-top: -1px;margin-right: 0;transition: all 0.3s;right: -280px;position: absolute;bottom: 0;}
.NotificationBar .Notification.DarkInfo{background:#000;color:#fff;border-left-color: #000;}
.NotificationBar .Notification.Error{border-right-color: #f00;}
.NotificationBar .Notification.Success{border-right-color: #4CAF50;border-bottom-color: #4CAF50;}
.NotificationBar .Notification.Show{height: auto;right: 0;transition: all 0.3s;}
.NotificationBar .Notification .Title{width:100%;display: flex;align-items: center;}
.NotificationBar .Notification .Title>span{width:100%;font-weight: 500;font-size: 9px;text-transform: uppercase;}
.NotificationBar .Notification.Error .Title>span{color: #c11c1c;}
.NotificationBar .Notification.Success .Title>span{color: #247927;}
.NotificationBar .Notification .Text{width:100%;font-size: 11px;}

.switch_checkbox.Icon{border: 1px solid #f3f3f3;padding: 10px;display: flex;flex-direction: column;width: 100%;}
.switch_checkbox.Icon>label{
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}
.switch_checkbox.Icon>label>small{
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}
.switch_checkbox.Icon>label>small>i{
    font-size: 22px;
    text-align: center;
}
.switch_checkbox.Icon>label>small>span{
    margin-top: 10px;
}

.d-none{display: none !important;}

.EmptyArea{width:100%;display: flex;flex-direction: column;align-items: flex-start;border: 1px solid #0000000a;background: #ffffff3d;padding: 15px;border-radius: 6px;}
.EmptyArea>.Icon{width:100%;margin-bottom: 24px;}
.EmptyArea>.Icon>img{height: 100px;}
.EmptyArea>.Title{width:100%;font-weight: 600;border-left: 4px solid #f00;padding-left: 2px;}
.EmptyArea>.Text{width:100%;font-size: 12px;padding-top: 4px;}
.EmptyArea>.BtnList{width:100%;display: flex;align-items: center;gap: 8px;margin-top: 14px;}
.EmptyArea>.BtnList>.Btn01{background: #2196F3;color: #fff;border-radius: 3px;padding: 9px 12px;font-size: 12px;cursor: pointer;}
.EmptyArea>.BtnList>.Btn02{width:100%}

.Table[PageLoad="1"]{position: relative;}
.Table[PageLoad="1"]::before{
    content:"";
    height: 60px;
    position: absolute;
    width: var(--plw);
    background: #ffffff;
    background: linear-gradient(90deg, #8696a824 25%, #8f9b8e66 50%, #c4c9a947 75%);
    background-size: 200% 100%;
    animation: loadingGradient 1.5s infinite;
    border-radius: 4px;
    opacity: 0.8;
}
[PageLoad="1"]:empty{
    position: relative;
}
[PageLoad="1"]:empty:before{
  content:"";
  height: 100%;
  position: absolute;
  width: var(--plw);
  background: #ffffff;
  background: linear-gradient(90deg, #efefef 25%, #f5f5f5 50%, #efefef 75%);
  background-size: 200% 100%;
  animation: loadingGradient 1.5s infinite;
  border-radius: 4px;
  opacity: 0.8;
}
@keyframes loadingGradient {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}


.LoginContainer{width:100%;height: 100%;display: flex;}
.LoginContainer .Left{width: 480px;height: 100%;background: #3A416F;flex: none;display: flex;flex-direction: column;align-items: flex-start;padding: 128px 42px 24px 42px;justify-content: space-between;}
.LoginContainer .Left .Logo{}
.LoginContainer .Left .Logo>svg{width:100%}


.LoginContainer .Left .Title{width:100%;color: #D8DBFF;font-size: 21px;font-weight: 500;margin: 15px 0px;}
.LoginContainer .Left .Text{width:100%;color: #FCFCFD;font-size: 14px;font-weight: 100;line-height: 21px;margin-bottom: 24px;}
.LoginContainer .Left .Btn{border: 1px solid #DFDFE6;padding: 9px 12px;color: #fff;border-radius: 4px;}

.LoginContainer .Left .GroupBox{width:100%;margin-top: auto;display: flex;flex-wrap: wrap;}
.LoginContainer .Left .GroupBox>.Item{width: 33.33%;display: flex;flex-direction: column;border: 1px dashed #ffffff4f;border-left: 0;border-top: 0;align-items: center;justify-content: center;padding: 24px 0px;}
.LoginContainer .Left .GroupBox>.Item:nth-child(+3n){border-right:0}
.LoginContainer .Left .GroupBox>.Item:nth-child(n+4){border-bottom:0}
.LoginContainer .Left .GroupBox>.Item>i{color: #B6B7D5;font-size: 31px;margin-bottom: 10px;}
.LoginContainer .Left .GroupBox>.Item>span:nth-child(2){color: #FCFCFD;font-weight: 400;font-size: 12px;}
.LoginContainer .Left .GroupBox>.Item>span:nth-child(3){font-size: 12px;color: #fff;font-weight: 100;margin-top: 4px;}


.LoginContainer .Right{width:100%;background: #FCFCFD;display: flex;align-items: center;justify-content: center;}
.LoginContainer .Right .Form{width:100%;max-width: 470px;display: flex;flex-direction: column;align-items: center;}

.LoginContainer .Right .Logo{display:none}
.LoginContainer .Right .Logo {
    width: 100%;
    margin: 36px 0;
    justify-content: center;
    align-items: center
}

.LoginContainer .Right  .Logo>.Icon {
    background: url(/Library/Img/logo.png);
    display: block;
    height: 41px;
    width: 37px
}

.LoginContainer .Right  .Logo>.Text {
    background: url(/Library/Img/logo_logistic_text.png?v454);
    width: 93px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: 50%;
    margin-left: 10px
}
.LoginContainer .Right .Form .Title{width:100%;color: #5A5E9A;margin-bottom: 7px;font-weight: bold;font-size: 14px;}
.LoginContainer .Right .Form .Input{width:100%;margin-bottom: 16px;position: relative;}
.LoginContainer .Right .Form .Input>input{width:100%;box-shadow: inset 0px 3px 6px #5A5E9A21;border: 1px solid #D6D6E7;border-radius: 2px;color: #B0B0C6;font-size: 14px;padding: 12px;outline: none;}
.LoginContainer .Right .Form .Input>.Icon{position: absolute;right: 9px;top: 7px;font-size: 22px;}
.LoginContainer .Right .Form .Remember{width:100%}
.LoginContainer .Right .Form .Btn{width:100%;background: #136BF8;text-align: center;border: 1px solid #136BF8;border-radius: 2px;color: #fff;font-weight: 300;padding: 15px 0px;margin-top: 10px;cursor: pointer;}
.LoginContainer .Right .Form .OrArea{width:100%}
.LoginContainer .Right .Form .OrArea>.Text{width:100%;color: #5A5E9A;font-size: 14px;text-align: center;margin-top: 22px;}
.LoginContainer .Right .Form .OrArea>.Btn{border-color: #D8DBFD;width:100%;background: linear-gradient(180deg, #F9F9FD, #EEEEFC);color: #5A5E9A;padding: 10px 0px;cursor: pointer;}
.LoginContainer .Right .Form .Input.is-invalid input{background: #ff000005;border-bottom-color: #ff000082 !important;}
.LoginContainer .Right .Form .Input.is-invalid label::before{content:"\f071";font-family: "Font Awesome 6 Pro";-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;display: var(--fa-display,inline-block);font-style: normal;font-variant: normal;line-height: 1;text-rendering: auto;color: #f00;}


.LoginContainer .Right .UserList{width:100%;display: none;}
.LoginContainer .Right .UserList>.Title{width:100%}
.LoginContainer .Right .UserList>.Text{width:100%}
.LoginContainer .Right .UserList>.List{width:100%}
.LoginContainer .Right .UserList>.List .Item{width:100%}
.LoginContainer .Right .UserList>.List .Item>.BtnDelete{width:100%}
.LoginContainer .Right .UserList>.List .Item>.Name{width:100%}
.LoginContainer .Right .UserList>.List .Item>.Photo{width:100%}
.LoginContainer .Right .UserList>.List .Item>.Dept{width:100%}
.LoginContainer .Right .UserList>.List .Item>.Store{width:100%}
.LoginContainer .Right .UserList>.List .Item.New{width:100%}
.LoginContainer .Right .UserList>.List .Item.New .Icon{width:100%}
.LoginContainer .Right .UserList>.List .Item.New .Text{width:100%}



.BtnIcon{width:100%}
.Btn{border: 1px solid #5A5E9A6E;border-radius: 4px;display: flex;align-items: center;justify-content: center;padding: 6px 12px;cursor: pointer;background: #fff;color: #5a5e9b;width: max-content;position: relative;line-height: initial;}
.Btn>i{margin-right:4px;font-size: 13px;}
.Btn>svg{height: 16px;}
.Btn.singleIcon>i{margin-right: 0;}
.Btn.Disabled{background: #C3C3C3 !important;color: #ffffff !important;border-color:transparent;pointer-events:none}

.Btn.Dropdown{margin-right: 0;border: 0;padding: 0;position: relative;}
.Btn.Dropdown .Wind{display:none;position: absolute;right: 0;bottom: 100%;}
.Btn.Dropdown .Wind .WindArea{background: #fff;border: 1px solid #e2e2e2;padding: 12px;min-width: 170px;border-radius: 4px;box-shadow: 0px 17px 27px -20px #00000045;margin-bottom: 8px;}
.Btn.Dropdown .Wind .WindArea>.Btn{width: 100%;border: 0;padding: 0 6px;line-height: 28px;text-align: left;display: flex;align-items: center;justify-content: flex-start;}
.Btn.Dropdown .Wind .WindArea>.Divider{width: 100%;height: 1px;background: #0000001f;margin: 4px 0px;}
.Btn.Dropdown:hover .Wind{display: block;}

.Select{display: block;}
.Select select{border: 1px solid #5A5E9A6E;border-radius: 4px;font-size: 12px;color: #5A5E9A;padding: 5px 6px 5px 6px;outline: none;font-weight: 400;}

.Input{display: block;position: relative;}
.Input input{border: 1px solid #5A5E9A6E;border-radius: 4px;font-size: 12px;color: #5A5E9A;padding: 6px 6px 6px 6px;outline: none;width: 100%;font-weight: 400;}
.Input input::placeholder{color: #5A5E9A;}
.Input i{position: absolute;right: 1px;top: 1px;border-left: 1px solid #ccc;color: #5A5E9A;padding: 8px 8px 7px 8px;background: #fff;border-radius: 0px 3px 3px 0px;cursor: pointer;}
.Input textarea{border: 1px solid #5A5E9A6E;border-radius: 4px;font-size: 12px;color: #5A5E9A;padding: 6px 6px 6px 6px;outline: none;width: 100%;font-weight: 400;min-height: 80px;}
.Input textarea::placeholder{color: #5A5E9A;}
.Input.Icon{position: relative;}
.Input select{border: 1px solid #5A5E9A6E;border-radius: 4px;font-size: 12px;color: #5A5E9A;padding: 6px 6px 6px 6px;outline: none;width: 100%;font-weight: 400;}
.Input select::placeholder{color: #5A5E9A;}

td>select{border: 1px solid #5A5E9A6E;border-radius: 4px;font-size: 13px;color: #5A5E9A;padding: 8px 6px 8px 6px;outline: none;font-weight: 400;width:100%}
td>input{border: 1px solid #5A5E9A6E;border-radius: 4px;font-size: 12px;color: #5A5E9A;padding: 9px 6px 10px 6px;outline: none;width: 100%;font-weight: 400;}
td>input::placeholder{color: #5A5E9A;}

.Btn.Black{background: #131714;color:#fff;border-color:transparent;}
.Btn.Green{background: #10b516;color:#fff;border-color:transparent;}
.Btn.Blue{background: #3e6cff;color:#fff;border-color:transparent;}
.Btn.Yellow{background: #C3C3C3;color:#fff;border-color:transparent;}
.Btn.SortUpdate{background: #f0ebb7;color: #5f560c;border-color: #daca9c;gap: 12px;}

.Btn.outBlue{border-color: #3e6cff;color: #3e6cff;}
.Btn.outBlue:hover{background: #3e6cff;color: #fff;}

.Btn.outRed{border-color: #ff1100;color: #f00;}
.Btn.outRed:hover{background: #ff1100;color: #fff;}

.Btn.outGreen{border-color: #10b516;color: #0a700e;}
.Btn.outGreen:hover{background: #10b516;color: #c9f9cb;}

.Btn.Disbled{border-color: #5a5e9a4f;color: #5a5e9ab3;background: #bdbacf66;pointer-events: none;}
.Btn.Disbled:hover{background: #10b516;color: #c9f9cb;}

.DeleteQuestionBox .Question{width:100%;display: flex;align-items: center;}
.DeleteQuestionBox .Question>span{width:100%;font-size: 10px;margin-right: 12px;}
.DeleteQuestionBox .Question>.BtnList{width:100%;display: flex;gap: 7px;margin: 0;}
.DeleteQuestionBox .Question>.Btn{width:100%}


.PanStoreList.d-none{transition: all 0.3s;left:-100%}
.PanStoreList{
    width: 224px;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(45deg, #e5d6ff, #ffffff);
    z-index: 111;
    transition: all 0.3s;
}
.PanStoreList .StoreSearch{width:100%;position: relative;padding:  20px 14px;}
.PanStoreList .StoreSearch>i{position: absolute;right: 23px;top: 26px;}
.PanStoreList .StoreSearch>input{width:100%;box-shadow: inset 0px 3px 6px #5A5E9A21;border: 1px solid #D6D6E7;border-radius: 3px;line-height: 24px;padding: 0px 5px;font-size: 12px;outline: none;font-weight: 300;}
.PanStoreList .Btn{width: calc(100% - 28px);display: flex;flex-direction: column;line-height: 18px;border: 0;border-radius: 0;margin: 7px 14px 7px 14px;}
.PanStoreList .PanStoreList{width:100%;display: flex;flex-direction: column;overflow: auto;height: calc(100vh - 110px);overflow: auto;}
.PanStoreList .PanStoreList::-webkit-scrollbar {
    width: 2px!important;
}
.PanStoreList .PanStoreList::-webkit-scrollbar-thumb {
    background-color: #e4e4e4;
}
.PanStoreList .PanStoreList::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(210,210,210,.3)!important
}
.PanStoreList .StoreItem{width:100%;cursor:pointer;display: flex;line-height: 14px;align-items: center;margin-bottom: 3px;padding: 6px 8px;background: #14578e26;}
.PanStoreList .StoreItem:hover{color: #0f6dff;background:#fff}
.PanStoreList .StoreItem .Detail{width:100%;display: flex;pointer-events: none;}
.PanStoreList .StoreItem .Detail .Connect{width: 60px;flex: none;background: #efefef;border-radius: 3px;display: flex;align-items: center;justify-content: center;margin-right: 6px;font-size: 10px;text-transform: uppercase;}
.PanStoreList .StoreItem .Detail .Connect.active{background: #4CAF50;color: #fff;}
.PanStoreList .StoreItem .Detail .Info{width:100%;display: flex;flex-direction: column;}
.PanStoreList .StoreItem .Detail .Info .FirmName{width:100%;font-weight: bold;font-size: 10px;text-transform: uppercase;}
.PanStoreList .StoreItem .Detail .Info .StoreCode{width:100%;font-size: 10px;}
.PanStoreList .StoreItem .Detail .Info .StoreDomain{width:100%;font-size: 10px;color: #2196F3;}


.PanNavArea{
    width: 224px;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    background: #FAFAFA;
    border-right: 1px solid #EAEAF4;
    padding: 0px 16px;
    z-index: 5;
}
.PanNavAreaLogo{width:100%;display: flex;border-bottom: 1px solid #EAEAF4;margin-bottom: 12.5px;align-items: center;height: 70px;}
.PanNavAreaLogoIcon{width: 40px;display: flex;align-items: center;justify-content: center;}
.PanNavAreaLogoText{width:100%;display: flex;flex-direction: column;cursor: pointer;position: relative;}
.PanNavAreaLogoText>span:nth-child(1){width:100%;font-weight: 700;color: #006CFF;line-height: 14px;}
.PanNavAreaLogoText>span:nth-child(2){width:100%;font-size: 11px;font-weight: 700;position: relative;}
.PanNavAreaLogoText>span:nth-child(2)>strong{width:100%;font-size: 11px;font-weight: 700;}
.PanNavAreaLogoText>span:nth-child(2)>div.Arrows{display: flex;flex-direction: column;position: absolute;right: -5px;top: -12px;width: 15px;}
.PanNavAreaLogoText>span:nth-child(2)>div.Arrows>svg:nth-child(1){height: 15px;width: inherit;margin-bottom: -3px;}
.PanNavAreaLogoText>span:nth-child(2)>div.Arrows>svg:nth-child(2){height: 15px;width: auto;margin-top: -3px;}
.PanNavAreaLogoText .Wind{position: absolute;top: 100%;width: 185px;background: #fff;border: 1px solid #5a5e9a;border-radius: 2px;box-shadow: 0px 3px 9px -7px #000;border-radius: 2px;z-index: 1;display: none;}
.PanNavAreaLogoText .Wind>div{display: block;line-height: 24px;padding: 2px 12px;cursor: pointer;font-weight: 500;border-bottom: 1px solid #5a5e9a2b;}
.PanNavAreaLogoText .Wind>div:hover{background: #5a5e9a;color: #fff;font-weight: 200;}
.PanNavAreaLogoText.show .Wind{display: flex;flex-direction: column;}
.PanNavAreaSearch{width:100%;position: relative;}
.PanNavAreaSearch>i{width:100%;position: absolute;bottom: 6px;left: 6px;}
.PanNavAreaSearch>input{width:100%;box-shadow: inset 0px 3px 6px #5A5E9A21;border: 1px solid #D6D6E7;border-radius: 17px;line-height: 24px;padding: 0px 24px;font-size: 13px;}
.PanNavAreaList{width:100%;display: flex;flex-direction: column;margin-top: 16px;overflow: auto;}
.PanNavAreaList::-webkit-scrollbar {
    width: 2px!important;
}
.PanNavAreaList::-webkit-scrollbar-thumb {
    background-color: #e4e4e4;
}
.PanNavAreaList::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(210,210,210,.3)!important
}
.PanNavAreaListItem{width:100%;display: flex;line-height: 14px;align-items: center;margin-bottom: 12px;padding: 6px 8px;border: 1px solid transparent;}
.PanNavAreaListItem:hover{color: #0f6dff;font-weight: 400;}
body.SubNav .PanNavArea .PanNavAreaListItem:hover>span{display: block;position: fixed;left: 55px;background: #fff;border-radius: 4px;box-shadow: 0px 0px 5px #5A5E9A2E;border: 1px solid #E0E0E5;padding: 7px 15px;width: initial;border-left: 0;font-weight: 500;}
body.SubNav .PanNavArea:hover{z-index: 6;}
.PanNavAreaListItem.Active{background: #ffffff;color: #0f6dff;border-radius: 4px;box-shadow: 0px 0px 5px #5A5E9A2E;border-color: #E0E0E5;}
.PanNavAreaListItem>i{margin-right: 10px;font-size: 16px;}
.PanNavAreaListItem>span{width:100%;font-size: 12px;}


.PanStoreBox{width:100%;display: flex;border: 1px solid #eaeaf4;padding: 6px;border-radius: 4px;cursor: pointer;}
.PanStoreBox:hover{border: 1px solid #0d6cff;}
.PanStoreBox .Detail{width:100%;display: flex;pointer-events: none;position: relative;overflow: hidden;}
.PanStoreBox .Detail .Connect{width: 60px;flex: none;background: #efefef;border-radius: 3px;display: flex;align-items: center;justify-content: center;margin-right: 6px;font-size: 10px;text-transform: uppercase;}
.PanStoreBox .Detail .Connect.active{background: #4CAF50;color: #fff;}
.PanStoreBox .Detail .Info{width:100%;display: flex;flex-direction: column;}
.PanStoreBox .Detail .Info .FirmName{width:100%;font-weight: bold;font-size: 10px;text-transform: uppercase;}
.PanStoreBox .Detail .Info .StoreCode{width:100%;font-size: 10px;}
.PanStoreBox .Detail .Info .StoreCode.Mobile{display:none}
.PanStoreBox .Detail .Info .StoreDomain{width:100%;font-size: 10px;color: #2196F3;}

body.SubNav .PanStoreBox .Detail .Connect{display:none}
body.SubNav .PanStoreBox .Detail .Info .FirmName{display:none}
body.SubNav .PanStoreBox .Detail .Info .StoreDomain{display:none}
body.SubNav .PanStoreBox .Detail .Info .StoreCode{display: none;}
body.SubNav .PanStoreBox .Detail .Info .StoreCode.Mobile{display: flex;justify-content: center;align-items: center;height: 20px;font-weight: bold;}
body.SubNav .PanStoreBox{padding:0;background:#2196F3;color:#fff;border-radius: 0px;}
body.SubNav .PanStoreBox .Detail{height:20px}



.PanSubNavArea{
    width: 263px;
    position: fixed;
    left: 224px;
    top: 0;
    height: 100%;
    background: #fff;
    border-right: 1px solid #EAEAF4;
    padding: 0px 16px;
    z-index: 5;
}
.PanSubNavArea .SubNavTitle{width:100%;display: flex;border-bottom: 1px solid #EAEAF4;margin-bottom: 12.5px;align-items: center;height: 70px;color: #0F6CFF;font-size: 14px;text-transform: uppercase;font-weight: 500;gap: 8px;display: grid;}
.PanSubNavArea .SubNavTitle i{margin-right:10px}
.PanSubNavArea .SubNavGroup{width:100%;display: flex;align-items: center;font-weight: 600;color: #6C6D89;font-size: 13px;margin-top: 16px;}
.PanSubNavArea .SubNavGroup>i:first-child{margin-right:8px;font-size: 15px;}
.PanSubNavArea .SubNavGroup>i:last-child{margin-left:8px}
.PanSubNavArea .SubNavGroupContent{display:flex;flex-direction: column;position: relative;}
.PanSubNavArea .SubNavGroupContent:before{content:"";display:flex;position: absolute;top: 16px;left: 7px;width: 1px;height: calc(100% - 16px);background: #E0E0E5;}
.PanSubNavArea .SubNavGroupContent .Item{width:100%;margin-top: 16px;padding-left: 23px;position: relative;min-height: 16px;}
.PanSubNavArea .SubNavGroupContent .Item.Active{color:#3d6cff}
.PanSubNavArea .SubNavGroupContent .Item.Active:before{content:"";display:flex;position: absolute;top: 0;left: 6px;width: 3px;height: auto;background: #3d6cff;height: 100%;}


body.SubNav .PanSubNavArea{left:61px}
body.SubNav .PanNavArea{width:61px;background: transparent;padding: 0 12px;border-color: #EAEAF4;}
body.SubNav .PanNavAreaLogoText{display:none}
body.SubNav .PanNavAreaSearch{display:none}
body.SubNav .PanNavAreaListItem>span{display:none}
body.SubNav .Page{margin-left: 324px;padding: 0 25px;}


body.HomePage .Page{margin-left: 224px;padding: 0 25px;}
body.HomePage .PanSubNavArea{display: none;}

body.HideSubNav .PanSubNavArea{display: none;}
body.HideSubNav .Page{margin-left: 61px;padding: 0 25px;}
body.HideSubNav .PanNavArea{width:61px;background: transparent;padding: 0 12px;border-color: #EAEAF4;}
body.HideSubNav .PanNavAreaLogoText{display:none}
body.HideSubNav .PanNavAreaSearch{display:none}
body.HideSubNav .PanNavAreaListItem>span{display:none}

.Container{width:100%;padding: 0 25px;}

.Page{border: 0;/* background: url(https://panel.farktor.com/NewTheme/Library/Img/PageHeadBg.svg); *//* background-repeat: no-repeat; *//* background-position: calc(100% - 0px) 2px; */height: calc(100vh - 1px);}
.Page .HeadBar{width:100%;display: flex;justify-content: flex-start;/* background: #fff; */height: 54px;/* border-bottom: 1px solid #eaeaf4; */align-items: center;position: sticky;top: 0;z-index: 30;}
.Page .HeadBar .SearchBox{width:100%;max-width: 420px;display: flex;box-shadow: 0px 1px 5px #5A5E9A38;border: 1px solid #5A5E9A4E;border-radius: 19px;padding: 3px;height: 38px;align-items: center;position: relative;}
.Page .HeadBar .SearchBox>select{width:100%;background: transparent;border: 0;outline: none;padding: 0 16px;color: #5A5E9A;}
.Page .HeadBar .SearchBox>input{width:100%;background: transparent;border: 0;outline: none;border-left: 1px solid #cfd1e1;text-indent: 5px;}
.Page .HeadBar .SearchBox>i{position: absolute;right: 14px;font-size: 17px;}
.Page .HeadBar .UserBox{display:flex;align-items: center;margin-left: auto;}
.Page .HeadBar .UserBox>div.BtnIcon{display:flex;align-items: center;font-size: 19px;margin-left: 23px;color: #000;cursor: pointer;}
.Page .HeadBar .UserBox>div.User{display:flex;align-items: center;margin-left: 30px;}
.Page .HeadBar .UserBox>div.User>.Name{display:flex;align-items: center;width: 33px;height: 33px;border: 1px solid #0F6CFF;color: #0F6CFF;font-weight: 600;border-radius: 100%;justify-content: center;flex: none;}
.Page .HeadBar .UserBox>div.User>i{font-size: 12px;margin-left: 9px;}


.Page .HeadBar .StoreBox{display: flex;box-shadow: 0px 1px 5px #5A5E9A38;border: 1px solid #5A5E9A4E;border-radius: 3px;height: 38px;align-items: center;position: relative;}
.Page .HeadBar .StoreBox .Selected{width:100%;display: flex;padding: 4px;align-items: center;cursor: pointer;}
.Page .HeadBar .StoreBox:hover .Selected{background: #fff;}
.Page .HeadBar .StoreBox .Selected .Info{width:100%;display: flex;flex-direction: column;min-width: 200px;}
.Page .HeadBar .StoreBox .Selected .Info>span:nth-child(1){width:100%;font-size: 12px;font-weight: 600;}
.Page .HeadBar .StoreBox .Selected .Info>span:nth-child(2){width:100%;font-size: 9px;}
.Page .HeadBar .StoreBox .Selected>i{font-size: 16px;}
.Page .HeadBar .StoreBox .Wind{position: absolute;width: 100%;top: 100%;left: 0;padding-top: 8px;display:none}
.Page .HeadBar .StoreBox:hover .Wind{display:block}
.Page .HeadBar .StoreBox .Wind .List{width:100%;display: flex;flex-direction: column;background: linear-gradient(
180deg, #ffffff, transparent);padding: 4px;}
.Page .HeadBar .StoreBox .Wind .List>div{display: flex;flex-direction: column;border: 1px solid #e6e6e6;border-radius: 2px;margin: 2px;padding: 4px;background: #ffffff80;cursor: pointer;}
.Page .HeadBar .StoreBox .Wind .List>div:hover{background: #5a5e9a;color: #fff;border-color: #5a5e9a;}
.Page .HeadBar .StoreBox .Wind .List>div>span:nth-child(1){width:100%;font-size: 9px;font-weight: 500;font*we: ;}
.Page .HeadBar .StoreBox .Wind .List>div>span:nth-child(2){width:100%;font-size: 12px;}


.tabulator {
    border: 0;
    background-color:transparent;
}
.tabulator .tabulator-header {
    border-bottom: 1px solid #DEDEDE;
    padding: 17px 0px;
    background: #fafafa;
}
.tabulator .tabulator-header .tabulator-col {
    background: #FAFAFA;
    border-right: 1px solid #DEDEDE;
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
    text-align: left;
    vertical-align: bottom;
    font-size: 13px;
    color: #5A5E9A;
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content{padding: 0px 10px;}
.twoRow{width:100%;display:flex;flex-direction: column;min-height: 34px;margin: 6px 0px;}
.twoRow>span:nth-child(1){width:100%;font-size: 13px;line-height: 20px;}
.twoRow>span:nth-child(2){width:100%;font-size: 11px;line-height: 12px;color: #3d6dff;}
.tabulator .tabulator-tableholder .tabulator-table{color:inherit}
.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left{border-right: 0;}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title{font-size:12px;font-weight: 500;padding-right: 0;}
.tabulator .tabulator-col-sorter{display:none !important}
.tabulator-row .tabulator-cell{border:0;padding: 0px 9px;font-size: 12px;border-bottom: 1px solid #f5f5f5;font-weight: 500;color: inherit;align-content: center;}
.tabulator-cell .ColorBox{width: 100%;display: flex;border-radius: 15px;align-items: center;overflow: hidden;}
.tabulator-cell .ColorBox>div{width: 80px;height: 24px;border-radius: 15px;border: 1px solid #dfdfed;box-shadow: 0px 0px 0px 1px #ffffff;position: relative;z-index: 1;}
.tabulator-cell .ColorBox>span{width: 100%;background: transparent;/* background: #5a5e9a; *//* color: #fff; */text-indent: 10px;font-size: 10px;border: 1px solid #bcbdd5;border-radius: 13px;border-top-left-radius: 0;border-bottom-left-radius: 0;margin-left: -3px;line-height: 18px;}
.tabulator-row.tabulator-row-even{background:transparent}
.tabulator-row.tabulator-selected {
    background-color: #f5f9ff !important;
}
.tabulator-row:hover {
    background-color: #f5f9ff !important;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover{background:transparent}
.tabulator.noSorter .tabulator-header .tabulator-col .tabulator-col-sorter{display:none}
.tabulator.noSorter .tabulator-header .tabulator-col .tabulator-col-title{padding-right:0 !important}
.tabulator .tabulator-col-resize-handle{display:none}
.tabulator .tabulator-header .tabulator-col:last-child{border-right:0}


.PageInPopup{width: calc(100% - 324px);position: fixed;left: 324px;top: 0;z-index: 111;height: 100%;}
.PageInPopup + .PageInPopup{width: calc(100% - 314px);}
.PageInPopup .PopupArea{width: 520px;height: 100%;background: #fff;position: relative;z-index: 2;padding: 0px;transition: all 0.2s;display: flex;flex-direction: column;}
.HideSubNav .PageInPopup{width: calc(100% - 60px);left: 61px;}
.PageInPopup.Full .PopupArea{width: 100%;}
.PageInPopup.W50 .PopupArea{width: 50%;}
.PageInPopup.W60 .PopupArea{width: 60%;}
.PageInPopup.W70 .PopupArea{width: 70%;}
.PageInPopup .Overflow{width:100%;height: 100%;position: absolute;top: 0;background: #00000000;z-index: 1;transition: all 0.2s;}
.PageInPopup .PopupArea .TitleBox{width:100%;padding: 24px;padding-bottom: 0px;}
.PageInPopup .PopupArea .TitleBox .Title{width:100%;font-size: 14px;color: #136BF8;}
.PageInPopup .PopupArea .TitleBox .Text{width:100%;font-size: 12px;color: #5A5E9A;margin-top: 8px;}
.PageInPopup .PopupArea .Content{width:100%;padding: 24px;overflow: auto;}




.PageInPopup .PopupArea .OperationNav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    color: #fff;
    border-bottom: 1px solid #cccccc59;
    line-height: 60px;
    font-size: 15px;
    padding: 0 20px;
    position: relative;
    align-items: center
}
.PageInPopup.Query .PopupArea .OperationNav>span {
    text-decoration: line-through;
    opacity: .5;
    color: #000
}
.PageInPopup .PopupArea .OperationNav.isComing {
    pointer-events: none;
}

.PageInPopup .PopupArea .OperationNav.isComing::after {
    height: 30px;
    content: "KULLANIM DISI";
    position: absolute;
    background: #ff000085;
    padding: 4px 12px;
    right: 50px;
    border-radius: 4px;
    color: #ffffffd4;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center
}

.PageInPopup .PopupArea .OperationSubNav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    border-bottom: 1px solid #cccccc59;
    line-height: 60px;
    font-size: 15px;
    padding: 0 20px;
    position: relative;
    padding-left: 45px;
    font-weight: 200;
    background: #00000021;
    display: none
}

.PageInPopup .PopupArea .OperationSubNav.Show {
    display: flex
}

.PageInPopup .PopupArea .OperationNav>i {
    margin-right: 10px
}

.PageInPopup .PopupArea .OperationNav>.span {
    width: 18px;
    height: 18px;
    border-radius: 100%;
    flex: none;
    margin-right: 20px
}

.PageInPopup .PopupArea .OperationNav>.Arrow {
    width: 28px;
    margin-left: auto;
    text-align: center
}

.PageInPopup .PopupArea .OperationNav:last-child {
    border: 0
}

.Popup_v2.Query {
}

.Popup_v2.Query .Modal.Mobile .OperationNav>span {
    text-decoration: line-through;
    opacity: .5;
    color: #000
}

.PageInPopup .PopupArea .OperationNav.Query:before {
    content: "";
    background: #223cb300 url(/Library/Img/loading_Ajax.svg);
    background-repeat: no-repeat;
    width: 41px;
    height: 48px;
    position: relative;
    z-index: 2;
    display: block;
    background-size: 40px;
    position: absolute;
    right: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: 50%
}

.PageInPopup .PopupArea .Content .BoxGroup{width:100%;height: 100%;display: flex;gap: 25px;}
.PageInPopup .PopupArea .Content .BoxGroup .Box{width:100%;overflow: auto;padding-right: 10px;}
.PageInPopup .PopupArea .Content .TabView{display:none}
.PageInPopup .PopupArea .Content .TabView.Active{display:block}

.PageInPopup .PopupArea .Content .DividerTitle{width:100%;margin: 20px 0px 10px 0px;box-shadow: inset 3px 0px 0px 0px #2c6bf8;padding-left: 7px;}
.PageInPopup .PopupArea .Content .DividerTitle .Title{width:100%;overflow: auto;font-weight: 600;}
.PageInPopup .PopupArea .Content .DividerTitle .Text{width:100%;font-size: 11px;font-weight: 300;}

.PageInPopup.Mobil{left:0;width: 100%;display: flex;align-items: flex-end;}
.PageInPopup.Mobil.Query{pointer-events: none;}
.PageInPopup.Mobil .PopupArea{left:0;bottom: -100%;width: 100%;height: initial;z-index: 1;background: transparent linear-gradient(179deg,#042AE5 -121%,#a96bff 4%,#00188D 126%) 0% 0% no-repeat padding-box;border-radius: 20px 20px 0px 0px;}
.PageInPopup.Mobil.Active .PopupArea{bottom: 0;}
.PageInPopup.Mobil .PopupArea .Content{padding:0}


.PageInPopup.Mobil .PopupArea .Content .SupplyStatusItem {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    border-bottom: 1px solid #cccccc59;
    line-height: 60px;
    font-size: 15px;
    padding: 0 20px;
    position: relative
}
.PageInPopup.Mobil .PopupArea .Content .SupplyStatusItem.Active::before {
    content: "\f00c";
    font-family: 'font awesome 6 pro';
    font-weight: 300;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display,inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    position: absolute;
    right: 18px
}
.PageInPopup.Mobil .PopupArea .Content .ProductItem {
	width: calc(100% - 28px);
	display: flex;
	margin: 10px 14px;
	position: relative;
	border-radius: 10px;
	color: #fff;
	border: 0;
	box-shadow: none;
	background: 0 0;
	margin-bottom: 14px!important;
	flex-direction: column;
}
.PageInPopup.Mobil .PopupArea .Content .ProductItem .Btn[x="Reply"]{
	display: none;
}
.PageInPopup.Mobil .PopupArea .Content .ProductItem[S="2"] .Btn[x="Reply"]{
	display: flex;
}
.PageInPopup.Mobil .PopupArea .Content .ProductItem.Loading .QuantityBar:before {
    content: "";
    background: #0000005c url(/Library/Img/loading_Ajax.svg);
    background-repeat: no-repeat;
    background-size: 26px;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    display: block;
    position: absolute;
    left: 0px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: 50%;
    border-radius: 4px;
}
.PageInPopup.Mobil .PopupArea .Content .ProductItem .Photo {
	width: 30px !important;
	position: relative;
	flex: none;
	z-index: 1;
	display: block;
	flex: none;
}

.PageInPopup.Mobil .PopupArea .Content .ProductItem .Photo>img {
	width: 100%;
	border-radius: 6px
}

.PageInPopup.Mobil .PopupArea .Content .ProductItem .Photo>.Status {
	position: absolute;
	width: 15px;
	height: 15px;
	border-radius: 100%;
	top: -3px;
	right: -8px
}

.PageInPopup.Mobil .PopupArea .Content .ProductItem .Info {
	display: flex;
	flex-direction: column;
	padding: 0 13px;
	z-index: 1;
	width: 100%;
	justify-content: center;
}

.PageInPopup.Mobil .PopupArea .Content .ProductItem .Info>.Name {
	font-size: 12px;
	color: #000000;
	line-height: 16px;
	height: inherit;
	overflow: hidden;
	text-wrap: inherit;
	font-weight: 600;
}


.PageInPopup.Mobil .PopupArea .Content .ProductItem .Info>.Desc {
	font-size: 11px;
	color: #0621a5;
	line-height: 12px;
	height: inherit;
	margin-bottom: 6px;
}

.PageInPopup.Mobil .PopupArea .Content .ProductItem .Info>.Color {
	font-size: 12px;
	color: #0621a5;
	line-height: 16px
}

.PageInPopup.Mobil .PopupArea .Content .ProductItem .Info>.Code {
	font-size: 10px;
	color: #0621a5;
	line-height: 16px;
}

.PageInPopup.Mobil .PopupArea .Content .ProductItem.Background {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	background-blend-mode: overlay;
	mix-blend-mode: saturation;
	border-radius: 6px;
	opacity: 1;
	backdrop-filter: brightness(1.7)
}

.PageInPopup.Mobil .PopupArea .Content .ProductItem.Background:before {
	content: "";
	background: #7bc4ff;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	filter: contrast(.82) blur(13px);
	box-shadow: inset 0 0 0 10px #7bc4ff
}


.PageInPopup.Mobil .PopupArea .Content form{position: relative;width: 100%;margin-bottom: 30px;}
.PageInPopup.Mobil .PopupArea .Content form .KeyboardIcon{position:absolute;right: 10px;top: 10px;font-size: 24px;color: #cbe1ff33;}
.PageInPopup.Mobil .PopupArea .Content form .KeyboardIcon.active{color: #cbe1ff;}
.PageInPopup.Mobil .PopupArea .Content form>input{width: 100%;border-radius: 4px;border: 1px solid #c399ff;line-height: 50px;padding: 0px 16px;background: #00000042;color: #fff;font-weight: bold;outline: none;}
.PageInPopup.Mobil .PopupArea .Content form>input::placeholder{color: #fff;}

.PageInPopup.Mobil .PopupArea .Footer{ba;background: #0000003b;display: flex;align-items: center;justify-content: center;gap: 10px;border-top: 1px solid #5000f5;}
.PageInPopup.Mobil .PopupArea .TitleBox{
	margin: 0;
    text-align: center;
    padding: 0 20px;
    border-radius: 22px 22px 0 0;
    line-height: 85px;
    background: linear-gradient(180deg,#3d94ff,#817eff);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100px
}

.PageInPopup.Mobil .PopupArea .TitleBox .Close {
    position: absolute;
    right: 10px;
    top: -30px!important;
    cursor: pointer;
    width: 45px;
    height: 30px;
    background: 0 0;
    color: #fff;
    border: 0;
    line-height: inherit;
    font-size: 0;
}

.PageInPopup.Mobil .PopupArea .TitleBox .Close::before {
    content: "X";
    font-family: sans-serif;
    font-size: 22px;
    bottom: 14px;
    right: 6px;
    line-height: 14px;
}

.PageInPopup.Mobil .PopupArea .TitleBox .Close::after {
    width: 1px;
    height: 16px;
    border-right: 2px dotted #fff;
    display: block;
    position: absolute;
    right: 12px;
    bottom: 0;
    opacity: 1
}

.PageInPopup.Mobil .PopupArea .TitleBox .Title{width:100%;text-align: center;line-height: 12px;font-weight: 600;text-transform: uppercase;font-size: 13px;}
.PageInPopup.Mobil .PopupArea .TitleBox .Text{width:100%;text-align: center;line-height: 20px;color: #fff;}
.PageInPopup.Mobil .Overflow{
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	outline: 0;
	overflow-y: auto;
	height: 100%;
	top: auto;
	padding-right: 0;
	background: #00000017;
	mix-blend-mode: normal;
	opacity: 1;
	backdrop-filter: blur(28px);
	-webkit-backdrop-filter: blur(28px);
	pointer-events: none;
}


.dropzone[T="Default"] .dz-message{width:100%;padding: 24px;}
.dropzone[T="Default"] .dz-message>i{width:100%;display: flex;align-items: center;justify-content: center;}
.dropzone[T="Default"] .dz-message>i::before{
	content : "";
	display: block;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAACdklEQVR4nO2XyWsTcRTH5+JFUDzp1ZN/gxetBNSLHpS6RBD1VoPoRUWwB7deVXopuIAHt0sVXJLO75e4gNaD3cCl0M57AW2VVLA2kS7vN/TJpEwvJcksmZkUfx94t8lvvp957zEZw9BoNBpNUrwb5XUS6bREKkigHxLIlkhTAuiVQDqTHeP1RqsiLDstkUoSFdcqgfTLuc5oNSRSZ73gK4s6jVZBWHZaAC36E1CcL9qHq78v0laJ9EAATQgkkkCTAuixibQ9rpmvOzZ1ujAlQd2qew2onoEBXhOZwNLCBgnvo0D1RClQiFwAFeeBtkUiIIB+xiEggB5FI+AsXTwCE5EISKDfcQhIILuJoee3OIslgYqxhMdlib8S1IhE1ZUH3hQovAA6JZHmwwS52fuNL3R/CTdSSBX3PeLjydPJsE/xjihx6kCO2/a95K57Vti9WPQskSvObQ775B/2T/PuI6Ia3qkd+7Pc/fR7+E6Ah3ESqK6HudGT4QrvPVFYDu9Wqj3Ht81S2P245mF81GjQG7z4OscHM29XhHdrV9rk+++ngwuAGmncAaDZIIf3jS/wsfMfaoZ3a8/xAvcOVYKOUblxB5D+BFgy7rg02DC8W+0db/j559kAEjTjQUB99HvwuRufPId36+jZfu4bW/A7QsNeRuiin0Ov3B33Hd6tzOXBave8d1pdbSjwusgbnM/BwIuGqmbgMGcKpLJp8UbDC3lQO8P8eWu2gKh+BdqHDD+Ylko5n3xJCwiksu/wLs8mea0Eygig7NL7gWbiEBBIFQFqyJl5z2PTTGoJGKuFNi2QMLoDSaM7kDS6A0mz6jug0Wg0/wf/AGuYZGUFVbiWAAAAAElFTkSuQmCC");
	width: 48px;
	height: 48px;
}
.dropzone[T="Default"] .dz-message>span{font-weight: 300;text-transform: uppercase;font-size: 12px;}
.dropzone[T="Default"]{
    max-width: 620px;
    border: 1px dashed #2580c8;
    border-radius: 6px;
    background: #f3faff;
}
.dropzone[T="Default"]  .dz-preview{
    width: 100%;
    height: initial;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.dropzone[T="Default"]  .dz-preview .dz-remove{background:#fff;border: 1px solid #2c80c8;color: #9bafbe;font-size:12px;padding: 2px 12px;border-radius: 3px;cursor: pointer;}
.dropzone[T="Default"]  .dz-preview .dz-remove:hover{color: #f00;border-color: #f00;}
.dropzone[T="Default"].dz-started::after{content:"";display: block;background: url(/NewTheme/Library/Img/loading_Ajax.svg);width: 34px;height: 34px;background-size: 34px;margin: 5px;}
.dropzone[T="Default"].dz-started .dz-preview{display:none}
.dropzone[T="Default"].dz-complete .dz-preview{display: flex;}
.dropzone[T="Default"].dz-complete::after{display:none}


.ColorList{overflow: auto}
.ColorList::-webkit-scrollbar {
    width: 6px!important;
    height: 6px!important
}
.ColorList::-webkit-scrollbar-thumb {
    background-color: #797dbd !important;
}

.ColorList::-webkit-scrollbar-track {
    background: rgb(255 255 255 / 41%);
}
.ColorList .ColorItem{display: flex;width:100%;background: #F7F7FF9F;padding: 8px 16px;border-bottom: 1px solid #e8e8e8;align-items: center;}
.ColorList .ColorItem .Action{width: 190px;margin-right: 10px;background: linear-gradient(190deg, #8185c5, #5a5e9a);color: #fff;text-align: center;display: flex;align-items: center;justify-content: center;border-radius: 4px;font-size: 12px;line-height: 26px;cursor: pointer;}
.ColorList .ColorItem .Action:hover{background: #5a5e9a;}
.ColorList .ColorItem .Info{width:100%;display: flex;flex-direction: column;font-size: 12px;}
.ColorList .ColorItem .Info .Name{width:100%;font-weight: 500;line-height: 15px;}
.ColorList .ColorItem .Info .Code{width:100%;font-weight: 300;font-size: 11px;line-height: 12px;}


.PageInPopup .PopupArea .Content  .CreatInvoiceProductList{overflow: auto;margin-top: 24px;}
.PageInPopup .PopupArea .Content  .CreatInvoiceProductList .CheckBar{display: flex;width:100%;background: #e4e4ea;padding: 8px 16px;align-items: center;border-bottom: 1px solid #e8e8e8;}
.PageInPopup .PopupArea .Content  .CreatInvoiceProductList .ProductItem{display: flex;width:100%;background: #F7F7FF9F;padding: 16px;align-items: center;border-bottom: 1px solid #e8e8e8;}
.PageInPopup .PopupArea .Content  .CreatInvoiceProductList .ProductItem .Check{width: 60px;flex: none;}
.PageInPopup .PopupArea .Content  .CreatInvoiceProductList .ProductItem .ProductDetail{width: 100%;display: flex;}
.PageInPopup .PopupArea .Content  .CreatInvoiceProductList .ProductItem .ProductDetail .Photo{width: 60px;margin-right: 10px;}
.PageInPopup .PopupArea .Content  .CreatInvoiceProductList .ProductItem .ProductDetail .Photo>img{width:100%;}
.PageInPopup .PopupArea .Content  .CreatInvoiceProductList .ProductItem .ProductDetail .Info{width:100%;display: flex;flex-direction: column;font-size: 12px;}
.PageInPopup .PopupArea .Content  .CreatInvoiceProductList .ProductItem .ProductDetail .Info .Name{width:100%;font-weight: 500;margin-bottom: 4px;}
.PageInPopup .PopupArea .Content  .CreatInvoiceProductList .ProductItem .ProductDetail .Info .Variation{width:100%;}
.PageInPopup .PopupArea .Content  .CreatInvoiceProductList .ProductItem .ProductDetail .Info .Price{width:100%;font-weight: bold;margin-top: auto;}



.PageInPopup.TablePenc{left: inherit;right: 400px;}



.PageInPopup .PopupArea .Content .FilterSelectedBox{width:100%;}
.PageInPopup .PopupArea .Content .FilterSelectedBox .InputBox{width:100%;position: relative;background: #f5f5f5;padding: 12px 12px 0 12px;}
.PageInPopup .PopupArea .Content .FilterSelectedBox .InputBox>input{width:100%;border: 1px solid #ccc;padding: 12px;border-radius: 4px;outline: none;font-size: 13px;}
.PageInPopup .PopupArea .Content .FilterSelectedBox .InputBox>i{position: absolute;right: 0;border-left: 1px solid #ccc;padding: 10px 17px;font-size: 20px;}
.PageInPopup .PopupArea .Content .FilterSelectedBox .FilterList{width:100%;display: flex;flex-direction: column;padding: 12px 12px;background: #f5f5f5;}
.PageInPopup .PopupArea .Content .FilterSelectedBox .FilterList>.Text{width:100%;font-weight: 400;margin-bottom: 5px;font-size: 12px;margin-bottom: 8px;}
.PageInPopup .PopupArea .Content .FilterSelectedBox .FilterList>.List{width:100%;display: flex;flex-wrap: wrap;gap: 4px;height: 140px;overflow: auto;}
.PageInPopup .PopupArea .Content .FilterSelectedBox .FilterList>.List .Filter-btn{background: #fff;border-radius: 36px;border: 1px solid #ccc;padding: 6px 12px;width: fit-content;font-size: 12px;cursor: pointer;}
.PageInPopup .PopupArea .Content .FilterSelectedBox .FilterList>.List .Filter-btn:hover{border-color: #3d6cff;color: #3d6cff;}
.PageInPopup .PopupArea .Content .FilterSelectedBox .FilterList>.List .Filter-btn.Active{color: #fff;background: #5a5e9a;border-color: #fff;}
.PageInPopup .PopupArea .Content .FilterSelectedBox .FilterSelectList{width:100%;margin-top: 24px;display: none;}
.PageInPopup .PopupArea .Content .FilterSelectedBox .FilterSelectList.Show{display: block;}
.PageInPopup .PopupArea .Content .FilterSelectedBox .FilterSelectList .Divider{width: 300px;position: relative;height: 1px;background: #5a5e9a;margin: 0px auto 20px auto;}
.PageInPopup .PopupArea .Content .FilterSelectedBox .FilterSelectList .Divider>span{position: absolute;padding: 2px 12px;background: #fff;left: 50%;top: -8px;margin-left: -15px;}
.PageInPopup .PopupArea .Content .FilterSelectedBox .FilterSelectList .Title{width:100%}
.PageInPopup .PopupArea .Content .FilterSelectedBox .FilterSelectList .List{width:100%;display: flex;flex-direction: column;gap: 8px;}
.PageInPopup .PopupArea .Content .FilterSelectedBox .FilterSelectList .List .Item{width:100%;display: flex;align-items: stretch;line-height: 27px;gap: 8px;}
.PageInPopup .PopupArea .Content .FilterSelectedBox .FilterSelectList .List .Item .Text{width:100%;font-size: 10px;font-weight: 400;box-shadow: inset 0px 3px 6px #5A5E9A21;border-radius: 2px;text-indent: 10px;background: #5a5e9a;color: #fff;}
.PageInPopup .PopupArea .Content .FilterSelectedBox .FilterSelectList .List .Item .Input{width:100%}
.PageInPopup .PopupArea .Content .FilterSelectedBox .FilterSelectList .List .Item .Input input{width:100%;padding: 6px 12px;outline: none;box-shadow: inset 0px 3px 6px #5A5E9A21;border: 1px solid #D6D6E7;border-radius: 2px;}
.PageInPopup .PopupArea .Content .FilterSelectedBox .FilterSelectList .List .Item .Input select{width:100%;padding: 6px 12px;outline: none;box-shadow: inset 0px 3px 6px #5A5E9A21;border: 1px solid #D6D6E7;border-radius: 2px;}
.PageInPopup .PopupArea .Content .FilterSelectedBox .FilterSelectList .List .Item .Input.two{display: flex;gap: 8px;}
.PageInPopup .PopupArea .Content .FilterSelectedBox .FilterSelectList .List .Item .Input.two input{width:100%}
.PageInPopup .PopupArea .Content .FilterSelectedBox .FilterSelectList .List .Item .Input.CheckList{width:100%}
.PageInPopup .PopupArea .Content .FilterSelectedBox .FilterSelectList .List .Item .Delete{width: 35px;text-align: center;flex: none;cursor: pointer;}
.PageInPopup .PopupArea .Content .FilterSelectedBox .FilterSelectList .List .Item .Delete>i{color: #696969;}

.PageInPopup .PopupArea .Content .TabList{width:100%;margin-bottom: 16px;position: relative;}
.PageInPopup .PopupArea .Content .TabList:before{content:"";position: absolute;height: calc(100% - 0px);border-left: 2px solid #e7e7e7;left: 0px;top: 0px;}
.PageInPopup .PopupArea .Content .TabList.nonLine:before{display: none;}
.PageInPopup .PopupArea .Content .TabList .TabItem{width:100%;/* margin-bottom: 16px; */}
.PageInPopup .PopupArea .Content .TabList .TabItem>.Title{width: calc(100% - 12px);border-left: 2px solid transparent;padding: 10px 0px;padding-left: 12px;margin-bottom: 0px;cursor: pointer;position: relative;}
.PageInPopup .PopupArea .Content .TabList .TabItem.Active>.Title{border-color : #116cff;font-weight: 600;}
.PageInPopup .PopupArea .Content .TabList .TabItem>.Title>span{background: #fff;position: relative;z-index: 1;padding-right: 7px;}
.PageInPopup .PopupArea .Content .TabList .TabItem>.Title:before{content:"";position: absolute;width: 100%;border-bottom:1px dashed #ccc;bottom: 16px;}
.PageInPopup .PopupArea .Content .TabList .TabItem>.List{width:100%;display: flex;flex-direction: column;padding: 0px 8px;display: none;}
.PageInPopup .PopupArea .Content .TabList .TabItem.Active>.List{display: flex;}

.PageInPopup .PopupArea .Content .InputItem.switch{width:100%;margin-bottom: -1px;cursor: pointer;}
.PageInPopup .PopupArea .Content .InputItem.switch + .InputItem.switch{border-top: 1px solid #e6e6e6;}
.PageInPopup .PopupArea .Content .InputItem.switch:last-child{border: 0}
.PageInPopup .PopupArea .Content .InputItem .switch_checkbox{padding: 0px 8px;line-height: 32px;font-size: 15px;}
.PageInPopup .PopupArea .Content .InputItem:hover .switch_checkbox{background: #f3f3f3;}



.PageInPopup .PopupArea .Content .TabList .TabItem>.List .InputItem{width:100%;border: 1px solid #e6e6e6;border-left: 0;border-right: 0;margin-bottom: -1px;cursor: pointer;border-top: 0px;}
.PageInPopup .PopupArea .Content .TabList .TabItem>.List .InputItem .switch_checkbox{padding: 0px 8px;line-height: 32px;font-size: 15px;}
.PageInPopup .PopupArea .Content .TabList .TabItem>.List .InputItem:hover .switch_checkbox{background: #f3f3f3;}

.PageInPopup .PopupArea .Content .VariableList{width:100%;border: 1px solid #efefef;padding: 11px;border-radius: 4px;background: #f3f3f3;}
.PageInPopup .PopupArea .Content .VariableList>.Title{width:100%;margin-bottom: 12px;color: #116cff;font-weight: 600;}
.PageInPopup .PopupArea .Content .VariableList>.List{width:100%}
.PageInPopup .PopupArea .Content .VariableList>.List .AccordGroup{width:100%;margin-bottom: 8px;}
.PageInPopup .PopupArea .Content .VariableList>.List .AccordGroup .AccordHead{display: flex;width:100%;justify-content: space-between;align-items: center;cursor: pointer;}
.PageInPopup .PopupArea .Content .VariableList>.List .AccordGroup .AccordHead:hover>span:nth-child(1){color: #116cff;transition: all 0.4s;}
.PageInPopup .PopupArea .Content .VariableList>.List .AccordGroup .AccordHead>span:nth-child(1){width:100%;font-weight: 500;border-left: 4px solid #116cff;text-indent: 4px;line-height: 21px;transition: all 0.4s;}
.PageInPopup .PopupArea .Content .VariableList>.List .AccordGroup .AccordHead>span:nth-child(2){width:100%}
.PageInPopup .PopupArea .Content .VariableList>.List .AccordGroup .AccordBody{width:100%;display: none}
.PageInPopup .PopupArea .Content .VariableList>.List .AccordGroup .AccordBody .Item{width:100%;display: flex;justify-content: space-between;align-items: center;margin: 4px 0px;}
.PageInPopup .PopupArea .Content .VariableList>.List .AccordGroup .AccordBody .Item>span:nth-child(1){width:100%;background: #D6D6E7;line-height: 23px;padding: 0 8px;font-size: 12px;}
.PageInPopup .PopupArea .Content .VariableList>.List .AccordGroup .AccordBody .Item>span:nth-child(2){width:100%;text-align: left;background: #ffffff;line-height: 23px;padding: 0 8px;font-size: 12px;}
.PageInPopup .PopupArea .Content .VariableList>.List .AccordGroup.Active .AccordBody{display: block}
.PageInPopup .PopupArea .Content .VariableList>.List .AccordGroup.Active .AccordHead>span:nth-child(1){color: #116cff;transition: all 0.4s;}

.PageInPopup .PopupArea .Footer{width: -webkit-fill-available;margin-top: auto;position: sticky;bottom: 0;padding: 12px 24px;background: #ffffff;display: flex;align-items: center;justify-content: flex-end;z-index: 4;}
.PageInPopup .PopupArea .Footer .Btn{border: 1px solid #efefef;padding: 7px 24px;display: flex;align-items: center;justify-content: flex-end;margin-left: 14px;border-radius: 2px;cursor: pointer;}
.PageInPopup .PopupArea .Footer .Btn:first-child{margin-left: 0;}
.PageInPopup .PopupArea .Footer .Btn[T='Cancel']{border: 0;background: #F1F1F8;color: #989898;}
.PageInPopup.Query .PopupArea .Footer .Btn[T='Cancel']{display:none}
.PageInPopup .PopupArea .Footer .Btn[T='Resume']{background: #136BF8;color: #fff;border-color: #136BF8;}
.PageInPopup.Query .PopupArea .Footer .Btn[T='Resume']{background: #5a5e9a;color: #989cd9;border-color: #6267aa;pointer-events: none;display: flex;justify-content: space-between;padding: 5px 18px 5px 4px;}
.PageInPopup.Query .PopupArea .Footer .Btn[T='Resume']:before{content:"";background: url(/NewTheme/Library/Img/loading_Ajax.svg);width: 20px;height: 20px;background-size: 20px;margin-right: 6px;}
.PageInPopup .PopupArea .Footer .Btn.lineBlue{background: transparent;color: #136BF8;border-color: #136BF8;}


.PageInPopup .PopupArea .Footer .CreatInvoiceTotalBar{margin-right:auto}
.PageInPopup .PopupArea .Footer .CreatInvoiceTotalBar .Quantity{width: 100%;}
.PageInPopup .PopupArea .Footer .CreatInvoiceTotalBar .Quantity>span:nth-child(1){font-weight: 700;font-size: 10px;text-transform: uppercase;}
.PageInPopup .PopupArea .Footer .CreatInvoiceTotalBar .Quantity>span:nth-child(2){font-weight: 600;margin-left: 5px;}
.PageInPopup .PopupArea .Footer .CreatInvoiceTotalBar .Price{width: 100%;}
.PageInPopup .PopupArea .Footer .CreatInvoiceTotalBar .Price>span:nth-child(1){font-weight: 700;font-size: 10px;text-transform: uppercase;}
.PageInPopup .PopupArea .Footer .CreatInvoiceTotalBar .Price>span:nth-child(2){font-weight: 600;margin-left: 5px;border: 2px solid;border-radius: 3px;padding: 0 5px;background: #f1f2ff;}

.PageInPopup.Active .Overflow{background: #00000078;transition: all 0.2s;}
.PageInPopup.Left .PopupArea{left: -100%;transition: all 0.2s;}
.PageInPopup.Left.Active .PopupArea{left: 0;transition: all 0.2s;}
.PageInPopup.Right .PopupArea{right: -100%;transition: all 0.2s;position: absolute;}
.PageInPopup.Right.Active .PopupArea{right: 0;transition: all 0.2s;}

.PageInPopup.Center{display: flex;justify-content: center;align-items: center;width: 100%;left: 0;}
.PageInPopup.Center .PopupArea{right: initial;transition: all 0.2s;position: absolute;height: initial;border-radius: 5px;overflow: hidden;max-width: 50%;width: fit-content;}

.PageInPopup .PopupArea .Content .IconBarTabList{width:100%;display: flex;margin-bottom: 16px;justify-content: flex-start;gap: 5px;}
.PageInPopup .PopupArea .Content .IconBarTabList .TabItem{border: 1px solid #efefef;padding: 2px 12px;border-radius: 2px;cursor: pointer;font-size: 12px;font-weight: 500;}
.PageInPopup .PopupArea .Content .IconBarTabList .TabItem:hover{border: 1px solid #5a5e9a;background: #ebedff;}
.PageInPopup .PopupArea .Content .IconBarTabList .TabItem.Active{border: 1px solid #5a5e9a;background: #ebedff;}


.PageInPopup .PopupArea .Content .ColumnItem{width:100%;display: flex;border-top: 1px solid #e9e9f2;padding: 12px 10px;align-items: center;}
.PageInPopup .PopupArea .Content .ui-sortable-placeholder{
background-color: #ffeb3b47;
height: 47px;
}
.PageInPopup .PopupArea .Content .ColumnItem:hover{box-shadow: 0px 0px 15px -11px #000;border-color: transparent;}
.PageInPopup .PopupArea .Content .ColumnItem .Move{width: 32px;flex: none;font-size: 16px;cursor: move;text-align: center;margin-right: 20px;}
.PageInPopup .PopupArea .Content .ColumnItem .Move>i::before {
    content: "\f0c9";
}
.PageInPopup .PopupArea .Content .ColumnItem .Move:hover>i::before {
    content: "\f07d";
}
.PageInPopup .PopupArea .Content .ColumnItem .form-check{width:100%}
.PageInPopup .PopupArea .Content .ColumnItem .Input{margin-left: auto;width: 220px;flex: none;}
.PageInPopup .PopupArea .Content .ColumnItem .Input>input{width:100%;padding: 6px 12px;outline: none;box-shadow: inset 0px 3px 6px #5A5E9A21;border: 1px solid #D6D6E7;border-radius: 2px;}

.InputItem>.AppendItemList>.Item.Variable{width:100%;display: flex;justify-content: space-between;align-items: center;margin: 0px 0px;background: transparent;padding: 0;color: #000;}
.InputItem>.AppendItemList>.Item.Variable>span:nth-child(1){width:100%;background: #D6D6E7;line-height: 23px;padding: 0 8px;font-size: 12px;}
.InputItem>.AppendItemList>.Item.Variable>span:nth-child(2){width:100%;text-align: left;background: #f3f3f3;line-height: 23px;padding: 0 8px;font-size: 12px;}

.InputItem.Packet{width:100%;max-width: 100%;}
.InputItem.Packet>.AppendItemList{gap:0}
.InputItem.Packet>.AppendItemList>.PacketItem{width: 100%;background: #f9f9f9;color: #262626;border: 1px solid #efefef;font-size: 13px;border-radius: 6px;display: flex;justify-content: space-between;flex-direction: row;margin-bottom: 2px;line-height: 23px;position: relative;align-items: center;overflow: hidden;}
.InputItem.Packet>.AppendItemList>.PacketItem:before{content:"";width: 16px;height: 16px;border-radius: 100%;background: #d5d5d5;flex: none;margin-right: 6px;position: absolute;left: 40px;}
.InputItem.Packet>.AppendItemList>.PacketItem.Active:before{background: #4caf50;}
.InputItem.Packet>.AppendItemList>.PacketItem>div:nth-child(1){width: 27px;border-right: 1px solid #b5b5b5;height: 36px;background: #ccc;display: flex;align-items: center;justify-content: center;flex: none;cursor: pointer;}
.InputItem.Packet>.AppendItemList>.PacketItem>div:nth-child(1)>i{color: #444;}
.InputItem.Packet>.AppendItemList>.PacketItem>div:nth-child(1):hover{background: #c10a0a00;}
.InputItem.Packet>.AppendItemList>.PacketItem>div:nth-child(1):hover>i{color: #f00;}
.InputItem.Packet>.AppendItemList>.PacketItem>div:nth-child(2){width:100%;display: flex;flex-direction: column;padding-left: 35px;}
.InputItem.Packet>.AppendItemList>.PacketItem>div:nth-child(2)>span:nth-child(1){width:100%;font-size: 13px;font-weight: 600;color: #000000;}
.InputItem.Packet>.AppendItemList>.PacketItem>div:nth-child(2)>span:nth-child(2){width:100%;font-size: 11px;line-height: 13px;max-width: 440px;display: none;}
.InputItem.Packet>.AppendItemList>.PacketItem>div:nth-child(3){width: 220px;padding-right: 6px;}
.InputItem.Packet>.AppendItemList>.PacketItem>div:nth-child(3)>select{width:100%;box-shadow: inset 0px 3px 6px #5A5E9A21;border: 1px solid #D6D6E7;font-size: 12px;border-radius: 3px;opacity: 1;outline: none;padding: 5px 6px;color: #5A5E9A;}

.InputItem.Line{width:100%;display: flex;flex-direction: row;margin-bottom: 16px;max-width: 580px;align-items: center;justify-content: space-between;}
.InputItem.Border{border: 1px solid #efefef;padding: 4px 2px;background: #fafafa;}

.InputItem{width:100%;display: flex;flex-direction: column;margin-bottom: 16px;max-width: 580px;}
.InputItem .switch_checkbox{cursor:pointer}


.InputItem .TabList{width:100%;display: flex;margin-top: 20px;gap: 8px;margin-bottom: 12px;}
.InputItem .TabList .TabItem{width:100%;line-height: 30px;background: #fff;border-radius: 4px;display: flex;align-items: center;justify-content: center;text-transform: uppercase;font-weight: 500;cursor: pointer;}
.InputItem .TabList .TabItem:hover{background: #a9c1c5;color: #fff;}
.InputItem .TabList .TabItem.active{background: linear-gradient(45deg, #dcabd8, #a0d5ff);box-shadow: 0px 2px 4px -2px #000;color: #68236d;}

.InputItem .TabView{width:100%;display: none;}
.InputItem .TabView:hover{width:100%}
.InputItem .TabView.active{display: block;}

.CheckGroup{display: flex;gap: 6px;margin-right: 22px;cursor: pointer;align-items: center;}
.CheckGroup .Check{width: 18px;height: 18px;border: 1px solid #5a5e9a;flex: none;position: relative;}
.CheckGroup .Text{display: block;font-size: 11px;font-weight: 500;}
.CheckGroup.active .Check:before{content:"";width: 8px;height: 8px;display: block;background: #136bf8;position: absolute;left: 4px;top: 4px;}

.InputItem.switch .Input{padding: 10px 12px;}

.InputItem>.AppendItemList{width:100%;font-size: 13px;padding: 8px 0px;display: flex;gap: 5px;align-items: center;justify-content: flex-start;flex-wrap: wrap;}
.InputItem>.AppendItemList>.Item{background: #FF5722;color: #fff;font-size: 13px;padding: 4px 8px;border-radius: 3px;display: flex;align-items: center;justify-content: space-between;}
.InputItem>label{width:100%;background: #cccce1;font-size: 11px;padding: 5px 5px 4px 5px;display: flex;justify-content: flex-start;text-indent: 2px;align-items: stretch;border-radius: 4px 4px 0px 0px;text-transform: uppercase;margin-bottom: -1px;}
.InputItem>label .NumCounter{padding: 0px 8px;background: #bcbed5;font-size: 12px;display: flex;align-items: center;justify-content: flex-start;margin-left: auto;border-radius: 4px;text-indent: 0;}
.InputItem>label .NumCounter.Error{background: #ff1100;color: #fff;}
.InputItem>label>.Btn{background: #03A9F4;font-size: 10px;letter-spacing: 0.8px;padding: 2px 8px;border-radius: 2px;color: #fff;cursor: pointer;margin-left: auto;}
.InputItem>label>.Btn:hover{background: #0b5072;}
.InputItem>label>i{/* width:100%; */}
.InputItem .InputGroup{width:100%}
.InputItem .InputGroup input{width:100%;box-shadow: inset 0px 3px 6px #5A5E9A21;border: 1px solid #D6D6E7;border-radius: 2px;opacity: 1;outline: none;padding: 10px;color: #5A5E9A;}
.InputItem .InputGroup select{width:100%;box-shadow: inset 0px 3px 6px #5A5E9A21;border: 1px solid #D6D6E7;border-radius: 2px;opacity: 1;outline: none;padding: 10px;color: #5A5E9A;}
.InputItem .InputGroup .BtnIcon{width:100%}
.InputTwoItem{width:100%;display: flex;gap: 16px;max-width: 580px;}
.InputTwoItem.Full{max-width: 100%;}
.InputTwoItem.Full .InputItem{max-width: 100%}
.InputItem.Full{max-width: 100%}

.InputItem .Info{width:100%;margin-top: 5px;font-size: 11px;color: #7378c5;font-weight: 300;}
.InputItem .Icon{width:100%;height: 100%;background: #f3f3f3;border: 1px solid #e6e6e6;display: flex;align-items: center;justify-content: center;}
.InputItem .Icon>svg{height: 37px;}
.InputItem .Input{width:100%}
.InputItem .Input input{width:100%;box-shadow: inset 0px 3px 6px #5A5E9A21;border: 1px solid #D6D6E7;border-radius: 2px;opacity: 1;outline: none;padding: 10px;color: #5A5E9A;}
.InputItem .Input textarea{width:100%;box-shadow: inset 0px 3px 6px #5A5E9A21;border: 1px solid #D6D6E7;border-radius: 2px;opacity: 1;outline: none;padding: 10px;color: #5A5E9A;min-height:90px;resize:none;}
.InputItem .Input select{width:100%;box-shadow: inset 0px 3px 6px #5A5E9A21;border: 1px solid #D6D6E7;border-radius: 2px;opacity: 1;outline: none;padding: 10px;color: #5A5E9A;}
.InputItem .Input select:disabled{background:#f1f1f8}
.InputItem .Input input:focus{border-bottom-color: #01010c;}
.InputItem .Input input.non-empty{border-bottom-color: #01010c;}
.InputItem .Input textarea:focus{border-bottom-color: #01010c;}
.InputItem .Input textarea.non-empty{border-bottom-color: #01010c;}

.InputGroup{display: flex;gap: 14px;}

.InputItem .IconSelectedBar{width:100%;padding: 24px 0px;background: #fff;border: 1px dashed #357af8;display: flex;flex-direction: column;align-items: center;}
.InputItem .IconSelectedBar .Icon{width: 54px;height: 54px;background: #f8faff;border: 1px solid #D6D6D6;border-radius: 100%;display: flex;align-items: center;justify-content: center;box-shadow: inset 0px 3px 6px #EAEAFC;}
.InputItem .IconSelectedBar .Icon>i{text-align: center;font-size: 20px;color: #5A5E9A;}
.InputItem .IconSelectedBar .BtnText{width:100%;text-align: center;margin-top: 9px;text-decoration: underline;font-weight: 500;color: #357af8;}
.InputItem .IconSelectedBar:hover{background: #357af808;}



.InputItem .TagList{width:100%;display: flex;padding-top: 12px;flex-wrap: wrap;gap: 5px;}
.InputItem .TagList .TagItem{font-size: 16px;display: flex;}
.InputItem .TagList .TagItem>span:nth-child(1){font-size: 12px;padding: 4px 12px;border: 1px solid #5a5e9a;border-right: 0;border-radius: 2px 0px 0px 2px;}
.InputItem .TagList .TagItem>span:nth-child(2){background: #5a5e9a;color: #fff;border: 1px solid #5a5e9a;border-left: 0;padding: 4px 12px;font-size: 12px;cursor: pointer;}
.InputItem .TagList .TagItem>span:nth-child(2):hover{background: #f00;color: #fff;border-color: #f00;}

.InputItem.is-invalid input{background: #ff000005;border-bottom-color: #ff000082 !important;}
.InputItem.is-invalid select{background: #ff000005;border-bottom-color: #ff000082 !important;}
.InputItem.is-invalid label::before{content:"\f071";font-family: "Font Awesome 6 Pro";-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;display: var(--fa-display,inline-block);font-style: normal;font-variant: normal;line-height: 1;text-rendering: auto;color: #f00;}

.PageContent{width:100%;height: calc(100% - 55px);color: #5a5e9b;transition: opacity 0.3s;opacity: 1;}
.PageContent .PageTitleArea{width:100%;display: flex;flex-direction: column;/* background: url(/NewTheme/Library/Img/PageHeadBg.svg); *//* background-repeat: no-repeat; *//* background-position: 100%; */}
.PageContent .PageTitleArea .TheBack{width:100%;color: #5A5E9A;font-size: 12px;margin-bottom: 10px;display: flex;align-items: center;justify-content: flex-start;margin-top: 0px;}
.PageContent .PageTitleArea .TheBack>i{margin-right: 5px;font-size: 15px;}
.PageContent .PageTitleArea .TheBack>span{font-size: 12px;}
.PageContent .PageTitleArea .Title{width:100%;font-size: 21px;color: inherit;font-weight: 500;min-height: 26px;}
.PageContent .PageTitleArea .Text{width:100%;font-size: 12px;color: #5A5E9A;margin-top: 2px;min-height: 18px;}


.PageContent .CounterBox{
    background: #fff;
    padding: 6px 6px;
    display: flex;
    border: 1px solid #5a5e9a;
    align-items: center;
    flex-direction: row;
    border-radius: 4px;
    justify-content: space-between;
    cursor: pointer;
}
.PageContent .CounterBox.selected{
    background: #fff0da;
    border: 1px solid #FF9800;
    color: #865712;
}
.PageContent .ViewContent .CounterBox {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.PageContent .CounterBox>span:nth-child(1){
    font-size: 10px;
    font-weight: 700;
}
.PageContent .CounterBox>span:nth-child(2){
    font-size: 18px;
    margin-left: 10px;
    font-weight: 700;
}
.PageContent .Box {
    width: 100%;
    background: linear-gradient(45deg, #ffffff, transparent);
    padding: 10px 14px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    box-shadow: 0px 5px 6px -10px #000000c4;
    border-radius: 4px;
}
.PageContent .Box .Number{font-weight: bold;font-family: monospace;font-size: 24px;color: #2daffe;line-height: 20px;margin-bottom: 5px;}
.PageContent .Box .Title{font-weight: 700;font-size: 11px;margin-bottom: 3px;text-transform: uppercase;}
.PageContent .Box .Text{font-size: 10px;}
.PageContent .Box .Number.RedText{color:#d81356}

.PageContent .Box.Grey{
    width: 100%;
    background: #f8f9fb;
    padding: 8px 14px;
    display: flex;
    border: 1px solid #e7e9ed;
}

.NumberBtn{
    background: #fafcff;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    line-height: 32px;
    cursor: pointer;
}
.NumberBtn.active{
    background: #3ae041;
    color: #18711b;
    border-color: #18711b;
}
.NumberBtn:hover{}
.NumberBtn input{
    height: 100%;
    border: 0;
    background: transparent;
    line-height: 66px;
    outline: none;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
}


.BoxTab {
   width: 100%;
   display: flex;
   padding: 0 14px;
   padding-bottom: 0;
   border-bottom: 1px solid #e5e5e5;
}

.BoxTab .TabItem {
   border-bottom: 2px solid #ccc0;
   font-weight: 500;
   font-size: 12px;
   line-height: 20px;
   padding: 8px 16px 10px;
   margin-bottom: -2px;
   cursor: pointer;
   text-transform: uppercase;
   display: flex;
   flex-direction: column;
   border-right: 1px solid #ebebeb;
   align-items: center;
   justify-content: center;
}

.BoxTab .TabItem:last-child {
   border-right: 0
}

.BoxTab .TabItem>span {
   font-weight: 300;
   font-size: 10px;
   line-height: 12px;
   text-align: center;
   width: fit-content;
}

.BoxTab .TabItem:hover {
   border-bottom-color: #000
}

.BoxTab .TabItem.active {
   border-bottom-color: #2196f3;
   color: #2196f3
}

.BoxBody.TabView {
   width: 100%;
   padding: 16px 0px;
   display: none
}

.BoxBody.TabView.active {
   display: block
}



.BoxBody .Filter {
   width: 100%;
   display: flex;
   gap: 20px;
   margin-bottom: 12px;
   align-items: center
}
.BoxBody .Filter:last-child {
   margin-bottom: 0px;
}
.BoxBody .Filter .Btnlist {
    width: 100%;
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    max-width: 240px;
}
.BoxBody .Filter .Btnlist .Btn {
    width: 49%;
    display: flex;
    justify-content: center;
    line-height: 30px;
    padding: 0;
    border-radius: 4px;
    font-size: 12px;
}

.BoxBody .Filter>.Input {
   width: 100%;
   position: relative;
   background: #fff
}

.BoxBody .Filter>.Input>.Info {
   font-size: 11px;
   color: #939393;
   margin-top: 4px
}

.BoxBody .Filter>.Input label {
   position: absolute;
   left: 8px;
   top: 8px;
   line-height: 14px;
   z-index: 0;
   font-size: 12px;
}
.BoxBody .Filter>.Input label {
}

.BoxBody .Filter>.Input input {
   padding: 7px 9px;
}

.BoxBody .Filter>.Input input:not(:placeholder-shown)~label,.BoxBody .Filter>.Input>input:focus~label {
   color: rgba(var(--bs-body-color-rgb),.65);
   top: -6px;
   left: 6px;
   background: #fff;
   z-index: 1;
   padding: 0 4px;
   font-size: 11px;
}

.BoxBody .Filter>.Input input:not(:placeholder-shown),.BoxBody .Filter>.Input>input:focus {
   border-color: #4d5088
}

.BoxBody .Filter>.Input select {
   width: 100%;
   border: 1px solid #caccde;
   padding: 6px 7px 6px 2px;
   border-radius: 3px;
   outline: none;
   background: 0 0;
   position: relative;
   z-index: 1;
   color: inherit;
   font-weight: 400;
   font-family: inherit
}

.BoxBody .Filter>.Input select:not(:placeholder-shown)~label,.BoxBody .Filter>.Input>select:focus~label {
   /* color: rgba(var(--bs-body-color-rgb),.65); */
   /* top: 5px; */
   /* left: 8px; */
   /* font-size: 10px; */
   /* line-height: 10px; */
   color: rgba(var(--bs-body-color-rgb),.65);
   top: -6px;
   left: 6px;
   background: #fff;
   z-index: 1;
   padding: 0 4px;
   font-size: 11px;
}

.BoxBody .Filter>.Input select:not(:placeholder-shown),.BoxBody .Filter>.Input>input:focus {
   border-color: #4d5088
}





.TableTitle{width:100%;display: flex;align-items: center;background: #ffffff;box-shadow: 0 0 #0000, 0 0 #0000, 0 0 0 1px rgba(35, 38, 59, .05), 0 1px 3px 0 rgba(35, 38, 59, .15);border-radius: 5px;padding: 16px;justify-content: space-between;}
.TableTitle .TableTitleLeftArea{display: flex;flex-direction: column;gap: 10px;}
.TableTitle .TableTitleLeftArea .Title{width:100%;font-weight: bold;font-size: 14px;text-transform: uppercase;}
.TableTitle .TableTitleLeftArea .BtnList{width:100%;display: flex;justify-content: flex-start;align-items: center;}
.TableTitle .TableTitleLeftArea .BtnList .Btn{background: #efefef;}
.TableTitle .TableTitleRightArea{display: flex;flex-direction: column;gap: 10px;}
.TableTitle .TableTitleRightArea .BtnList{width:100%;display: flex;justify-content: flex-end;align-items: center;}
.TableTitle .TableTitleRightArea .BtnList:empty{display:none}
.TableTitle .TableTitleRightArea .BtnList .Btn{background: #efefef;}
.TableTitle .TableTitleRightArea .PaginationBar{width:100%;display: flex;}
.TableTitle .TableTitleRightArea .PaginationBar .goTo{display: flex;margin-right: 20px;align-items: center;}
.TableTitle .TableTitleRightArea .PaginationBar .goTo>span{width:100%;font-weight: 400;margin-right: 8px;font-size: 12px;}
.TableTitle .TableTitleRightArea .PaginationBar .goTo>input{outline: none;border: 1px solid #ccc;padding: 4px;font-weight: 500;text-align: center;font-size: 14px;width: 50px;text-indent: 0;border-radius: 4px;line-height: 23px;}
.TableTitle .TableTitleRightArea .PaginationBar .Pages{display: flex;}
.TableTitle .TableTitleRightArea .PaginationBar .Pages .Prev{display: flex;align-items: center;}
.TableTitle .TableTitleRightArea .PaginationBar .Pages .Prev.disabled{color:#ccc;pointer-events:none}
.TableTitle .TableTitleRightArea .PaginationBar .Pages .Prev>svg{height: 13px;cursor: pointer;}
.TableTitle .TableTitleRightArea .PaginationBar .Pages .List{display: flex;align-items: center;gap: 8px;}
.TableTitle .TableTitleRightArea .PaginationBar .Pages .List .Number{width:100%;color: #000000;padding: 8px 12px;border-radius: 4px;font-weight: 600;cursor: pointer;}
.TableTitle .TableTitleRightArea .PaginationBar .Pages .List .Number:hover{background: #0000009c;color: #fff;}
.TableTitle .TableTitleRightArea .PaginationBar .Pages .List .Number.active{width:100%;background: #000;color: #fff;padding: 8px 12px;border-radius: 4px;font-weight: 600;cursor: pointer;}
.TableTitle .TableTitleRightArea .PaginationBar .Pages .List .Dots{font-weight: 800;color: #000;}
.TableTitle .TableTitleRightArea .PaginationBar .Pages .Next{display: flex;align-items: center;}
.TableTitle .TableTitleRightArea .PaginationBar .Pages .Next.disabled{color:#ccc;pointer-events:none}
.TableTitle .TableTitleRightArea .PaginationBar .Pages .Next>svg{height: 13px;cursor: pointer;}



.NotificationButton{display: flex;border: 1px solid #ccc;padding: 6px;flex-direction: column;align-items: center;justify-content: center;font-weight: bold;gap: 12px;border-radius: 4px;font-size: 11px;opacity: 0.4;}
.NotificationButton.note.active{color: #2196F3;opacity: 1;border-color: #2196F3;}
.NotificationButton.comment.active{color: #4CAF50;opacity: 1;border-color: #4CAF50;}
.NotificationButton.fast.active{color: #FFC107;opacity: 1;border-color: #FFC107;}
.NotificationButton.order.active{color: #F44336;opacity: 1;border-color: #F44336;}


.PageContent .PageTitleArea .TableCounter{width:100%;margin: 9px 0px;display: flex;font-size: 12px;color: #5A5E9A;font-weight: 300;gap: 2px;min-height: 15px;}
.PageContent .PageTitleArea .BtnList{width:100%;margin: 12px 0px;display: flex;align-items: center;background: linear-gradient(182deg, #ffffff, transparent);padding: 9px;border-radius: 4px;}
.PageContent .PageTitleArea .BtnList>div{margin-right: 0;position: relative;}
.PageContent .PageTitleArea .BtnList>div.Disabled{pointer-events: none;}
.PageContent .PageTitleArea .BtnList .SelectGroup{width:100%}
.PageContent .PageTitleArea .BtnList .SelectGroup>span{width:100%}
.PageContent .PageTitleArea .BtnList .SelectGroup select{width:100%}


.PageContent .SubTitleArea{width:100%;display: flex;flex-direction: column;margin-bottom: 16px;}
.PageContent .SubTitleArea .Title{width:100%;font-size: 14px;color: inherit;font-weight: 500;min-height: 16px;}
.PageContent .SubTitleArea .Text{width:100%;font-size: 14px;color: #5A5E9A;margin-top: 2px;min-height: 18px;}

.PageContent .PageTitleArea .BtnList .Btn.BtnTableDelete{background: #fff1f1;border: 1px solid #ffd6d6;color: #931414;width: auto;}

.PageContent .PageTitleArea .BtnList .Btn.SortUpdate{border: 1px solid #dfe2af;background: #ffe;color: #000;font-weight: 500;display: flex;align-items: center;justify-content: center;padding: 6px 12px;}
.PageContent .PageTitleArea .BtnList .Btn.SortUpdate span{display:none}
body.Query .PageContent .PageTitleArea .BtnList .Btn.SortUpdate span{background: #818129;color: #fff;font-weight: 500;display: flex;align-items: center;justify-content: center;padding: 2px 4px;border-radius: 7px;font-size: 10px;margin-left: 5px;}
body.Query .PageContent .PageTitleArea .BtnList .Btn.SortUpdate:before{content:"";background: url(/NewTheme/Library/Img/loading_Ajax.svg);width: 17px;height: 17px;background-size: 17px;margin-right: 6px;}

.PageContent .PageTwoPart{width:100%;height: 100%;display: flex;flex-direction: row;align-items: stretch;}
.PageContent .PageTwoPart .PagePartOne{width:100%;}
.PageContent .PageTwoPart .PagePartTwo{width: 100%;}

.PageContent .PageThreePart{width:100%;height: 100%;display: flex;align-items: stretch;flex-direction: row;}
.PageContent .PageThreePart .PagePartOne{width:100%;padding: 24px 0px;}
.PageContent .PageThreePart .PagePartTwo{width: 223px;/* flex: none; */background: #FAFAFA;padding: 40px 30px;}

.PageContent .PageThreePart .PagePartOne{width:100%;}
.PageContent .PageThreePart .PagePartTwo{width: 100%;}
.PageContent .PageThreePart .PagePartThree{width: 100%;flex: none;max-width: 640px;min-width: 480px;padding: 40px 24px;}
.PageContent .VerticalTabArea{width:100%;display: flex;flex-direction: column;position: relative;padding-left: 22px;padding-right: 24px;}
.PageContent .VerticalTabArea:before{content:"";width: 1px;height: 100%;background: #ffffff;position: absolute;top: -6px;left: 0;}
.PageContent .VerticalTabArea .TabItem{width:100%;position: relative;display: flex;flex-direction: column;min-height: 26px;}
.PageContent .VerticalTabArea .TabItem .TabHead{width:100%;display: flex;position: relative;}
.PageContent .VerticalTabArea .TabItem.Active .TabHead:before{content:"";width: calc(100% - 0px);height: 1px;border-bottom: 1px dashed #cacaca;position: absolute;left: 0px;}
.PageContent .VerticalTabArea .TabItem.Active .TabHead:after{content:"";width: 1px;height: 16px;border-left: 3px solid #0F6CFF;position: absolute;top: -8px;left: -23px;}
.PageContent .VerticalTabArea .TabItem .TabHead>span{font-size: 13px;color: #5A5E9A;position: absolute;top: -9px;left: -6px;background: transparent;padding: 0 6px;font-weight: 400;cursor: pointer;}
.PageContent .VerticalTabArea .TabItem.Active .TabHead>span{color: #136BF8}
.PageContent .VerticalTabArea .TabItem .TabHead>i{width:100%}
.PageContent .VerticalTabArea .TabItem .TabBody{width:100%;margin: 24px 0px;display: none;}
.PageContent .VerticalTabArea .TabItem.Active .TabBody{display: block;}


.PageContent .GroupBtnList{width:100%;position:relative;padding-left: 15px;}
.PageContent .GroupBtnList:before{content:"";width: 1px;height: 100%;background: #E0E0E5;position: absolute;top: 0px;left: 0;}
.PageContent .GroupBtnList>.Item{width:100%;font-size: 14px;font-weight: 500;color: #5A5E9A;line-height: 20px;position: relative;margin-bottom: 6px;cursor: pointer;}
.PageContent .GroupBtnList>.Item.Active{width:100%}
.PageContent .GroupBtnList .Item.Active:before{content:"";width: 1px;height: 20px;border-left: 3px solid #0F6CFF;position: absolute;top: 0px;left: -16px;}





.PageContent .BtnContent{width:100%;position: relative;display: none;}
.PageContent .BtnContent.Active{display: block;}
.PageContent .BtnContent.LineBar:before{content:"";width: 1px;height: 100%;border-left: 1px solid #EBEBEB;position: absolute;left: -15px;}
.PageContent .BtnContent .Title{color: #136BF8;font-weight: 500;}
.PageContent .BtnContent .Item{width:100%;display: flex;flex-direction: column;border-bottom:1px solid #D9D9D969}
.PageContent .BtnContent .Item .ItemHead{width:100%;display: flex;line-height: 24px;position: relative;padding: 5px 0px;cursor: pointer;}
.PageContent .BtnContent .Item .ItemHead span:nth-child(1){color: #5A5E9A;}
.PageContent .BtnContent .Item.Active .ItemHead span:nth-child(1){color: #136BF8;}
.PageContent .BtnContent .Item .ItemHead span:nth-child(2){font-size: 11px;color: #5A5E9A9F;margin-left: auto;}
.PageContent .BtnContent .Item .ItemHead i{width: 30px;margin-left: 8px;flex: none;display: flex;justify-content: center;align-items: center;font-size: 18px;}
.PageContent .BtnContent .Item .ItemHead i:before{content:"\f055"}
.PageContent .BtnContent .Item.Active .ItemHead i:before{content:"\f056";color: #3d6cff;}
.PageContent .BtnContent .Item .ItemBody{width:100%}
.PageContent .BtnContent .Item.Active .ItemHead:before{content:"";width: 1px;/* height: 20px; */border-left: 3px solid #0F6CFF;position: relative;/* top: 0px; */left: -16px;}


.Pagination{width: -webkit-fill-available;margin-left: -25px;background: #fff;padding: 16px 25px;border-top: 1px solid #eaeaf4;position: fixed;bottom: 0;z-index: 4;display: flex;align-items: center;justify-content: space-between;}
.Pagination>.Left{width:100%}
.Pagination>.Left>.PagiGroup{display: flex;justify-content: flex-start;gap: 10px;}
.Pagination>.Left>.PagiGroup>.Btn{border: 1px solid #eaeaf4;border-radius: 2px;line-height: 20px;width: 30px;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.Pagination>.Left>.PagiGroup>.Btn.Disabled{border-color: #fafafa;background: #fafafa;color: #f3f3f3;cursor: default;pointer-events: none;}
.Pagination>.Left>.PagiGroup>.Btn:hover:not(.Disabled){border-color: #3d6cff;}
.Pagination>.Left>.PagiGroup>.Input{border: 1px solid #eaeaf4;border-radius: 2px;line-height: 24px;}
.Pagination>.Left>.PagiGroup>.Input>input{background: transparent;border: 0;width: 43px;height: 100%;text-align: center;font-size: 14px;outline: none;}
.Pagination>.Right{width:100%}
.Pagination>.Right>.PagiGroup{display: flex;flex-direction: column;align-items: flex-end;}
.Pagination>.Right>.PagiGroup>.Text{font-size: 12px;}
.Pagination>.Right>.PagiGroup>.Text>strong{color: #000;}


table.Standart{width:100%;border-collapse: collapse;}
table.Standart thead{
}
table.Standart thead tr{
    background: linear-gradient(180deg, #ffffff, #1f1f1f14);
}
table.Standart thead tr.TableTitle{
    background: #5a5e9a;
    color: #fff;
    padding: 0;
}
table.Standart thead tr.TableTitle th{
    padding: 2px;
}
table.Standart thead tr th{
    padding: 0px 0px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
}
table.Standart thead tr th>span{
    padding: 2px 8px;
    /* border-right: 1px solid #dbdbdb; */
    width: 100%;
    display: block;
}
table.Standart thead tr th:last-child>span{
    border-right: 0;
}
table.Standart thead tr th:last-child{
    padding-right: 50px;
}
table.Standart thead tr th.text-center{text-align:center}
table.Standart thead tr th.text-start{text-align:left}
table.Standart thead tr th.text-end{text-align:right}
table.Standart tbody{
    position: relative;
}
table.Standart tbody tr{
    cursor: pointer;
    min-height: 47px;
    position: relative;
}
table.Standart tbody tr.Active td{
    background: #5a5e9a !important;
    color: #fff !important;
}
table.Standart tbody tr.Active td:first-child::before{
    content: "\f00c";
    font-weight: 400;
    font-family: "Font Awesome 6 Pro";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    margin-right: 9px;
}
table.Standart tbody tr.Deleted td{
    background: #ffebeb !important;
}
table.Standart tbody tr.ui-sortable-helper{
    width: 100% !important;
}
table.Standart tbody tr.ui-sortable-placeholder{
background-color: #f5f5f5;
height: 47px;
}
table.Standart tbody tr.ui-sortable-placeholder>td{
    background: #ffeb3b52!important;
}
table.Standart tbody tr td{
    padding: 6px 8px;
    border-bottom: 1px solid #f4f4f4;
    text-align: left;
    min-height: 47px;
    line-height: 30px;
}
table.Standart tbody tr:hover td{
    background: #f5f9ff;
}
table.Standart tbody tr td:last-child{
    padding-right: 50px;
}
table.Standart tbody tr td.nonPadding{
    padding-right: 8px;
}
table.Standart thead tr th.nonPadding{
    padding-right: 0px;
}
table.Standart tbody tr td.Move{
    background: #f8f8f8;
	cursor:move
}
table.Standart tbody tr td.text-center{text-align:center}
table.Standart tbody tr td.text-start{text-align:left}
table.Standart tbody tr td.text-end{text-align:right}

table.Standart tbody tr td .EmptyIcon{color: #f00;font-size: 10px;}
table.Standart tbody tr td .Icon>svg{height:30px}


.TabRowNav{/* font-size: 21px; *//* padding: 0 24px; *//* display: flex; */align-items: center;justify-content: flex-end;}
.TabRowNav>i{position: absolute;right: 20px;top: 12px;font-size: 21px;}
.TabRowNav>i:hover{background: linear-gradient(45deg, #f5f9ffb8, #f5f9ff);width: 100%;height: 100%;top: 0;left: 0;}
.TabRowNav:hover>i{display:none}
table.Standart tbody tr td .BtnList{text-align:right;position: absolute;top: 0;right: 0;height: 100%;width: 100%;padding: 0 24px;display: flex;align-items: center;background: linear-gradient(45deg, #f5f9ff54, #e1e8f3);display: none;justify-content: flex-end;position: absolute;left: 0;top: 0;width: 100%;}
table.Standart tbody tr td.Delete .BtnList{display:flex;position: relative;background: transparent;width: initial;}
.TabRowNav:hover .BtnList{display: flex;}
table.Standart tbody tr td .BtnList>.BtnIcon{display: flex;flex-direction: row;align-items: center;margin: 0 10px;border-right: 1px solid #5a5e9a36;padding-right: 20px;cursor: pointer;width: unset;}
table.Standart tbody tr td .BtnList>.BtnIcon:last-child{padding-right: 0;border-right: 0;}
table.Standart tbody tr td .BtnList>.BtnIcon:hover{/* text-decoration: underline; */color: #000;}
table.Standart tbody tr td .BtnList>.BtnIcon>i{display: flex;font-size: 16px;margin-right: 7px;}
table.Standart tbody tr td .BtnList>.BtnIcon>span{display: flex;font-size: 11px;}
table.Standart tbody tr td .BtnList.View{position: initial;display: flex;background: transparent;gap: 7px;justify-content: flex-end;padding: 0;}
table.Standart tbody tr td .BtnList.View .Btn{color: #5a5e9a;}

table.Standart tbody tr td .BtnList.Quest{position: relative;}
table.Standart tbody tr td .BtnList .DeleteQuestion{display:none}
table.Standart tbody tr td .BtnList.Quest .DeleteQuestion{margin-right: 0px;width: 500px;position: absolute;right: 0;display: flex;background: #000000bd;padding: 5px 10px;border-radius: 2px;align-items: center;}
table.Standart tbody tr td .BtnList.Quest .DeleteQuestion .Text{width:100%;line-height: 14px;margin-right: 20px;color: #fff;font-size: 11px;letter-spacing: 0.7px;text-shadow: 0 0 black;}
table.Standart tbody tr td .BtnList.Quest .DeleteQuestion .BtnList{flex: none;display: flex;position: initial;background: transparent;gap: 8px;width: min-content;padding: 0;}
table.Standart tbody tr td .BtnList.Quest .DeleteQuestion .BtnList .Btn{padding: 1px 10px;font-size: 12px;line-height: 22px;border: 0;}
table.Standart tbody tr td .BtnList.Quest .DeleteQuestion .BtnList .Btn[T="Cancel"]{background: #ccc;color: #000;}
table.Standart tbody tr td .BtnList.Quest .DeleteQuestion .BtnList .Btn[T="Success"]{bc;background: #f00;color: #fff;}

.TabRowDelete{position: absolute;right: 0px;top: 0px;height: -webkit-fill-available;width: 100%;font-size: 21px;background: linear-gradient(90deg, #ffffff00, #ff1100);display: flex;justify-content: flex-end;align-items: center;cursor: default;z-index: 1;}
.TabRowDelete .BtnList{font-size: 12px;display: flex;position: initial;align-items: center;justify-content: flex-end;width: initial;background: transparent;}
.TabRowDelete .BtnList>.Btn{padding: 3px 6px;border-radius: 4px;margin-left: 8px;color:#fff;cursor: pointer;line-height: initial;}
.TabRowDelete .BtnList>.Btn.Success{background: #000;padding: 8px 11px;border-radius: 4px;margin-left: 8px;font-size: 11px;}
.TabRowDelete .BtnList>.Btn.Cancel{background: #ffffff;color: #000;border-color: #fff;padding: 8px 11px;border-radius: 4px;margin-left: 8px;font-size: 11px;}
.TabRowDelete .BtnList>.Btn:hover{opacity:0.9}


.TabRowDelete{position: absolute;right: 0px;top: 0px;height: -webkit-fill-available;width: 100%;font-size: 21px;background: linear-gradient(90deg, #ffffff00, #ff1100);display: flex;justify-content: flex-end;align-items: center;cursor: default;z-index: 1;}
.TabRowDelete .Text{font-size: 12px;color: #fff;display: flex;flex-direction: column;align-items: flex-end;line-height: 13px;}
.TabRowDelete .SubBtnList{font-size: 12px;display: flex;position: initial;align-items: center;justify-content: flex-end;width: initial;background: transparent;}
.TabRowDelete .SubBtnList>.Btn{padding: 3px 6px;border-radius: 4px;margin-left: 8px;color:#fff;cursor: pointer;line-height: initial;}
.TabRowDelete .SubBtnList>.Btn.Success{background: #000;padding: 8px 11px;border-radius: 4px;margin-left: 8px;font-size: 11px;}
.TabRowDelete .SubBtnList>.Btn:hover{opacity:0.9}
.TabRowDelete .SubBtnList>.Btn.Cancel{color:#000}

.Badge,.tabulator-cell .Badge{background: #f3f3f3;padding: 3px 10px;font-size: 11px;border-radius: 2px;display:flex;margin-right:5px;width: fit-content;align-items: center;justify-content: center;display: inline-flex;line-height: initial;}
.Badge.Full,.tabulator-cell .Badge.Full{width:100%;margin-right:0}
.Badge.Grey,.tabulator-cell .Badge.Grey{background: #efefef;}
.Badge.Green,.tabulator-cell .Badge.Green{background: #c4e89b;color: #375a0d;}
.Badge.Blue,.tabulator-cell .Badge.Blue{background: #b8dff1;color: #16588d;}
.Badge.Orange,.tabulator-cell .Badge.Orange{background: #ffd4c7;color: #75250c;}
.Badge.Red,.tabulator-cell .Badge.Red{background: #ffcecb;color: #551229;}
.Badge.Black,.tabulator-cell .Badge.Black{background: #a9a7a7;color: #0f0f0f;}


table.Standart thead.BredxBack tr{background: #f0f0f0;}
table.Standart thead.BredxBack tr>th{padding: 8px 0px;}
table.Standart thead.BredxBack tr>th .TableBredx{display:flex;gap: 6px;padding: 0 9px;font-weight: 400;font-size: 13px;align-items: center;}
table.Standart thead.BredxBack tr>th .TableBredx>div{display:flex;color: #787878;cursor: pointer;}
table.Standart thead.BredxBack tr>th .TableBredx>div:hover{text-decoration: underline;color: #000;}
table.Standart thead.BredxBack tr>th .TableBredx>i{display:flex;font-size: 9px;}
table.Standart thead.BredxBack tr>th .TableBredx>div:last-child{font-weight: 700;color: #2196F3;}


.switch_checkbox label,.switch_radio label {
	padding: 0;
	margin: 0;
	display: block;
	cursor: pointer;
}
.switch_checkbox label *,.switch_radio label * {
	vertical-align: middle;
	font-size: 12px;
}
.switch_checkbox label input,.switch_radio label input {
	display: none
}
.switch_checkbox label input+span,.switch_radio label input+span {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 18px;
	background: #bcbed5;
	border: 1px solid #bcbed5;
	border-radius: 50px;
	transition: all .3s ease-in-out;
	margin-right: 10px;
}
.switch_checkbox label input+span small,.switch_radio label input+span small {
	position: absolute;
	display: block;
	width: 50%;
	height: 100%;
	background: #fff;
	border-radius: 50%;
	transition: all .3s ease-in-out;
	left: 0
}
.switch_checkbox label input:checked+span,.switch_radio label input:checked+span {
	background: #5a5e9a;
	border-color: #4d5185;
}
.switch_checkbox label input:checked+span small,.switch_radio label input:checked+span small {
	left: 50%
}
.switch_checkbox.switch-green label input:checked+span,.switch_radio.switch-green label input:checked+span {
	background: #5a5e9a;
	border-color: #4d5185;
}
.switch_checkbox.switch-dark label input:checked+span,.switch_radio.switch-dark label input:checked+span {
	background: #313131;
	border-color: #313131
}
.switch_checkbox.switch-orange label input:checked+span,.switch_radio.switch-orange label input:checked+span {
	background: #f9b954;
	border-color: #f9b954
}
.switch_checkbox.switch-red label input:checked+span,.switch_radio.switch-red label input:checked+span {
	background: red;
	border-color: red
}



.PageView[T="WebStore"]{width:100%;display: flex;align-items: flex-start;}
.PageView[T="WebStore"] .PageNav{width:100%;height: 100%;max-width: 420px;position: relative;padding-left: 14px;overflow: auto;overflow-x: hidden;direction:rtl;padding-right: 20px;}
.PageView[T="WebStore"] .PageNav>*{direction:ltr;}

.PageView[T="WebStore"] .PageNav::-webkit-scrollbar {
    width: 6px!important;
    height: 6px!important
}
.PageView[T="WebStore"] .PageNav::-webkit-scrollbar-thumb {
    background-color: #f7f7fb !important;
}

.PageView[T="WebStore"] .PageNav::-webkit-scrollbar-track {
    background: rgb(255 255 255 / 41%);
}

.PageView[T="WebStore"] .PageNav:before{content:"";width: 1px;height: 100%;background: #E0E0E5;position: absolute;top: 0;left: 0;}

.PageView[T="WebStore"] .PageNav .Item{width:100%;position: relative;margin-bottom: 18px;cursor: pointer;}
.PageView[T="WebStore"] .PageNav .Item:hover{color: #0F6CFF;}
.PageView[T="WebStore"] .PageNav .Item.Active{color: #0F6CFF;}
.PageView[T="WebStore"] .PageNav .Item>.Title{width:100%;font-size: 14px;font-weight: 600;}
.PageView[T="WebStore"] .PageNav .Item>.Text{width:100%;font-size: 11px;padding-top: 4px;}
.PageView[T="WebStore"] .PageNav .Item.Active:before{content:"";width: 1px;border-left: 3px solid #0F6CFF;position: absolute;top: 0px;bottom: 0;left: -15px;}


.PageView[T="WebStore"] .PageNav .Item.Store i.StoreBtn{
	margin-right: 8px;
}

.PageView[T="WebStore"] .List .Item.Store i.StoreBtn{
	margin-right: 8px;
}

.PageView[T="WebStore"] .TabContent{width:100%;height: 100%;display: flex;align-content: flex-start;}
.PageView[T="WebStore"] .Center{width:100%;height: 100%;max-width: 240px;position: relative;padding: 0 16px;}
.PageView[T="WebStore"] .Center:before{content:"";width: 1px;height: 100%;background: #E0E0E5;position: absolute;top: 0;left: 0;}
.PageView[T="WebStore"] .Center:after{content:"";width: 1px;height: 100%;background: #3e6cff;position: absolute;top: 0;left: 0;}
.PageView[T="WebStore"] .Center[T="1"]:after{top: calc((28px * 1) - 18px);height: calc((100% - (28px * 1)) + 18px);}
.PageView[T="WebStore"] .Center[T="2"]:after{top: calc((28px * 2) - 18px);height: calc((100% - (28px * 2)) + 18px);}
.PageView[T="WebStore"] .Center[T="3"]:after{top: calc((28px * 3) - 18px);height: calc((100% - (28px * 3)) + 18px);}
.PageView[T="WebStore"] .Center[T="4"]:after{top: calc((28px * 4) - 18px);height: calc((100% - (28px * 4)) + 18px);}
.PageView[T="WebStore"] .Center[T="5"]:after{top: calc((28px * 5) - 18px);height: calc((100% - (28px * 5)) + 18px);}
.PageView[T="WebStore"] .Center[T="6"]:after{top: calc((28px * 6) - 18px);height: calc((100% - (28px * 6)) + 18px);}

.PageView[T="WebStore"] .Center .Item{width:100%;font-size: 13px;color: #5A5E9A;font-weight: 500;line-height: 18px;position: relative;padding-bottom: 8px;cursor: pointer;display: flex;gap: 5px;align-items: center;}
.PageView[T="WebStore"] .Center .Item.Title{font-weight: 300;position: relative;}
.PageView[T="WebStore"] .Center .Item.Title:before{content:"";width: 10px;height: 1px;border-radius: 100%;background: #3d6cff;position: absolute;top: 9px;left: -15px;}

.PageView[T="WebStore"] .Center .sortable-placeholder{
	width:100%;font-size: 13px;color: #5A5E9A;font-weight: 500;line-height: 18px;position: relative;padding-bottom: 8px;cursor: pointer;display: flex;gap: 5px;align-items: center;
	background-color: #eaeaf4;
	border-radius:4px;
	height: 26px;
}

.PageView[T="WebStore"] .Center .Item:last-child{padding-bottom:0}
.PageView[T="WebStore"] .Center .Item .Move{width: 18px;background: #f7f7fb;padding: 3px 9px;border-radius: 2px;color: #5a5e9a;display:none;font-size: 12px;text-align: center;flex: none;}
.PageView[T="WebStore"] .Center .Item:hover{color: #0F6CFF;}
.PageView[T="WebStore"] .Center .Item:hover .Move{display: flex;align-items: center;justify-content: center;}
.PageView[T="WebStore"] .Center .Item.Active{color: #0F6CFF;}
.PageView[T="WebStore"] .Center .Item.Active:before{content:"";width: 1px;height: 14px;border-radius: 100%;background: #e0e0e5;position: absolute;top: 0px;left: -16px;}
.PageView[T="WebStore"] .Center .Item.Active:after{content:"";width: 14px;height: 14px;border-radius: 100%;background: #3d6cff;position: absolute;top: 0px;left: -23px;}


.PageView[T="WebStore"] .PageRightContent{width:100%}
.PageView[T="WebStore"] .PageRightContent>.HeadBar{width:100%;display: flex;flex-direction: row;justify-content: space-between;background: transparent;height: inherit;padding-bottom: 12px;position: inherit;background: linear-gradient(360deg, #ffffff, transparent);padding: 12px 0px;background: transparent;}
.PageView[T="WebStore"] .PageRightContent>.HeadBar .Item{display: flex;flex-direction: column;border: 1px solid #ffffff;padding: 6px;border-radius: 3px;background: #cccccc12;}
.PageView[T="WebStore"] .PageRightContent>.HeadBar .Item>span:nth-child(1){width:100%;text-align: left;text-transform: uppercase;font-size: 9px;font-weight: bold;}
.PageView[T="WebStore"] .PageRightContent>.HeadBar .Item>span:nth-child(2){width:100%;font-size: 11px;}
.PageView[T="WebStore"] .PageRightContent>.HeadBar .Left{width:100%;display: flex;justify-content: flex-start;gap: 14px;align-items: center;}
.PageView[T="WebStore"] .PageRightContent>.HeadBar .Left .GoBack{width:100%;display: flex;justify-content: flex-start;gap: 14px;align-items: center;}
.PageView[T="WebStore"] .PageRightContent>.HeadBar .Right{width:100%;display: flex;justify-content: flex-end;gap: 14px;align-items: center;}

.PageView[T="WebStore"] .PageRightContent>.Content{width:100%;padding-right: 0px;overflow: auto;}
.PageView[T="WebStore"] .PageRightContent>.Content::-webkit-scrollbar {
    width: 6px!important;
    height: 6px!important
}
.PageView[T="WebStore"] .PageRightContent>.Content::-webkit-scrollbar-thumb {
    background-color: #f7f7fb !important;
}

.PageView[T="WebStore"] .PageRightContent>.Content::-webkit-scrollbar-track {
    background: rgb(255 255 255 / 41%);
}


.PageView[T="WebStore"] .PageRightContent>.Box{width:100%;display: flex;flex-direction: column;border: 1px solid #D6D6E7;margin-bottom: 16px;}
.PageView[T="WebStore"] .PageRightContent>.Box>.BoxTop{width:100%;padding: 10px 16px;display: flex;align-items: center;}
.PageView[T="WebStore"] .PageRightContent>.Box>.BoxTop>.Info{display: flex;flex-direction: column;}
.PageView[T="WebStore"] .PageRightContent>.Box>.BoxTop>.Info .Title{width:100%;font-weight: 600;padding-bottom: 6px;}
.PageView[T="WebStore"] .PageRightContent>.Box>.BoxTop>.Info .Text{width:100%;font-size: 11px;}
.PageView[T="WebStore"] .PageRightContent>.Box>.BoxTop>.BtnList{margin-left: auto;display: flex;gap: 10px;}
.PageView[T="WebStore"] .PageRightContent>.Box>.BoxTop>.BtnList>.Btn{background: #0F6CFF;color: #fff;padding: 4px 12px;border-radius: 4px;cursor: pointer;font-size: 12px;min-height: 29px;display: flex;align-items: center;justify-content: center;}
.PageView[T="WebStore"] .PageRightContent>.Box>.BoxTop>.BtnList>.Btn.Disabled{background: #d4d4d4;pointer-events:none}
.PageView[T="WebStore"] .PageRightContent>.Box>.BoxTop>.Input{display: flex;margin-left: auto;}
.PageView[T="WebStore"] .PageRightContent>.Box>.BoxTop>.Input>input{width:100%;min-width: 380px;padding: 6px;outline: none;color: #000;box-shadow: inset 0px 3px 6px #5A5E9A21;border: 1px solid #D6D6E7;border-radius: 2px;}
.PageView[T="WebStore"] .PageRightContent>.Box>.BoxTop>.Input + .BtnList{margin-left:10px;}
.PageView[T="WebStore"] .PageRightContent>.Box>.BoxBottom{width:100%;background: #FAFAFA;border-top: 1px solid #d6d6e7;display: flex;align-items: center;justify-content: flex-start;padding: 0 5px;}
.PageView[T="WebStore"] .PageRightContent>.Box>.BoxBottom>.Info{display: flex;align-items: center;line-height: 24px;}
.PageView[T="WebStore"] .PageRightContent>.Box>.BoxBottom>.Info>i{
    margin-right: 5px;
}
.PageView[T="WebStore"] .PageRightContent>.Box>.BoxBottom>.Info>span{font-size: 10px;}
.PageView[T="WebStore"] .PageRightContent>.Box>.BoxBottom>.Info>span>strong{width:100%}
.PageView[T="WebStore"] .PageRightContent>.Box>.BoxBottom>.Info>span>strong.R{color: #f00;}
.PageView[T="WebStore"] .PageRightContent>.Box>.BoxBottom>.Info>span>strong.B{color: #0F6CFF;}
.PageView[T="WebStore"] .PageRightContent>.Box>.BoxBottom>.Btn{margin-left: auto;display: flex;border-left: 1px solid #f3f3f3;width: auto;line-height: 24px;font-size: 10px;cursor: pointer;padding: 0 9px;border: transparent;background: transparent;border-left: 1px solid #d6d6e7;border-radius: 0;}
.PageView[T="WebStore"] .PageRightContent>.Box>.BoxBottom>.Btn>i{margin-right: 5px;}
.PageView[T="WebStore"] .PageRightContent>.Box>.BoxBottom>.Btn>span{width:100%}


.PageView[T="WebStore"] .ModSettingsBar{width:100%;display: flex;justify-content: space-between;margin-top: 24px;}
.PageView[T="WebStore"] .ModSettingsBar .Content{width:100%;border: 1px solid #cccccc57;padding: 12px;background: #f7f7fb;border-radius: 4px;margin-right: 24px;}
.PageView[T="WebStore"] .ModSettingsBar .Content .Item{width:100%;display: flex;margin-bottom: 10px;}
.PageView[T="WebStore"] .ModSettingsBar .Content .Item>span:nth-child(1){width:100%;font-weight: 500;}
.PageView[T="WebStore"] .ModSettingsBar .Content .Item>span:nth-child(2){width:100%}
.PageView[T="WebStore"] .ModSettingsBar .SettingsBar{width:100%}
.PageView[T="WebStore"] .ModSettingsBar .SettingsBar{width:100%}


.PageView[T="Firm"]>.Group{width:100%;margin-bottom: 24px;display: flex;gap: 16px;}
.PageView[T="Firm"]>.Group .StoreList{width: 60%;box-shadow: 0px 0px 8px #EFEFF4;border: 1px solid #E2E2E2;border-radius: 4px;padding: 16px;}
.PageView[T="Firm"]>.Group .StoreList .StoreListHead{width:100%;display: flex;align-items: center;justify-content: space-between;border-bottom: 1px dashed;line-height: 34px;}
.PageView[T="Firm"]>.Group .StoreList .StoreListHead .Text{font-weight: 600;}
.PageView[T="Firm"]>.Group .StoreList .StoreListHead .Btn{margin-left: auto;}
.PageView[T="Firm"]>.Group .StoreList .StoreListHead .Btn>i{width:100%}
.PageView[T="Firm"]>.Group .StoreList .StoreListHead .Btn>span{font-size: 11px;cursor: pointer;}

.PageView[T="Firm"]>.Group .StoreList .StoreListContent{width:100%}
.PageView[T="Firm"]>.Group .StoreList .StoreListContent .Table{width:100%}
.PageView[T="Firm"]>.Group .StoreList .StoreListContent .Table table{width:100%}
.PageView[T="Firm"]>.Group .StoreList .StoreListContent .Table table>thead{width:100%}
.PageView[T="Firm"]>.Group .StoreList .StoreListContent .Table table>thead>tr{width:100%;background: transparent;border-bottom: 1px solid #eee;}
.PageView[T="Firm"]>.Group .StoreList .StoreListContent .Table table>thead>tr>th{padding: 8px 0px;font-weight: 400;font-size: 12px;}
.PageView[T="Firm"]>.Group .StoreList .StoreListContent .Table table>tbody{width:100%}
.PageView[T="Firm"]>.Group .StoreList .StoreListContent .Table table>tbody>tr{width:100%}
.PageView[T="Firm"]>.Group .StoreList .StoreListContent .Table table>tbody>tr>td{}


.PageView[T="Firm"]>.Group .Support{width: 30%;max-width: 520px;display: flex;flex-direction: column;gap: 16px;}
.PageView[T="Firm"]>.Group .Support .SupportBox{width:100%;box-shadow: 0px 0px 8px #EFEFF4;border: 1px solid #E2E2E2;border-radius: 4px;min-height: 190px;}
.PageView[T="Firm"]>.Group .Support .SupportBox .SupportBoxHead{width:100%}
.PageView[T="Firm"]>.Group .Support .SupportBox .SupportBoxHead .Text{width:100%}
.PageView[T="Firm"]>.Group .Support .SupportBox .SupportBoxBody{width:100%}


.PageView[T="Firm"]>.Group .Other{width: 270px;flex: none;display: flex;flex-direction: column;gap: 16px;}
.PageView[T="Firm"]>.Group .Other .OtherBox{width:100%;box-shadow: 0px 0px 8px #EFEFF4;border: 1px solid #E2E2E2;border-radius: 4px;min-height: 118px;}
.PageView[T="Firm"]>.Group .Other .OtherBox .Icon{width:100%}
.PageView[T="Firm"]>.Group .Other .OtherBox .Info{width:100%}
.PageView[T="Firm"]>.Group .Other .OtherBox .Info>span:nth-child(1){width:100%}


.PageView[T="Firm"]>.Group .TabList{width:100%;display: flex;justify-content: flex-start;border-bottom: 2px solid #D9D9D9;}
.PageView[T="Firm"]>.Group .TabList .TabItem{line-height: 36px;border-bottom: 2px solid transparent;margin-bottom: -2px;padding: 0 24px;font-weight: 600;cursor: pointer;}
.PageView[T="Firm"]>.Group .TabList .TabItem.Active{
    border-color: #116cff;
}
.PageView[T="Firm"]>.Group .TabView{width:100%;display: none;}
.PageView[T="Firm"]>.Group .TabView.Active{display: block;}


.DateRemaining{display:flex;justify-content: flex-start;gap: 12px;}
.DateRemaining>.Timer{font-size: 12px;line-height: 12px;display: flex;gap: 5px;align-items: center;}
.DateRemaining>.Timer.Red{color: #f00;}
.DateRemaining>.ProgressBar{
    position: relative;
    display: flex;
    width: 220px;
    align-items: center;
}
.DateRemaining>.ProgressBar>.Progress{
    height: 5px;
    background: #EFEFEF;
    width: 100%;
    display: block;
    position: relative;
}
.DateRemaining>.ProgressBar>.Progress>span{
    width: 0%;background: #116cff;display: block;position: absolute;left: 0;top: 0;height: 5px;
}
.DateRemaining>.ProgressBar>.Progress>span:after{
    content:"";
    position: absolute;
    right: -1px;
    top: -2px;
    height: 9px;
    width: 2px;
    background: #116cff;
}
.DateRemaining>.ProgressBar>.Rate{
    font-size: 11px;
    color: #116cff;
    font-weight: 600;
    margin-left: 5px;
}


.VariableItem{display:flex;width:100%;margin-bottom: 7px;}
.VariableItem>div:nth-child(1){cursor:pointer;background: #D6D6E7;height: 34px;width: 100%;display: flex;align-items: center;padding-left: 8px;font-size: 13px;user-select: none;position: relative;}
.VariableItem>div:nth-child(1)>div{
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.VariableItem>div:nth-child(2){background: #FAFAFA;height: 34px;width: 100%;display: flex;align-items: center;padding-left: 8px;font-size: 13px;}

.BtnAccordion{
    background: #F2F7FF;
    color: #136CF8;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min-content;
    padding: 2px 12px;
    border: 1px solid #9AC1FF;
}
.BtnAccordion[S="0"]>i:before{
    content: "\2b"
}
.BtnAccordion[S="1"]>i:before{
    content: "\f068"
}
table.Standart tbody tr td.Icon{
    font-size: 20px;
}
table.Standart.Faq tbody tr.SubList{display: none;}
table.Standart.Faq tbody tr.SubList.Active{display: table-row;}
table.Standart.Faq tbody tr.Active td{background: #f5f9ff;}
table.Standart.Faq tbody tr.SubList.Active td{background: #f5f9ff;padding-right: 8px;}


.Question{width:100%;background: #fff;}
.Question .Header{width:100%;display: flex;justify-content: space-between;align-items: center;padding: 0 40px 0 22px;}
.Question .Header>.Title{font-weight: 600;margin: 14px 0px;}
.Question .Header>.Btn{cursor: pointer;}

.Question .List{width:100%}
.Question .List .Item{width:100%;display: flex;padding: 8px 40px 8px 22px;border-bottom: 1px solid #e6ecf4;}
.Question .List .Item .Text{width:100%}
.Question .List .Item .BtnGroup{width:100%;display: flex;justify-content: flex-end;align-items: center;gap: 8px;}
.Question .List .Item .BtnGroup .Btn{cursor: pointer;}


body.TableItem{right: 390px;transition: right 0.3s;}
body.TableItem.w600{right: 690px;transition: right 0.3s;}
body.TableItem .PanNavArea{left:-300px}
body.TableItem .PanSubNavArea{left:-300px}
.TableItemViewBox{width: 400px;position: fixed;right: -400px;top: 0;transition: all 0.2s;border-left: 1px solid #eaeaf4;z-index: 5;background: #fff;}
.TableItemViewBox.W700{width: 700px;}
body.TableItem .TableItemViewBox.Active{right: 0px;transition: all 0.2s;}
.TableItemViewBox .PopupArea{width:100%}
.TableItemViewBox .PopupArea>.Closed{position: absolute;right: 20px;top: 20px;font-size: 20px;cursor: pointer;}
.TableItemViewBox .PopupArea .TitleBox{width:100%;border-bottom: 1px solid #eaeaf4;margin: 20px 0px 0px 0px;padding-bottom: 14px;padding-left: 14px;}
.TableItemViewBox .PopupArea .TitleBox .Title{width:100%;font-weight: 600;}
.TableItemViewBox .PopupArea .TitleBox .Text{width:100%;font-size: 12px;line-height: 19px;}
.TableItemViewBox .PopupArea .Content{width:100%;display: flex;flex-direction: column;}
.TableItemViewBox .PopupArea .Content .Tab{width:100%;display: flex;align-items: center;border-bottom: 1px solid #eaeaf4;}
.TableItemViewBox .PopupArea .Content .Tab .TabItem{width:100%;line-height: 40px;cursor: pointer;text-align: center;color: #8083A7;font-weight: 600;font-size: 12px;}
.TableItemViewBox .PopupArea .Content .Tab .TabItem.Active{width:100%;border-bottom: 2px solid #3d6cff;color: #1C76F2;}

.TableItemViewBox .PopupArea .Content .TabInfo{width:100%;display: none;}
.TableItemViewBox .PopupArea .Content .TabInfo.Active{    w  idth:100%;display: block;}

.TableItemViewBox .PopupArea .Content .TabInfo .OrderInfo{width:100%;background: #F7F7FF9F;padding: 16px;}
.TableItemViewBox .PopupArea .Content .TabInfo .OrderInfo .Item{width:100%;font-size: 12px;display: flex;justify-content: space-between;line-height: 26px;}
.TableItemViewBox .PopupArea .Content .TabInfo .OrderInfo .Item span:nth-child(1){
    width: 130px;
    flex: none;
}
.TableItemViewBox .PopupArea .Content .TabInfo .OrderInfo .Item span:nth-child(2){width: 8px;flex: none;}
.TableItemViewBox .PopupArea .Content .TabInfo .OrderInfo .Item span:nth-child(3){margin-left: auto;font-weight: 700;}
.TableItemViewBox .PopupArea .Content .TabInfo .OrderInfo .Item span:nth-child(3) .ColorBox{width: 100%;display: flex;border-radius: 15px;align-items: center;overflow: hidden;}
.TableItemViewBox .PopupArea .Content .TabInfo .OrderInfo .Item span:nth-child(3) .ColorBox>div{width: 24px;height: 24px;border-radius: 15px;border: 1px solid #dfdfed;/* box-shadow: 0px 0px 0px 1px #bcbdd5; */position: relative;z-index: 1;flex: none;}
.TableItemViewBox .PopupArea .Content .TabInfo .OrderInfo .Item span:nth-child(3) .ColorBox>span{padding-right: 9px;width: 100%;background: transparent;/* background: #5a5e9a; *//* color: #fff; */text-indent: 10px;font-size: 10px;border: 1px solid #bcbdd5;border-radius: 13px;border-top-left-radius: 0;border-bottom-left-radius: 0;margin-left: -6px;line-height: 18px;flex: auto;}


.TableItemViewBox .PopupArea .Content .TabInfo .SupplyListOrderItem{width:100%;display: flex;flex-direction: column;overflow: auto;}
.TableItemViewBox .PopupArea .Content .TabInfo .SupplyListOrderItem .Item{display: flex;border-bottom: 1px solid #ccc;padding: 4px;}
.TableItemViewBox .PopupArea .Content .TabInfo .SupplyListOrderItem .Item .Bag{
    width: 50px;
    flex: none;
    margin-right: 10px;
}
.TableItemViewBox .PopupArea .Content .TabInfo .SupplyListOrderItem .Item .Bag>input{
    width: 100%;
    border: 0;
    text-align: center;
    line-height: 48px;
    outline: none;
    font-size: 18px;
}
.TableItemViewBox .PopupArea .Content .TabInfo .SupplyListOrderItem .Item .Info{
    width: 130px;
    flex: none;
}
.TableItemViewBox .PopupArea .Content .TabInfo .SupplyListOrderItem .Item .Info>div{
    width: 100%;
    font-size: 12px;
    line-height: 19px;
}


.TableItemViewBox .PopupArea .Content .TabInfo .FastNav{width:100%;display: flex;flex-direction: column;align-items: flex-start;padding-left: 14px;margin-top: 20px;overflow: auto;}
.TableItemViewBox .PopupArea .Content .TabInfo .FastNav .Btn{border-color: #E2E2E2;margin-top: 8px;font-size: 12px;border: 0;padding: 0;}
.TableItemViewBox .PopupArea .Content .TabInfo .FastNav .Btn:before{content:"";width: 13px;height: 3px;background: #3d6cff;border-radius: 400px;margin-right: 6px;}
.TableItemViewBox .PopupArea .Content .TabInfo .FastNav .Btn:hover{color: #3d6cff;text-decoration: underline;}

.TableItemViewBox .PopupArea .Content .TabInfo .ProductList{overflow: auto;}
.TableItemViewBox .PopupArea .Content .TabInfo .ProductList .ProductItem{display: flex;width:100%;background: #F7F7FF9F;padding: 16px;align-items: stretch;border-bottom: 1px solid #e8e8e8;}
.TableItemViewBox .PopupArea .Content .TabInfo .ProductList .ProductItem .Photo{width: 60px;margin-right: 10px;}
.TableItemViewBox .PopupArea .Content .TabInfo .ProductList .ProductItem .Photo>img{width:100%;}
.TableItemViewBox .PopupArea .Content .TabInfo .ProductList .ProductItem .Info{width:100%;display: flex;flex-direction: column;font-size: 12px;}
.TableItemViewBox .PopupArea .Content .TabInfo .ProductList .ProductItem .Info .Name{width:100%;font-weight: 500;margin-bottom: 4px;}
.TableItemViewBox .PopupArea .Content .TabInfo .ProductList .ProductItem .Info .Variation{width:100%;}
.TableItemViewBox .PopupArea .Content .TabInfo .ProductList .ProductItem .Info .Price{width:100%;font-weight: bold;margin-top: auto;}


.TableItemViewBox .PopupArea .Content .TabInfo .ProjectList{width:100%;display: flex;flex-direction: column;align-items: flex-start;padding-left: 14px;margin-top: 20px;overflow: auto;}
.TableItemViewBox .PopupArea .Content .TabInfo .ProjectList .ProductItem{width: 100%;margin-top: 8px;font-size: 12px;border: 0;padding: 0;display: flex;align-items: center;border: 1px solid #e6e6e6;padding: 10px;border-radius: 4px;cursor: pointer;}
.TableItemViewBox .PopupArea .Content .TabInfo .ProjectList .ProductItem>.Text{font-size: 11px;width: 100%;}
.TableItemViewBox .PopupArea .Content .TabInfo .ProjectList .ProductItem>.switch_checkbox{width: 60px;flex: none;}
.TableItemViewBox .PopupArea .Content .TabInfo .ProjectList .ProductItem:before{content:"";width: 13px;height: 3px;background: #3d6cff;border-radius: 400px;margin-right: 6px;}
.TableItemViewBox .PopupArea .Content .TabInfo .ProjectList .ProductItem:hover{color: #3d6cff;}

.TableItemViewBox .PopupArea .Content .Addition{width:100%;margin-top: auto;}
.TableItemViewBox .PopupArea .Content .Addition .Head{width:100%;display: flex;align-items: center;justify-content: space-between;border-top: 1px solid #FFEABE;background: #FFF9EC;line-height: 50px;padding: 0px 12px;position: relative;z-index: 1;cursor: pointer;}
.TableItemViewBox .PopupArea .Content .Addition .Head .Arrow{width: 20px;flex: none;}
.TableItemViewBox .PopupArea .Content .Addition .Head .Title{font-weight: 500;}
.TableItemViewBox .PopupArea .Content .Addition .Head .Total{
    margin-left: auto;
    font-weight: 700;
}




.TableItemViewBox .PopupArea .Content .Addition .Detail{width:100%;position: absolute;bottom: -100%;left: 0;display: flex;flex-direction: column;background: #fff;padding: 24px;box-shadow: 20px -15px 74px -40px;transition: bottom 0.2s;border-radius: 6px 6px 0px 0px;}
.TableItemViewBox .PopupArea .Content .Addition.Show .Detail{bottom: 51px;transition: bottom 0.2s;}
.TableItemViewBox .PopupArea .Content .Addition .Detail .Item{width:100%;display: flex;line-height: 22px;}
.TableItemViewBox .PopupArea .Content .Addition .Detail .Item[P="0"]{display: none;}
.TableItemViewBox .PopupArea .Content .Addition .Detail .Item span:nth-child(1){font-size: 12px;width: 190px;flex: none;}
.TableItemViewBox .PopupArea .Content .Addition .Detail .Item span:nth-child(2){width: 10px;flex: none;}
.TableItemViewBox .PopupArea .Content .Addition .Detail .Item span:nth-child(3){margin-left: auto;font-weight: 600;}

.StandartTabList{width:100%;display: flex;align-items: center;border-bottom: 1px solid #ffffff;margin-bottom: 30px;}
.StandartTabList>.TabItem{line-height: 35px;text-align: center;font-weight: 400;padding: 0 16px;cursor: pointer;}
.StandartTabList>.TabItem.Active{color: #2d6cff;box-shadow: inset 0px -1px 0px 0px,0px 2px 0px 0px;}
.StandartTabList>.TabItem:hover{color: #2d6cff}

.StandartTabView{width:100%;display: none;}
.StandartTabView.Active{display: block;}

.ProjectProggress .Text{line-height: 12px;font-size: 11px;}
.Proggress{width:100%;display: flex;align-items: center;}
.Proggress .Rate{width: 300px;position: relative;height: 12px;background: #ccc;margin-right: 12px;border-radius: 100px;overflow: hidden;}
.Proggress .Rate .Bar{width: 0;position: absolute;height: 12px;background: #2196F3;}
.Proggress .Rate .Text{width:100%;/* display: none; */font-size: 8px;line-height: 12px;padding: 0px 4px;font-weight: 700;position: absolute;color: #fff;}
.Proggress .Info{flex: none;background: #cde6ce;color: #1d3c1e;padding: 0px 6px;border-radius: 4px;text-align: center;font-weight: 500;line-height: 16px;font-size: 10px;}
.Proggress .Info span:nth-child(1){width:100%}
.Proggress .Info span:nth-child(2){width:100%}


.Personal{width:100%;display: flex;align-items: center;}
.Personal .Photo{width: 26px;flex: none;margin-right: 8px;}
.Personal .Photo .ImgBox{width: 28px;height: 28px;border-radius: 3px;color: #fff;font-weight: 500;text-align: center;display: flex;align-items: center;justify-content: center;font-size: 10px;}
.Personal .Info{width:100%;display: flex;flex-direction: column;}
.Personal .Info .Name{width:100%;line-height: 14px;font-size: 12px;font-weight: 500;}
.Personal .Info .Department{width:100%;line-height: 14px;font-size: 11px;color: #5a5e9a;}


.tabulator-row .tabulator-cell.tabulator-frozen {
    background: #fff;
}
.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right {
    border-left: 1px solid #dedede;
    box-shadow: -6px 0px 7px -9px #000;
}









.tabulator-row .BtnList {
    text-align: right;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: linear-gradient(45deg, #f5f9ff54, #e1e8f3);
    display: none;
}

.tabulator-row:hover .TabRowNav {
    display: flex
}

.tabulator-row .BtnList>.BtnIcon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    border-right: 1px solid #5a5e9a36;
    padding-right: 10px;
    cursor: pointer;
    width: auto;
}

.tabulator-row .BtnList>.BtnIcon:last-child {
    padding-right: 0;
    border-right: 0
}

.tabulator-row .BtnList>.BtnIcon:hover {
    color: #000
}

.tabulator-row .BtnList>.BtnIcon>i {
    display: flex;
    font-size: 16px;
    margin-right: 7px
}

.tabulator-row .BtnList>.BtnIcon>span {
    display: flex;
    font-size: 11px
}

.tabulator-row .tabulator-cell{position: initial;}


table.SizeTableCreat{width:100%}
table.SizeTableCreat tr{width:100%}
table.SizeTableCreat tr:last-child>td{border-bottom:1px solid #dfdfed}
table.SizeTableCreat tr>td{border: 1px solid #dfdfed;border-right: 0;border-bottom: 0;position: relative;}
table.SizeTableCreat tr>td input{width:100%;border: 0;outline: none;line-height: 30px;display: block;}
table.SizeTableCreat tr>td i.Alternative{position: absolute;right: 5px;bottom: 3px;border: 1px solid #ccc;padding: 6px 5px;background: #fff;cursor: pointer;display: none;}
table.SizeTableCreat tr>td:hover i.Alternative{display: block;}
table.SizeTableCreat tr>td i.Alternative:hover{border-color: #5a5e9a;}
table.SizeTableCreat tr>td:last-child{border: 0}
table.SizeTableCreat tr>td:nth-child(10){border-right: 1px solid #dfdfed;}


.PageContent[P="OrderDetail"] .PagePartOne{width: 100%;flex: auto;padding: 10px 0px 0px 0px;position: relative;}
.PageContent[P="OrderDetail"] .PagePartTwo{width: 100%;flex: none;max-width: 260px;border: 5px solid #f4f4f6;border-right: 0;border-top: 0;border-bottom: 0;background: #fff;padding: 10px;padding-left: 12px;padding-right: 12px;}
.PageContent[P="OrderDetail"] .PagePartThree{width: calc(55% - 280px);flex: none;min-width: 500px;background: #fff;padding: 10px 0px 0px 0px;padding-left: 0;padding-right: 0;border-left: 5px solid #f4f4f6;}

.PageContent[P="OrderDetail"] .PagePartOne>.Products{width:100%;display: flex;flex-direction: column;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content{width:100%}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content>.Head{width: calc( 100% - 16px);display: flex;border-bottom: 1px dashed #ccc;margin-bottom: 16px;margin-right: 16px;position: relative;justify-content: space-between;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content>.Head .Left{background: #fff;position: absolute;top: -9px;padding-right: 20px;font-weight: 600;color: #2d6cff;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content>.Head .Left>span{width:100%}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content>.Head .Left>i{width:100%}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content>.Head .Right{position: absolute;right: 0;top: -8px;background: #fff;padding-left: 13px;display: flex;gap: 6px;font-size: 12px;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content>.Head .Right>span:nth-child(1){color: #2d6cff;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content>.Head .Right>span + span{border-left: 1px solid #e1e1e1;padding-left: 6px;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content>.Head .Right>span:nth-child(2){color: #FF9800;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body{width:100%;padding: 0px 8px;padding-left: 0;overflow: auto;position: a;}

.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .SupplyTabList{display:flex;gap: 5px;padding-left: 10px;align-items: center;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .SupplyTabList .SupplyTabItem{line-height: 34px;background: #efefef;border-radius: 4px 4px 0px 0px;padding: 0px 5px;font-size: 10px;text-transform: uppercase;font-weight: 600;letter-spacing: 0.6px;border: 1px solid #e5e5eb;border-bottom: 0;cursor: pointer;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .SupplyTabList .SupplyTabItem:hover{background: #f3f3f3;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .SupplyTabList .SupplyTabItem.active{background: #4CAF50;color: #fff;border-color: #4CAF50;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body::-webkit-scrollbar {
    width: 2px!important;
}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body::-webkit-scrollbar-thumb {
    background-color: #e4e4e4;
}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(210,210,210,.3)!important
}

.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup{width:100%;border: 1px solid #e5e5eb;padding: 2px;border-radius: 5px;display: none;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup.active{display: block;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductGroupName{width:100%;margin-bottom: 10px;font-weight: 600;color: #4CAF50;font-size: 11px;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList{width:100%}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem{width:100%;margin-bottom: 16px;border: 1px solid #EAEAEA;border-radius: 5px;position: relative;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem .Badge{background: #f0f0fd;width: auto;font-size: 10px;border-radius: 2px;padding: 2px 5px;color: #5a5e9b;letter-spacing: 0.5px;font-family: sans-serif;font-weight: 500;text-transform: uppercase;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem .Badge.SupplyStatus{position: absolute;right: 10px;top: 0px;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem .Badge.SupplyStatus[SupplyStatus="1"]{background: #c8f594;color: #30510a;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem .Badge.SupplyStatus[SupplyStatus="6"]{background: #c8f594;color: #30510a;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem .Badge.SupplyStatus[SupplyStatus="7"]{background: #c8f594;color: #30510a;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem .Badge.SupplyStatus[SupplyStatus="3"]{background: #c8f594;color: #30510a;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem .Badge.SupplyStatus[SupplyStatus="9"]{background: #c8f594;color: #30510a;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem .Badge.SupplyStatus[SupplyStatus="1"]{background: #c8f594;color: #30510a;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem .Badge.SupplyStatus[SupplyStatus="2"]{background: #47dd4d;color: #375711;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem .Badge.SupplyStatus[SupplyStatus="2"][InvoiceStatus="1"]{background: #ffe9a8;color: #7d6213;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem .Badge.SupplyStatus[SupplyStatus="2"][InvoiceStatus="2"]{background: #78c3ff;color: #262825;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem .Badge.SupplyStatus[SupplyStatus="5"]{background: #ffd2d2;color: #d31a1a;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem .Badge.SupplyStatus[SupplyStatus="5"][MissingSuccess="1"]{background: #f83636;color: #ffffff;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem .Badge.SupplyStatus[SupplyStatus="8"]{background: #ffd2d2;color: #d31a1a;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem[SupplyStatus="0"]{border-color:#b7b6b6}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem[SupplyStatus="1"]{border-color:#8BC34A}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem[SupplyStatus="2"]{border-color:#00BCD4}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem[SupplyStatus="5"]{border-color:#F00}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem[SupplyStatus="8"]{border-color:#FF5722}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem[SupplyStatus="100"]{border-color:#f1794e}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem[SupplyStatus="101"]{border-color:#4c1c0b}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem[SupplyStatus="102"]{border-color:#000}

.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem:last-child{margin-bottom: 0px;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.Detail{width:100%;display: flex;border-radius: 6px 6px 0px 0px;flex-direction: row;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.Detail .Info{width: 100%;display: flex;background: #5A5E9A0B;padding: 8px;border-right: 1px solid #e5e5eb;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.Detail .Info .Photo{width: 81px;flex: none;margin-right: 10px;overflow: hidden;position: relative;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.Detail .Info .Photo>img{width: 100%;border-radius: 6px;overflow: hidden;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.Detail .Info .Detail{width:100%;display: flex;flex-direction: column;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.Detail .Info .Detail>.Name{width:100%;font-weight: 600;font-size: 12px;margin-bottom: 5px;color: #5A5E9A;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.Detail .Info .Detail>.Name>a{width:100%}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.Detail .Info .Detail>.Items{width:100%;display: flex;flex-direction: column;gap: 1px;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.Detail .Info .Detail>.Items>.Item{width: 100%;display: flex;font-size: 11px;justify-content: space-around;margin-bottom: 4px;color: #5A5E9A;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.Detail .Info .Detail>.Items>.Item>span:nth-child(1){width: 200px;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.Detail .Info .Detail>.Items>.Item>span:nth-child(2){width: 10px;flex: none;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.Detail .Info .Detail>.Items>.Item>span:nth-child(3){width:100%}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.Detail .Prices{width: 100px;flex: none;display: flex;align-items: center;justify-content: flex-end;flex-direction: column;gap: 8px;padding: 6px 0px;border-right: 1px solid #e6e6e6;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.Detail .Prices>.Item{display: flex;flex-direction: column;padding: 0px 12px;width: 100%;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.Detail .Prices>.Item>span:nth-child(1){font-size: 8px;color: #5a5e9b;margin-bottom: 2px;font-family: monospace;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.Detail .Prices>.Item>span:nth-child(2){width:100%;font-weight: bold;font-size: 12px;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.Detail .Prices>.Item>span:nth-child(3){width:100%}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.Detail .BtnList{width: 135px;flex: none;padding: 6px 10px;display: flex;gap: 6px;flex-direction: column;justify-content: flex-end;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.Detail .BtnList>.Btn{width:100%;font-size: 12px;color: #5A5E9A;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.Detail .BtnList>.Btn.DropDown{width:100%}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.Detail .BtnList>.Btn.Return{width:100%}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.InfoBar{width:100%;padding: 8px;background: linear-gradient(180deg, #F9F9FD, #EEEEFC);border-top: 1px solid #e5e5eb;display: flex;align-items: center;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.InfoBar>.Left{line-height: 20px;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.InfoBar>.Right{margin-left: auto;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.InfoBar>.Right .DiscountView{width:100%;font-size: 11px;margin-left: auto;color: #5A5E9A;text-decoration: underline;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.InfoBar>.Right .DiscountView>i{width:100%}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.InfoBar>.Right .DiscountView>span{width:100%}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Content .Body .ProductGroup .ProductList .ProductItem>.OrderReturnInfo{width:100%}

.PageContent[P="OrderDetail"] .PagePartOne>.Products>.ColorBox{width:100%;display: flex;margin-top: auto;background: #f9f9f8;justify-content: space-between;padding: 12px 16px;padding-right: 24px;position: absolute;bottom: 0;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.ColorBox .Item{display: flex;align-items: center;gap: 5px;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.ColorBox .Item>.Color{width: 10px;height: 10px;border-radius: 100%;flex: none;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.ColorBox .Item[T="0"]>.Color{background-color:#b7b6b6}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.ColorBox .Item[T="1"]>.Color{background-color:#8BC34A}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.ColorBox .Item[T="2"]>.Color{background-color:#00BCD4}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.ColorBox .Item[T="5"]>.Color{background-color:#F00}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.ColorBox .Item[T="8"]>.Color{background-color:#FF5722}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.ColorBox .Item[T="100"]>.Color{background-color:#f1794e}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.ColorBox .Item[T="101"]>.Color{background-color:#4c1c0b}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.ColorBox .Item[T="102"]>.Color{background-color:#000}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.ColorBox .Item>.Text{width:100%;font-size: 11px;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition{width:100%;background: #fef9ea;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition>.Head{width:100%;display: flex;background: #fef9ea;padding: 10px 24px 12px 16px;border-top: 3px solid #f5f1dd;position: absolute;bottom: 37px;transition: all 0.3s;align-items: center;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition>.Head .Left{width:100%;display: flex;flex-direction: column;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition>.Head .Left>i{width:100%}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition>.Head .Left>.Item{width:100%;display: flex;flex-direction: column;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition>.Head .Left>.Item span:nth-child(1){width:100%;font-size: 11px;font-weight: 400;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition>.Head .Left>.Item span:nth-child(2){width:100%;font-weight: 600;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition .View{background: #fef9ea;width: 100%;padding: 0;transition: all 0.3s;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition .View .Item{width:100%;background: #fef9ea;display: none;align-items: center;justify-content: space-between;line-height: 20px;font-size: 12px;color: #5A5E9A}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition .View .Item.Viewer{display: flex;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition .View .Item>span:nth-child(1){width:100%;background: #fef9ea;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition .View .Item.Grand{position:relative;text-indent:10px}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition .View .Item.Grand>span:nth-child(1):before{font-family: 'Font Awesome 6 Pro';font-weight: 300;content:"\f106";font-size: 13px;position: absolute;top: 1px;left: -13px;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition.show .View .Item.Grand>span:nth-child(1):before{font-family: 'Font Awesome 6 Pro';font-weight: 300;content:"\f107";font-size: 13px;position: absolute;top: 1px;left: -13px;}

.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition .View .Item>span:nth-child(2){text-align: right;width: 100%;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition .View .Item.Total{border-top: 0;font-weight: 700;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition .View .Item[P="0"]{display: none !important;!i;!;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition .View .Item.Total:not([P="0"]){display:flex}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition.show .Head{transition: all 0.3s;}

.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition>.Head .Right{width:100%;display: flex;flex-direction: column;align-content: flex-end;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition>.Head .Right span:nth-child(1){width:100%;text-align: right;font-size: 11px;font-weight: 400;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition>.Head .Right span:nth-child(2){text-align: right;width:100%;font-weight: 600;}

.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition.show .View .Item{line-height: 26px;font-size: 13px;display: flex;}
.PageContent[P="OrderDetail"] .PagePartOne>.Products>.Addition.show .View .Item.Total{line-height: 26px;font-size: 13px;display: flex;border-top: 1px dashed;}


.PageContent[P="OrderDetail"] .PagePartTwo>.GroupBtnList{width:100%;padding: 0;}
.PageContent[P="OrderDetail"] .PagePartTwo>.GroupBtnList:before{display:none}
.PageContent[P="OrderDetail"] .PagePartTwo>.GroupBtnList .Item{width:100%;display: flex;border-bottom: 1px solid #eeeef2;padding: 8px 0px;}
.PageContent[P="OrderDetail"] .PagePartTwo>.GroupBtnList .Item>i{width: 30px;flex: none;display: block;border-right: 1px solid #ccc;margin-right: 10px;}
.PageContent[P="OrderDetail"] .PagePartTwo>.GroupBtnList .Item>.Info{width:100%}
.PageContent[P="OrderDetail"] .PagePartTwo>.GroupBtnList .Item>.Info>.Title{width:100%;font-size: 12px;}
.PageContent[P="OrderDetail"] .PagePartTwo>.GroupBtnList .Item>.Info>.Text{width:100%;font-size: 10px;font-weight: 300;line-height: 13px;}
.PageContent[P="OrderDetail"] .PagePartTwo>.GroupBtnList .Item>.Arrow{width:100%}

.PageContent[P="OrderDetail"] .PagePartThree>.Head{width:100%;display: flex;padding: 8px;align-items: center;}
.PageContent[P="OrderDetail"] .PagePartThree>.Head .Title{width:100%;color: #2d6cff;font-weight: 500;}
.PageContent[P="OrderDetail"] .PagePartThree>.Head .BtnList{width:100%;display: flex;gap: 10px;justify-content: flex-end;margin: 0;}
.PageContent[P="OrderDetail"] .PagePartThree>.Head .BtnList>.Btn{/* padding: 4px; */}

.PageContent[P="OrderDetail"] .PagePartThree>.OrderInfo{width:100%;background: #fbfbfe;padding: 16px;border-top: 3px solid #f4f3f7;border-bottom: 3px solid #f4f3f7;}
.PageContent[P="OrderDetail"] .PagePartThree>.OrderInfo>.Item{width:100%;display: flex;justify-content: space-between;align-items: center;margin-bottom: 8px;font-size: 12px;line-height: 14px;}
.PageContent[P="OrderDetail"] .PagePartThree>.OrderInfo>.Item>span:nth-child(1){width: 230px;flex: none;color: #6a6f89;}
.PageContent[P="OrderDetail"] .PagePartThree>.OrderInfo>.Item>span:nth-child(2){width: 10px;flex: none;}
.PageContent[P="OrderDetail"] .PagePartThree>.OrderInfo>.Item>span:nth-child(3){width:100%;text-align: right;font-weight: 500;}


.PageContent[P="OrderDetail"] .PagePartThree>.TabList{width:100%;display: flex;border-bottom: 3px solid #f4f3f7;justify-content: space-between;padding: 0 16px;}
.PageContent[P="OrderDetail"] .PagePartThree>.TabList .TabItem{width: initial;line-height: 36px;text-align: center;color: #858492;padding: 0 4px;cursor: pointer;}
.PageContent[P="OrderDetail"] .PagePartThree>.TabList .TabItem.Active{box-shadow: 0px 3px 0px 0px #2d6cff;color: #2d6cff;}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab{width:100%;padding: 16px;display: none;overflow: auto;}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab.Active{display: block;}

.PageContent[P="OrderDetail"] .PagePartThree>.Tab .no-content{display: flex;flex-direction: column;/* margin: 30px; */border: 1px solid #eeeef2;border-radius: 5px;padding: 20px;justify-content: center;align-items: center;font-weight: 500;}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .no-content .Icon{display: block;font-size: 35px;margin-bottom: 8px;opacity: 0.4;}


.PageContent[P="OrderDetail"] .PagePartThree>.Tab .history-note{display: flex;flex-direction: column;gap: 10px;overflow: auto;}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .history-note .history-item{display: flex;flex-direction: column;gap: 6px;padding: 5px;border-left: 4px solid;padding-left: 7px;}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .history-note .history-item .history-head{display: flex;flex-direction: column;}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .history-note .history-item .history-head .item{display: flex;}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .history-note .history-item .history-head .item:nth-child(2){display: flex;font-size:10px}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .history-note .history-item .Txt{display: flex;}


.PageContent[P="OrderDetail"] .PagePartThree>.Tab .Item{width:100%;position: relative;padding-left: 15px;}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .Item:before{font-family: 'Font Awesome 6 Pro';font-weight: 600;content:"\f0da";color: #c6c6e3;font-size: 15px;position: absolute;top: 4px;left: -2px;}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .Item.active:before{content:"\f0dd";top:1px}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .Item.active[S="2"]:before{color:#f00}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .Item .ItemHead{width:100%;display: flex;align-items: center;gap: 5px;cursor: pointer;}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .Item .ItemHead span:nth-child(1){
    display: flex;
    width: 22px;
    height: 22px;
    background: #ccc;
    border-radius: 100%;
    align-items: center;
    justify-content: center;
	border:1px solid #D3D3E5;
}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .Item .ItemHead span:nth-child(1)>i{color: #c6c6f3;}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .Item[S="1"] .ItemHead span:nth-child(1)>i{color: #fff;}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .Item[S="2"] .ItemHead span:nth-child(1)>i{color: #fff;}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .Item .ItemHead span:nth-child(1)>i:before {content: "\f00c";font-size: 12px;}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .Item .ItemHead span:nth-child(1){background:#ffffff;color:#fff}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .Item[S="1"] .ItemHead span:nth-child(1){background:#1C76F2;border-color:#1C76F2;color:#fff}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .Item[S="2"] .ItemHead span:nth-child(1){background:#e91e1e;border-color:#e91e1e;color:#fff}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .Item[S="1"] .ItemHead span:nth-child(2){font-weight:500}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .Item[S="2"] .ItemHead span:nth-child(2){font-weight:500;color:#e91e1e}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .Item .ItemHead span:nth-child(2){width:100%;font-weight: 500;color: #5A5E9A;font-size: 13px;font-weight:100}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .Item .ItemBody{width:100%;border-left: 1px solid #ccc;padding: 5px 0px;padding-left: 10px;margin: 10px 0px;margin-left: 10px;color: #5a5e9b;}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .Item:not(.active) .ItemBody>*{display:none}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .Item:not(.active):last-child .ItemBody{display:none}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .Item[S="0"]:last-child{pointer-events:none}
.PageContent[P="OrderDetail"] .PagePartThree>.Tab .Item[S="0"]:last-child .ItemBody{display:none}

.BtnList{display:flex;gap:10px;margin-top: 10px;font-size: 12px;}

.RedText{color:#f00}
.BoxBackColor{
	border: 1px solid #eaeaea;
	padding: 9px;
	border-radius: 4px;
	margin-bottom: 10px;
	color: #5a5e9b;
	font-size: 12px;
	line-height: 17px;
	background: linear-gradient(180deg, #F9F9FD, #EEEEFC);
}
.BoxBackColor:empty{display:none}


.PageView[T="Popup"]{width:100%;display: flex;align-items: flex-start;}
.PageView[T="Popup"] .List{width:100%;display: flex;}
.PageView[T="Popup"] .List .Item{width: calc(33.33%);padding: 16px;background: linear-gradient(333deg, #ffffff, transparent);border-radius: 4px;}
.PageView[T="Popup"] .List .Item .Image{width:100%;height: 126px;background-position: 0 0;background-repeat: no-repeat;background-size: cover;}
.PageView[T="Popup"] .List .Item .Name{width:100%;display: flex;line-height: 26px;font-weight: bold;text-transform: uppercase;}
.PageView[T="Popup"] .List .Item .Pages{width:100%;display: flex;align-items: flex-start;margin-bottom: 8px;}
.PageView[T="Popup"] .List .Item .Pages>span{display: flex;align-items: flex-start;background: #fff;border: 1px solid #f0f0f0;padding: 2px 12px;border-radius: 3px;font-size: 12px;}
.PageView[T="Popup"] .List .Item .Date{width:100%;display: flex;align-items: flex-start;gap: 5px;margin-bottom: 16px;}
.PageView[T="Popup"] .List .Item .Date>span{display: flex;align-items: flex-start;background: #ffffff;font-size: 12px;border-radius: 2px;line-height: 20px;padding: 0px 4px;border: 1px solid #eeeeee;}
.PageView[T="Popup"] .List .Item .Option{width:100%;display: flex;align-items: center;}
.PageView[T="Popup"] .List .Item .Option .Check{width:100%;display: flex;align-items: flex-start;}
.PageView[T="Popup"] .List .Item .Option .BtnList{width:100%;display: flex;align-items: flex-start;margin: 0;justify-content: flex-end;}
.PageView[T="Popup"] .List .Item .Option .BtnList .Btn.Archive{width:100%;display: flex;align-items: flex-start;background: transparent;border: 0;text-decoration: underline;}
.PageView[T="Popup"] .List .Item .Option .BtnList .Btn.Edit{width:100%;display: flex;align-items: flex-start;}



.PageView[T="Upload"]{width:100%;display: flex;align-items: flex-start;padding-bottom: 120px;}
.PageView[T="Upload"] .PageNav{width:100%;height: 100%;max-width: 420px;position: relative;padding-left: 14px;overflow: auto;overflow-x: hidden;direction:rtl;padding-right: 20px;}
.PageView[T="Upload"] .PageNav>*{direction:ltr;}
.PageView[T="Upload"] .PageNav::-webkit-scrollbar {
    width: 0px!important;
    height: 6px!important
}
.PageView[T="Upload"] .PageNav::-webkit-scrollbar-thumb {
    background-color: #f7f7fb !important;
}
.PageView[T="Upload"] .PageNav::-webkit-scrollbar-track {
    background: rgb(255 255 255 / 41%);
}
.PageView[T="Upload"] .PageNav:before{content:"";width: 1px;height: 100%;background: #E0E0E5;position: absolute;top: 0;left: 0;}
.PageView[T="Upload"] .PageNav .Item{width:100%;cursor: pointer;position: relative;margin-bottom: 5px;color: #5a5e9a;}
.PageView[T="Upload"] .PageNav .Item .Head{width:100%;position: relative;cursor: pointer;position: relative;padding: 5px;background: linear-gradient(284deg, #ffffff, #00000000);border-radius: 3px;border: 1px solid #e4e4e4;display: flex;gap: 10px;justify-content: flex-start;}
.PageView[T="Upload"] .PageNav .Item:hover{color: #0F6CFF;}
.PageView[T="Upload"] .PageNav .Item.Active{color: #0F6CFF;}
.PageView[T="Upload"] .PageNav .Item .Head>.Icon{width: 81px;display: flex;justify-content: flex-start;}
.PageView[T="Upload"] .PageNav .Item .Head>.Icon>svg{display: none;height: 30px;}
.PageView[T="Upload"] .PageNav .Item[items="0"] .Head>.Icon>svg[x="empty"]{display: flex;}
.PageView[T="Upload"] .PageNav .Item:not([items="0"]) .Head>.Icon>svg[x="full"]{display: block;}
.PageView[T="Upload"] .PageNav .Item .Head>.Title{width:100%;display: flex;flex-direction: column;}
.PageView[T="Upload"] .PageNav .Item .Head>.Title span:nth-child(1){width:100%;font-size: 11px;font-weight: 600;text-transform: uppercase;}
.PageView[T="Upload"] .PageNav .Item .Head>.Title span:nth-child(2){width:100%;font-size: 11px;color: #3d6cff;}
.PageView[T="Upload"] .PageNav>.Item.Active>.Head:before{content:"";width: 1px;border-left: 3px solid #0F6CFF;position: absolute;top: 0px;bottom: 0;left: -16px;}
.PageView[T="Upload"] .PageRightContent{width:100%;display: flex;flex-direction: column;gap: 20px;}
.PageView[T="Upload"] .PageRightContent>.HeadBar{width:100%;display: flex;flex-direction: row;justify-content: space-between;margin-bottom: 24px;background: transparent;height: inherit;padding-bottom: 12px;position: inherit;}
.PageView[T="Upload"] .PageRightContent>.HeadBar .Left{width:100%;display: flex;justify-content: flex-start;gap: 14px;align-items: center;}
.PageView[T="Upload"] .PageRightContent>.HeadBar .Right{width:100%;display: flex;justify-content: flex-end;gap: 14px;align-items: center;}
.PageView[T="Upload"] .PageRightContent>.Content{width:100%;padding-right: 0px;overflow: auto;}
.PageView[T="Upload"] .PageRightContent>.Content::-webkit-scrollbar {
    width: 6px!important;
    height: 6px!important
}
.PageView[T="Upload"] .PageRightContent>.Content::-webkit-scrollbar-thumb {
    background-color: #f7f7fb !important;
}

.PageView[T="Upload"] .PageRightContent>.Content::-webkit-scrollbar-track {
    background: rgb(255 255 255 / 41%);
}
.PageView[T="Upload"] .PageRightContent>.Box{width:100%;display: flex;flex-direction: column;border: 1px solid #D6D6E7;margin-bottom: 16px;}


.PageView[T="Upload"] .PageRightContent>.List{
    gap: 12px;
    align-items: start;
    justify-items: center;
    column-count: 4;       /* kaç sütun */
    column-gap: 15px;      /* sütunlar arası boşluk */
    padding: 0px;
    display: flex;
    flex-wrap: wrap;
}
.PageView[T="Upload"] .PageRightContent>.List .Item{
    width: calc( 25% - 12px );
    display: flex;
    border: 1px solid #ffffff;
    background: #fff;
    border-radius: 4px;
    flex-direction: column;
    display: inline-block;
    margin-bottom: 15px;
    break-inside: avoid;   /* kutuların kırılmamasını sağlar */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    position: relative;
}
.PageView[T="Upload"] .PageRightContent>.List .Item.Preload{
    width: 100%;
    height: 220px;
    background: linear-gradient(45deg, #ffffff, transparent);
    border-color: #efefef;
}
.PageView[T="Upload"] .PageRightContent>.List .Item.Preload>*{
    display:none
}
.PageView[T="Upload"] .PageRightContent>.List .Item .Title{
    width: 100%;
    display: flex;
    padding: 5px;
    gap: 5px;
    align-items: center;
}
.PageView[T="Upload"] .PageRightContent>.List .Item .Title .Icon>svg{
    height: 16px;
    fill: #f00;
}
.PageView[T="Upload"] .PageRightContent>.List .Item .Title .Name{
    font-size: 11px;
}
.PageView[T="Upload"] .PageRightContent>.List .Item .Image{position: relative;aspect-ratio: 6 / 4;  /* sabit oran: örnek 3:4 */width: 100%;overflow: hidden;}
.PageView[T="Upload"] .PageRightContent>.List .Item .Image>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* opacity: 0; */
    transition: opacity .4s;
}
.PageView[T="Upload"] .PageRightContent>.List .Item .Image>img.loaded {
  opacity: 1;
}
.PageView[T="Upload"] .PageRightContent>.List .Item .Date{
	display:none
}
.PageView[T="Upload"] .PageRightContent>.List .Item .Type{
	display:none
}
.PageView[T="Upload"] .PageRightContent>.List .Item .Mb{
	display:none
}
.PageView[T="Upload"] .PageRightContent>.List .Item .Operation{
	position: absolute;
	left: 0;
	top: 0;
	background: #00000091;
	z-index: 4;
	display: none;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	gap: 12px;
}
.PageView[T="Upload"] .PageRightContent>.List .Item:hover .Operation{
	display: flex;
}

.PageView[T="Upload"] .PageRightContent .dropzone{width:100%;border: 1px dashed #2196F3;padding: 18px;border-radius: 4px;background: linear-gradient(45deg, #ffffff, #2196f32b);}
.PageView[T="Upload"] .PageRightContent .dropzone .dz-message{width:100%}
.PageView[T="Upload"] .PageRightContent .dropzone .dz-message>div{width:100%;font-weight: bold;}
.PageView[T="Upload"] .PageRightContent .dropzone .dz-message>span{width:100%}




.PageView[T="Upload"] .PageRightContent>.AddList{
    display: flex;
           /* kaç sütun */
          /* sütunlar arası boşluk */
    flex-direction: column;
    gap: 4px;
}
.PageView[T="Upload"] .PageRightContent>.AddList .Item{
    border: 1px solid #ffffff;
    background: #fff;
    flex-direction: row;
    display: flex;
    width: 100%;
    break-inside: avoid;   /* kutuların kırılmamasını sağlar */
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    align-items: center;
    justify-content: flex-start;
    position: relative;
}
.PageView[T="Upload"] .PageRightContent>.AddList .Item.Preload{
    width: 100%;
    height: 26px;
    background: linear-gradient(45deg, #ffffff, transparent);
    border-color: #efefef;
}
.PageView[T="Upload"] .PageRightContent>.AddList .Item.Preload>*{
    display: none !important;
}
.PageView[T="Upload"] .PageRightContent>.AddList .Item .Title{
    width: 100%;
    display: flex;
    padding: 5px;
    gap: 5px;
    align-items: center;
}
.PageView[T="Upload"] .PageRightContent>.AddList .Item .Title .Icon{
    display: none;
}
.PageView[T="Upload"] .PageRightContent>.AddList .Item .Title .Icon>svg{
    height: 16px;
    fill: #f00;
}
.PageView[T="Upload"] .PageRightContent>.AddList .Item .Title .Name{
    font-size: 11px;
}
.PageView[T="Upload"] .PageRightContent>.AddList .Item .Image{height: 45px;order: -1;width: 125px;flex: none;}
.PageView[T="Upload"] .PageRightContent>.AddList .Item .Image>img{
    display: block;
    height: 100%;
}
.PageView[T="Upload"] .PageRightContent>.AddList .Item .Date{
	display:none
}
.PageView[T="Upload"] .PageRightContent>.AddList .Item .Type{
	display: flex;
	width: 100px;
	flex: none;
	font-size: 11px;
}
.PageView[T="Upload"] .PageRightContent>.AddList .Item .Mb{
	display: flex;
	width: 100px;
	flex: none;
	font-size: 11px;
}

.PageView[T="Upload"] .PageRightContent>.AddList .Item .Operation{
	position: absolute;
	left: 0;
	top: 0;
	background: #00000017;
	z-index: 4;
	display: none;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	gap: 12px;
	cursor: pointer;
}
.PageView[T="Upload"] .PageRightContent>.AddList .Item:hover .Operation{
	display: flex;
	justify-content: flex-start;
	padding-left: 9px;
}

.PageView[T="DesignNav"]{width:100%;display: flex;align-items: flex-start;padding-bottom: 120px;}
.PageView[T="DesignNav"] .PageNav{width:100%;height: 100%;max-width: 420px;position: relative;padding-left: 14px;overflow: auto;overflow-x: hidden;direction:rtl;padding-right: 20px;}
.PageView[T="DesignNav"] .PageNav>*{direction:ltr;}
.PageView[T="DesignNav"] .PageNav::-webkit-scrollbar {
    width: 0px!important;
    height: 6px!important
}
.PageView[T="DesignNav"] .PageNav::-webkit-scrollbar-thumb {
    background-color: #f7f7fb !important;
}
.PageView[T="DesignNav"] .PageNav::-webkit-scrollbar-track {
    background: rgb(255 255 255 / 41%);
}
.PageView[T="DesignNav"] .PageNav:before{content:"";width: 1px;height: 100%;background: #E0E0E5;position: absolute;top: 0;left: 0;}
.PageView[T="DesignNav"] .PageNav .Item{width:100%;cursor: pointer;position: relative;margin-bottom: 5px;color: #5a5e9a;}
.PageView[T="DesignNav"] .PageNav .Item .Head{width:100%;position: relative;cursor: pointer;position: relative;padding: 5px;background: linear-gradient(284deg, #ffffff, #00000000);border-radius: 3px;border: 1px solid #e4e4e4;}
.PageView[T="DesignNav"] .PageNav .Item:hover{color: #0F6CFF;}
.PageView[T="DesignNav"] .PageNav .Item.Active{color: #0F6CFF;}
.PageView[T="DesignNav"] .PageNav .Item .Head>.NavArea{display: flex;align-items: center;line-height: initial;justify-content: flex-start;}
.PageView[T="DesignNav"] .PageNav .Item .Head>.NavArea>.Title{font-size: 11px;line-height: 12px;color: inherit;}
.PageView[T="DesignNav"] .PageNav .Item .Head.Bold>.NavArea>.Title{
    font-weight:bold
}
.PageView[T="DesignNav"] .PageNav .Item>.Head[rowb="1"]{margin-bottom:20px}
.PageView[T="DesignNav"] .PageNav .Item>.Head[rowb="2"]{margin-bottom:30px}
.PageView[T="DesignNav"] .PageNav .Item>.Head[rowb="3"]{margin-bottom:40px}
.PageView[T="DesignNav"] .PageNav .Item>.Head[rowb="4"]{margin-bottom:50px}
.PageView[T="DesignNav"] .PageNav .Item>.Head[rowb="5"]{margin-bottom:60px}

.PageView[T="DesignNav"] .PageNav .Item .Head>.Text{width:100%;font-size: 10px;padding-top: 2px;display: flex;align-items: center;gap: 5px;}
.PageView[T="DesignNav"] .PageNav .Item .Head>.Text>span.Red{display: flex;width: auto;padding: 1px 4px;background: linear-gradient(45deg, #ffa5a5, #ff7575);border-radius: 2px;color: #ffffff;text-transform: uppercase;font-size: 8px;letter-spacing: 1px;}
.PageView[T="DesignNav"] .PageNav .Item .Head>.Text>span.Green{display: flex;width: auto;padding: 1px 4px;background: linear-gradient(45deg, #4CAF50, #85ee8a);border-radius: 2px;color: #ffffff;text-transform: uppercase;font-size: 8px;letter-spacing: 1px;}
.PageView[T="DesignNav"] .PageNav .Item .Head>.Icon{position: absolute;right: 65px;top: 0px;width: 32px;height: 100%;display: flex;align-items: center;justify-content: center;display: none;}
.PageView[T="DesignNav"] .PageNav .Item .Head>.Icon:hover{background: #cccccc33;}
.PageView[T="DesignNav"] .PageNav .Item .Head:hover>.Icon{display: flex;}
.PageView[T="DesignNav"] .PageNav .Item .Head>.Edit{position: absolute;right: 32px;top: 0px;width: 32px;height: 100%;display: flex;align-items: center;justify-content: center;display: none;}
.PageView[T="DesignNav"] .PageNav .Item .Head>.Edit:hover{background: #cccccc33;}
.PageView[T="DesignNav"] .PageNav .Item .Head:hover>.Edit{display: flex;}
.PageView[T="DesignNav"] .PageNav .Item .Head>.Arrow{position: absolute;right: 0px;top: 0px;width: 32px;height: 100%;align-items: center;justify-content: center;}
.PageView[T="DesignNav"] .PageNav .Item .Head>.NavArea>.Icon.Right:empty{display:none}
.PageView[T="DesignNav"] .PageNav .Item .Head>.NavArea>.Icon.Right{
    display: block;
    font-size: 10px;
    vertical-align: super;
    padding-left: 8px;
    margin-top: -6px;
    font-weight: inherit;
}
.PageView[T="DesignNav"] .PageNav .Item .Head>.MoveAction{position: absolute;right: 95px;top: 0px;width: 32px;height: 100%;display: flex;align-items: center;justify-content: center;display: none;}

.PageView[T="DesignNav"] .PageNav .Item .Head>.NavArea>.Icon.Left:empty{display:none}
.PageView[T="DesignNav"] .PageNav .Item .Head>.NavArea>.Icon.Left:not(:empty){
    display: block;
    font-size: 10px;
    vertical-align: super;
    padding-right: 8px;
    margin-top: -11px;
    font-weight: inherit;
}
.PageView[T="DesignNav"] .PageNav>.Item.Active>.Head:before{content:"";width: 1px;border-left: 3px solid #0F6CFF;position: absolute;top: 0px;bottom: 0;left: -16px;}
.PageView[T="DesignNav"] .PageNav .Item .Subs{width:100%;position: relative;margin-bottom: 3px;cursor: pointer;position: relative;/* background: linear-gradient(284deg, #ffffff, #00000000); */border-radius: 3px;padding-left: 25px;margin-bottom: 8px;}
.PageView[T="DesignNav"] .PageNav .Item .Subs{display:none;}
.PageView[T="DesignNav"] .PageNav .Item.show>.Subs{display:block;}
.PageView[T="DesignNav"] .PageNav .Item .Subs:empty{display:none;}
.PageView[T="DesignNav"] .PageNav .Item .Subs>.Item{padding-top:5px;margin-bottom: 0px;}
.PageView[T="DesignNav"] .PageNav .Item .Subs>.Item:before{content:"";width: 1px;height: 100%;background: #E0E0E5;position: absolute;top: 0;left: -8px;}
.PageView[T="DesignNav"] .PageNav .Item .Subs>.Item:after{content:"";width: 7px;height: 7px;background: #f00;position: absolute;top: 20px;left: -11px;border-radius: 100%;}

.PageView[T="DesignNav"] .PageNav .Item .Subs>.Item.Active:after{content:"";width: 7px;height: 7px;background: #2196F3;position: absolute;top: 20px;left: -11px;border-radius: 100%;}
.PageView[T="DesignNav"] .PageNav .Item .Subs>.Item.Active>.Head:after{content:"";width: 4px;height: initial;background: #2196F3;position: absolute;top: 7px;bottom: 7px;right: -8px;border-radius: 3px;}

.PageView[T="DesignNav"] .PageNav .Item.Store i.StoreBtn{
	margin-right: 8px;
}

.PageView[T="DesignNav"] .List .Item.Store i.StoreBtn{
	margin-right: 8px;
}

.PageView[T="DesignNav"] .PageNav .Item .Head>.Arrow{display: none;}
.PageView[T="DesignNav"] .PageNav .Item[data-sub="1"]>.Head>.Arrow{display: flex;}
.PageView[T="DesignNav"] .PageNav .Item.show[data-sub="1"]>.Head>.Arrow>i{transform: rotate(270deg);transition: all 0.3s;}

.PageView[T="DesignNav"] .PageNav .Item .Subs>.Item[data-sub="1"]>.Head>.Arrow{display: flex;}
.PageView[T="DesignNav"] .PageNav .Item .Subs>.Item.show[data-sub="1"]>.Head>.Arrow>i{transform: rotate(270deg);transition: all 0.3s;}




.PageView[T="DesignNav"] .TabContent{width:100%;height: 100%;display: flex;align-content: flex-start;}
.PageView[T="DesignNav"] .Center{width:100%;height: 100%;max-width: 240px;position: relative;padding: 0 16px;}
.PageView[T="DesignNav"] .Center:before{content:"";width: 1px;height: 100%;background: #E0E0E5;position: absolute;top: 0;left: 0;}
.PageView[T="DesignNav"] .Center:after{content:"";width: 1px;height: 100%;background: #3e6cff;position: absolute;top: 0;left: 0;}
.PageView[T="DesignNav"] .Center[T="1"]:after{top: calc((28px * 1) - 18px);height: calc((100% - (28px * 1)) + 18px);}
.PageView[T="DesignNav"] .Center[T="2"]:after{top: calc((28px * 2) - 18px);height: calc((100% - (28px * 2)) + 18px);}
.PageView[T="DesignNav"] .Center[T="3"]:after{top: calc((28px * 3) - 18px);height: calc((100% - (28px * 3)) + 18px);}
.PageView[T="DesignNav"] .Center[T="4"]:after{top: calc((28px * 4) - 18px);height: calc((100% - (28px * 4)) + 18px);}
.PageView[T="DesignNav"] .Center[T="5"]:after{top: calc((28px * 5) - 18px);height: calc((100% - (28px * 5)) + 18px);}
.PageView[T="DesignNav"] .Center[T="6"]:after{top: calc((28px * 6) - 18px);height: calc((100% - (28px * 6)) + 18px);}

.PageView[T="DesignNav"] .Center .Item{width:100%;font-size: 13px;color: #5A5E9A;font-weight: 500;line-height: 18px;position: relative;padding-bottom: 8px;cursor: pointer;display: flex;gap: 5px;align-items: center;}
.PageView[T="DesignNav"] .Center .Item.Title{font-weight: 300;position: relative;}
.PageView[T="DesignNav"] .Center .Item.Title:before{content:"";width: 10px;height: 1px;border-radius: 100%;background: #3d6cff;position: absolute;top: 9px;left: -15px;}

.PageView[T="DesignNav"] .Center .sortable-placeholder{
	width:100%;font-size: 13px;color: #5A5E9A;font-weight: 500;line-height: 18px;position: relative;padding-bottom: 8px;cursor: pointer;display: flex;gap: 5px;align-items: center;
	background-color: #eaeaf4;
	border-radius:4px;
	height: 26px;
}

.PageView[T="DesignNav"] .Center .Item:last-child{padding-bottom:0}
.PageView[T="DesignNav"] .Center .Item .Move{width: 18px;background: #f7f7fb;padding: 3px 9px;border-radius: 2px;color: #5a5e9a;display:none;font-size: 12px;text-align: center;flex: none;}
.PageView[T="DesignNav"] .Center .Item:hover{color: #0F6CFF;}
.PageView[T="DesignNav"] .Center .Item:hover .Move{display: flex;align-items: center;justify-content: center;}
.PageView[T="DesignNav"] .Center .Item.Active{color: #0F6CFF;}
.PageView[T="DesignNav"] .Center .Item.Active:before{content:"";width: 1px;height: 14px;border-radius: 100%;background: #e0e0e5;position: absolute;top: 0px;left: -16px;}
.PageView[T="DesignNav"] .Center .Item.Active:after{content:"";width: 14px;height: 14px;border-radius: 100%;background: #3d6cff;position: absolute;top: 0px;left: -23px;}


.PageView[T="DesignNav"] .PageRightContent{width:100%}
.PageView[T="DesignNav"] .PageRightContent>.HeadBar{width:100%;display: flex;flex-direction: row;justify-content: space-between;margin-bottom: 24px;background: transparent;height: inherit;padding-bottom: 12px;position: inherit;}
.PageView[T="DesignNav"] .PageRightContent>.HeadBar .Left{width:100%;display: flex;justify-content: flex-start;gap: 14px;align-items: center;}
.PageView[T="DesignNav"] .PageRightContent>.HeadBar .Right{width:100%;display: flex;justify-content: flex-end;gap: 14px;align-items: center;}

.PageView[T="DesignNav"] .PageRightContent>.Content{width:100%;padding-right: 0px;overflow: auto;}
.PageView[T="DesignNav"] .PageRightContent>.Content::-webkit-scrollbar {
    width: 6px!important;
    height: 6px!important
}
.PageView[T="DesignNav"] .PageRightContent>.Content::-webkit-scrollbar-thumb {
    background-color: #f7f7fb !important;
}

.PageView[T="DesignNav"] .PageRightContent>.Content::-webkit-scrollbar-track {
    background: rgb(255 255 255 / 41%);
}


.PageView[T="DesignNav"] .PageRightContent>.Box{width:100%;display: flex;flex-direction: column;border: 1px solid #D6D6E7;margin-bottom: 16px;}
.PageView[T="DesignNav"] .PageRightContent>.Box>.BoxTop{width:100%;padding: 10px 16px;display: flex;align-items: center;}
.PageView[T="DesignNav"] .PageRightContent>.Box>.BoxTop>.Info{display: flex;flex-direction: column;}
.PageView[T="DesignNav"] .PageRightContent>.Box>.BoxTop>.Info .Title{width:100%;font-weight: 600;padding-bottom: 6px;}
.PageView[T="DesignNav"] .PageRightContent>.Box>.BoxTop>.Info .Text{width:100%;font-size: 11px;}
.PageView[T="DesignNav"] .PageRightContent>.Box>.BoxTop>.BtnList{margin-left: auto;display: flex;gap: 10px;}
.PageView[T="DesignNav"] .PageRightContent>.Box>.BoxTop>.BtnList>.Btn{background: #0F6CFF;color: #fff;padding: 4px 12px;border-radius: 4px;cursor: pointer;font-size: 12px;min-height: 29px;display: flex;align-items: center;justify-content: center;}
.PageView[T="DesignNav"] .PageRightContent>.Box>.BoxTop>.BtnList>.Btn.Disabled{background: #d4d4d4;pointer-events:none}
.PageView[T="DesignNav"] .PageRightContent>.Box>.BoxTop>.Input{display: flex;margin-left: auto;}
.PageView[T="DesignNav"] .PageRightContent>.Box>.BoxTop>.Input>input{width:100%;min-width: 380px;padding: 6px;outline: none;color: #000;box-shadow: inset 0px 3px 6px #5A5E9A21;border: 1px solid #D6D6E7;border-radius: 2px;}
.PageView[T="DesignNav"] .PageRightContent>.Box>.BoxTop>.Input + .BtnList{margin-left:10px;}
.PageView[T="DesignNav"] .PageRightContent>.Box>.BoxBottom{width:100%;background: #FAFAFA;border-top: 1px solid #d6d6e7;display: flex;align-items: center;justify-content: flex-start;padding: 0 5px;}
.PageView[T="DesignNav"] .PageRightContent>.Box>.BoxBottom>.Info{display: flex;align-items: center;line-height: 24px;}
.PageView[T="DesignNav"] .PageRightContent>.Box>.BoxBottom>.Info>i{
    margin-right: 5px;
}
.PageView[T="DesignNav"] .PageRightContent>.Box>.BoxBottom>.Info>span{font-size: 10px;}
.PageView[T="DesignNav"] .PageRightContent>.Box>.BoxBottom>.Info>span>strong{width:100%}
.PageView[T="DesignNav"] .PageRightContent>.Box>.BoxBottom>.Info>span>strong.R{color: #f00;}
.PageView[T="DesignNav"] .PageRightContent>.Box>.BoxBottom>.Info>span>strong.B{color: #0F6CFF;}
.PageView[T="DesignNav"] .PageRightContent>.Box>.BoxBottom>.Btn{margin-left: auto;display: flex;border-left: 1px solid #f3f3f3;width: auto;line-height: 24px;font-size: 10px;cursor: pointer;padding: 0 9px;}
.PageView[T="DesignNav"] .PageRightContent>.Box>.BoxBottom>.Btn>i{margin-right: 5px;}
.PageView[T="DesignNav"] .PageRightContent>.Box>.BoxBottom>.Btn>span{width:100%}


.PageView[T="DesignNav"] .ModSettingsBar{width:100%;display: flex;justify-content: space-between;margin-top: 24px;}
.PageView[T="DesignNav"] .ModSettingsBar .Content{width:100%;border: 1px solid #cccccc57;padding: 12px;background: #f7f7fb;border-radius: 4px;margin-right: 24px;}
.PageView[T="DesignNav"] .ModSettingsBar .Content .Item{width:100%;display: flex;margin-bottom: 10px;}
.PageView[T="DesignNav"] .ModSettingsBar .Content .Item>span:nth-child(1){width:100%;font-weight: 500;}
.PageView[T="DesignNav"] .ModSettingsBar .Content .Item>span:nth-child(2){width:100%}
.PageView[T="DesignNav"] .ModSettingsBar .SettingsBar{width:100%}
.PageView[T="DesignNav"] .ModSettingsBar .SettingsBar{width:100%}


.TopNotificationBar{
    position: fixed;
    top: 0px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index:112;
}
.TopNotificationBar .NotificationText{
    background: #000;
    color: #fff;
    font-size: 15px;
    text-transform: uppercase;
    padding: 7px 18px;
    border-radius: 3px;
    transition: all 0.3s;
    position: absolute;
    top: -60px;
}
.TopNotificationBar .NotificationText[T='error']{
    background: #ff0000;
    color: #fff;
}
.TopNotificationBar .NotificationText[T='success']{
    background: #4CAF50;
    color: #fff;
}
.TopNotificationBar .NotificationText.Show{
    transition: all 0.3s;
    top: 10px;
}



body.invoicePageTheBackList .InvoiceTheBack{display: flex;}
.InvoiceTheBack{
    position: fixed;
    bottom: 20px;
    right: 20px;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    background: #5a5e9a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    cursor: pointer;
    display: none;
 }
 .InvoiceTheBack>div{
    position: fixed;
    bottom: 20px;
    right: 20px;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    background: #5a5e9a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    cursor: pointer;
 }
 .InvoiceTheBack>div>i{
     font-size: 23px;
     margin-top: -11px;
 }


 .EntegrationPopup{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #090f3482;
    z-index: 11111;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .EntegrationPopup>.Content{
    background: #fff;
    padding: 24px;
    max-width: 60%;
    border-radius: 4px;
    flex: none;
    min-width: 440px;
    box-shadow: 0px 0px 22px -16px #000;
 }
 .EntegrationPopup>.Content .LoadingIcon{
    font-size: 18px;
 }
 .EntegrationPopup>.Content .LoadingText{
    font-size: 18px;
    margin-bottom: 20px;
 }
 .EntegrationPopup>.Content .alert_text{
    background: #fffef2;
    padding: 8px;
    border: 1px dashed #000;
    border-radius: 3px;
    margin-bottom: 15px;
 }
 .EntegrationPopup>.Content form>input{
    border: 1px solid;
    outline: none;
    width: 100%;
    padding: 11px;
    border-radius: 4px;
    box-shadow: 0px 0px 0px 3px #5a5e9a1f;
    font-size: 12px;
    font-weight: 600;
    color: #5a5e9a;
 }
 .EntegrationPopup>.Content .Item{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 27px;
    gap: 6px;
 }
 .EntegrationPopup>.Content .Item[status="0"]{
    color: #505dc37d;
 }
.EntegrationPopup>.Content .Item[status="1"]{
    color: #4CAF50;
 }
.EntegrationPopup>.Content .Item[status="2"]{
    color: #ff0000;
 }
 .EntegrationPopup>.Content .Item.Success{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 40px;
 }
 .EntegrationPopup>.Content .Item.Error{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 40px;
 }

 
 .BottomNav{position: fixed;bottom: 0;width: 100%;display:none;transition: all 0.4s;}
 .BottomNav>.Container{display: flex;align-items: center;justify-content: center;padding: 8px 16px;gap: 26px;position: relative;z-index: 2;background: #fff;z-index: 100;border-top: 1px solid #efefef;}
 .BottomNav>.Container .Item{border-radius: 50%;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;flex: none;}
 .BottomNav>.Container .Item:nth-child(2){margin-right: 40px;}
 .BottomNav>.Container .Item:nth-child(4){margin-left: 40px;}
 .BottomNav>.Container .Item>i{font-size: 18px;}
 .BottomNav>.Container .Item:hover{}
 .BottomNav>.Container .Item:hover>i{}
 body.Nav .BottomNav>.Container .Item[x='MobilNav']{background: #0d6cff17;}

 .BottomNav>.Container .Item.Center{
    background: #0d6cff;
    color: #fff;
    position: absolute;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-left: -30px;
    bottom: 15px;
}
 .BottomNav>.Container .Item.Center>i{font-size: 26px;transition: all 0.2s;}
 .BottomNav.open>.Container .Item.Center>i{transform: rotate(45deg);transition: all 0.2s;}
 .BottomNav .OtherNavs{position: fixed;bottom: -100%;background: #fff;width: 100%;padding: 12px;border-radius: 6px 6px 0px 0px;z-index: -1;padding-bottom: 35px;transition: all 0.3s;border-top: 1px solid #ccc;}
 .BottomNav.open .OtherNavs{bottom: 56px;transition: all 0.3s;}
 .BottomNav .OtherNavs .Content{display: flex;flex-wrap: wrap;justify-content: center;align-items: center;}
 .BottomNav .OtherNavs .Content>.Item{width: 33.33%;display: flex;flex-direction: column;align-items: center;align-content: center;gap: 4px;padding: 10px 0px;border-right: 1px solid #efefef;border-bottom: 1px solid #efefef;}
 .BottomNav .OtherNavs .Content>.Item>i{display: flex;justify-content: center;align-items: center;width: 100%;font-size: 24px;}
 .BottomNav .OtherNavs .Content>.Item>span{width:100%;text-align: center;font-size: 12px;}

 body .BottomNav .DeviceInfo{display:none;position: fixed;bottom: -100%;background: #fff;width: 100%;padding: 12px;border-radius: 6px 6px 0px 0px;z-index: -1;padding-bottom: 35px;transition: all 0.3s;border-top: 1px solid #ccc;}
 body.deviceinfo .BottomNav .OtherNavs{display:none}
 body.deviceinfo .BottomNav .DeviceInfo{display:block}
 body.deviceinfo .BottomNav.open .DeviceInfo{bottom: 56px;transition: all 0.3s;}

.HeaderBox.Mobil{display:none}
.HeaderBox{width: calc(100% - 32px);padding: 0 12px;margin: 16px 16px;display: flex;align-items: center;height: 58px;position: fixed;z-index: 1;background-color: rgb(255 255 255 / .7);border-radius: 6px;font-size: .875rem;color: #212121;transition: left 250ms ease;box-shadow: rgb(9 30 66 / .18) 0 1px 0, rgb(9 30 66 / .04) 0 1px 1px 1px, rgb(9 30 66 / .09) 0 2px 5px 2px;backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);left: 0;}
.HeaderBox .Container{width:100%;display: flex;align-items: center;justify-content: flex-start;padding: 0;height: 58px;}
.HeaderBox .Container>svg{margin-right: 13px;height: 24px;width: initial;}
.HeaderBox .Container>svg[x="MobilNav"]{display: block;}
.HeaderBox .Container>svg[x="MobilNavClosed"]{display:none}
body.Nav .HeaderBox .Container>svg[x="MobilNav"]{display:none}
body.Nav .HeaderBox .Container>svg[x="MobilNavClosed"]{display:block}

.BottomNav .Customer{position: fixed;bottom: -100%;background: #fff;width: 100%;padding: 12px;border-radius: 6px 6px 0px 0px;z-index: -1;padding-bottom: 35px;transition: all 0.3s;border-top: 1px solid #ccc;}
body.mobCustomer .BottomNav .Customer{bottom: 56px;transition: all 0.3s;}

.BottomNav .Customer .StoreBox{display: flex;box-shadow: 0px 1px 5px #5A5E9A38;border: 1px solid #5A5E9A4E;border-radius: 3px;height: 38px;align-items: center;position: relative;margin-bottom: 19px;}
.BottomNav .Customer .StoreBox .Selected{width:100%;display: flex;padding: 4px;align-items: center;cursor: pointer;}
.BottomNav .Customer .StoreBox:hover .Selected{background: #fff;}
.BottomNav .Customer .StoreBox .Selected .Info{width:100%;display: flex;flex-direction: column;min-width: 200px;}
.BottomNav .Customer .StoreBox .Selected .Info>span:nth-child(1){width:100%;font-size: 12px;font-weight: 600;}
.BottomNav .Customer .StoreBox .Selected .Info>span:nth-child(2){width:100%;font-size: 11px;}
.BottomNav .Customer .StoreBox .Selected>i{font-size: 16px;}
.BottomNav .Customer .StoreBox .Wind{position: absolute;width: 100%;bottom: 100%;left: 0;padding-top: 8px;display:none;background: #fff;}
.BottomNav .Customer .StoreBox:hover .Wind{display:block}
.BottomNav .Customer .StoreBox .Wind .List{width:100%;display: flex;flex-direction: column;background: linear-gradient(
180deg, #ffffff, transparent);padding: 4px;}
.BottomNav .Customer .StoreBox .Wind .List>div{display: flex;flex-direction: column;border: 1px solid #e6e6e6;border-radius: 2px;margin: 2px;padding: 4px;background: #ffffff80;cursor: pointer;}
.BottomNav .Customer .StoreBox .Wind .List>div:hover{background: #5a5e9a;color: #fff;border-color: #5a5e9a;}
.BottomNav .Customer .StoreBox .Wind .List>div>span:nth-child(1){width:100%;font-size: 9px;font-weight: 500;font*we: ;}
.BottomNav .Customer .StoreBox .Wind .List>div>span:nth-child(2){width:100%;font-size: 12px;}



.HeaderBox .Container .Logo{}
.HeaderBox .PanNavAreaLogo{height:inherit;margin: 0;border: 0;gap: 8px;}
.HeaderBox .Container .Logo>img{height: 34px;}
.HeaderBox .Navs{width:100%;display: flex;justify-content: flex-start;}
.HeaderBox .Navs.Desktop{display:flex}
.HeaderBox .Navs.Mobil{display:none}
.HeaderBox .Navs .NavItem{
    margin-right: 0px;
    cursor: pointer;
    position: relative;
}
.HeaderBox .Navs .NavItem>span{background-color: transparent;border: 1px solid transparent;color: #212121;padding: 9px 14px;display: flex;font-weight: 500;border-radius: 24px;transition: 250ms ease all;text-transform: uppercase;align-items: center;line-height: 12px;font-size: 12px;}
.HeaderBox .Navs .NavItem.active>span{background-color: #fff;border: 1px solid #F5F5F5;color: #212121;box-shadow: rgb(9 30 66 / .18) 0 1px 0, rgb(9 30 66 / .04) 0 1px 1px 1px, rgb(9 30 66 / .09) 0 2px 5px 2px;padding: 9px 14px;height: 40px;font-weight: 500;border-radius: 24px;transition: 250ms ease all;}
.HeaderBox .Navs .NavItem>.Wind{width:100%;background: #000;padding: 12px;border-radius: 12px;position: absolute;border: 1px solid #fff;display: none;}
.HeaderBox .Navs .NavItem:hover>.Wind{display:flex;flex-direction: column;}
.HeaderBox .Navs .NavItem>.Wind>.NavItem{display: flex;color: #fff;font-size: 12px;background: transparent;border-radius: 6px;line-height: 32px;padding: 0 10px;cursor: pointer;}
.HeaderBox .Navs .NavItem>.Wind>.NavItem:hover{color: #fff;background: #ffffff36;}
.HeaderBox .Container .Users{display: flex;justify-content: flex-end;margin-left: auto;align-items: center;}
.HeaderBox .Container .Users .Btn{background-color: transparent;border: 1px solid transparent;color: #212121;padding: 8px 14px;display: flex;height: 30px;font-weight: 500;border-radius: 24px;transition: 250ms ease all;text-transform: uppercase;align-items: center;line-height: 36px;font-size: 11px;}
.HeaderBox .Container .Users .Btn.Logout{background: rgb(220 222 255);color: #084db7;margin-left: 6px;}

body .HeaderBox .LoadingIcon{display: none;}
body .HeaderBox .OtherContentArea{display: none;}






















 

@media only screen and (max-width: 768px){
	.Page .HeadBar{display:none}
	.HeaderBox.Mobil{display:block}
	body.OtherContent{/* background: transparent linear-gradient(179deg, #042ae554 -67%, #a96bff 28%, #00188d91 98%) no-repeat padding-box; */transition: all 0.3s;}
	.HeaderBox::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(
		179deg,
		#042AE5 -67%,
		#a96bff 28%,
		#00188D 98%
		) no-repeat padding-box;
		transform: scaleX(0);
		transform-origin: left center;
		backdrop-filter: blur(1px);
		transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
		pointer-events: none;
	}
	body.OtherContent .HeaderBox::before {
		transform: scaleX(1);
	}
	.EntegrationPopup>.Content{width:100%;min-width: 90%;}
    .NotificationBar{display: none;}
   .BottomNav{display:block;}
   .PanNavArea{display: none;}
   .PanSubNavArea{display: none;}

    .LoginContainer .Right .Logo{display:flex}
	.LoginContainer .Left{display: none;}
	.LoginContainer .Right{
	    padding: 24px;
	    background: linear-gradient(180deg,#00188D,#153AF3,#2448FF,#14257B,#020853,#00188D 140% );
	}
	.LoginContainer .Right .Form .Title,.LoginContainer .Right .Form .OrArea>.Text,.LoginContainer .Right .Form .Remember{
        color: #fff;
    }
	.HeaderBox{margin: 14px;width:calc(100% - 28px);padding: 0;transition: all 0.3s;}
    .HeaderBox .Container>svg[x="MobilNav"]{display: flex;}

	.TopNotificationBar .NotificationText{font-size: 10px;left: 10px;right: 10px;font-weight: 100;line-height: 15px;}

    .PageInPopup.Center .PopupArea{width: 100%;max-width: 100%;padding-bottom: 20px;}

   
   .HeaderBox{display:flex;flex-direction: column;}
   .HeaderBox .Container{padding: 9px 12px;}
   .HeaderBox .Navs.Desktop{display:none}
   .HeaderBox .Navs.Mobil{display: none;padding: 0px 16px;padding-bottom: 14px;}
   body.Nav .HeaderBox{height: auto;}
   body.Nav .HeaderBox .Navs.Mobil{display: flex;flex-direction: column;}


   .HeaderBox .Navs .NavItem>.Wind{display:none !important}
   .HeaderBox .Navs .NavItem.active>.Wind{display:flex !important;position: inherit;margin-top: 6px;flex-direction: column;}

   body.OtherContent .PageContent{opacity: 0; transition: opacity 0.2s;}
   body.OtherContent .HeaderBox .Container{display: none;}
   body.OtherContent .HeaderBox .LoadingIcon{display: block;}
   body.OtherContent .HeaderBox .OtherContentArea{display: block;}
   body.OtherContent .BottomNav{bottom:-100%;transition: all 0.4s;}

   body.OtherContent .HeaderBox .OtherContentArea{display: block;position: relative;}
   body.OtherContent .HeaderBox .OtherContentArea .Header{
	    background: linear-gradient(180deg, #3f95ff, #817eff);
	    padding: 11px 16px 9px;
	    border-bottom: 1px solid #ffffff1c;
	    z-index: 2;
	    position: relative;
	  }
		
	body.OtherContent .HeaderBox .OtherContentArea .Header>.DepotName {
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Header>.DepotName>.T {
	    font-size: 16px;
	    line-height: 24px;
	    color: #fff;
	    font-weight: 400;
	    width: initial;
	    margin-bottom: 0px;
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Header>.DepotName>.S {
	    font-size: 12px;
	    color: #fff;
	    font-weight: 200
	}
	body.OtherContent .HeaderBox .OtherContentArea .Header>.Closed {
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 60px;
	    height: 100%;
	    padding: 0;
	    padding-bottom: 20px;
	    display: flex
	;
	    font-size: 18px;
	    background: #fff0;
	    color: #fff;
	    border-radius: 4px;
	    align-items: flex-end;
	    justify-content: center;
	}
	body.OtherContent .HeaderBox .OtherContentArea .Header>.Nav {
	    position: absolute;
	    right: 0;
	    top: 0;
	    width: 60px;
	    height: 100%;
	    padding: 0;
	    padding-bottom: 20px;
	    display: flex;
	    font-size: 18px;
	    background: #fff0;
	    color: #fff;
	    border-radius: 4px;
	    align-items: flex-end;
	    justify-content: center;
	}

   body.OtherContent .HeaderBox .OtherContentArea>.Content{display: flex;position: relative;padding: 10px;height: 100%;flex-direction: column;}
   body.OtherContent .HeaderBox .OtherContentArea .Content form{position: relative;width: 100%;margin-bottom: 30px;}
   body.OtherContent .HeaderBox .OtherContentArea .Content form .KeyboardIcon{position:absolute;right: 10px;top: 10px;font-size: 24px;color: #cbe1ff33;}
   body.OtherContent .HeaderBox .OtherContentArea .Content form .KeyboardIcon.active{color: #cbe1ff;}
   body.OtherContent .HeaderBox .OtherContentArea .Content form>input{width: 100%;border-radius: 4px;border: 1px solid #c399ff;line-height: 50px;padding: 0px 16px;background: #00000042;color: #fff;font-weight: bold;outline: none;}
   body.OtherContent .HeaderBox .OtherContentArea .Content form>input::placeholder{color: #fff;}
   body.OtherContent .HeaderBox .OtherContentArea .Content .Info{display: flex;width: 100%;flex-direction: column;color: #fff;font-size: 12px;font-weight: 100;gap: 2px;}

		
	body.OtherContent .HeaderBox .OtherContentArea .Content .Istatistic {
		float: left;
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 12px;
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .Istatistic .Box {
		float: left;
		width: 100%;
		padding: 0px;
		background: transparent;
		box-shadow: none;
		color: #fff;
		border-left: 1px solid #ffffff38;
	}
	body.OtherContent .HeaderBox .OtherContentArea .Content .Istatistic .Box:nth-child(1) {
		border-left: 0;
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .Istatistic .Box span:nth-child(1) {
		float: left;
		width: 100%;
		font-size: 11px;
		text-align: center
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .Istatistic .Box span:nth-child(2) {
		float: left;
		width: 100%;
		font-size: 14px;
		font-weight: 100;
		text-align: center
	}

	
	
		
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .EntryType {
	    width: 100%;
	    margin-bottom: 20px;
	    display: flex;
	    align-items: center;
	    justify-content: space-between
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .EntryType .EntryTypeTitle {
	    width: inherit;
	    display: flex;
	    font-size: 12px
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .EntryType[T=BagEntry] .EntryTypeTitle {
	    pointer-events: none
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .EntryType[T=BagEntry] .EntryBagCounter {
	    display: flex
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .EntryType .EntryBagCounter {
	    width: -webkit-fill-available;
	    display: none;
	    justify-content: flex-end;
	    color: #fff;
	    font-size: 14px;
	    font-weight: 700;
	    flex-direction: column;
	    align-items: flex-end;
	    align-content: flex-end;
	    text-align: right
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .EntryType .EntryBagCounter>div:nth-child(1) {
	    color: #000;
	    width: 100%;
	    font-size: 12px;
	    letter-spacing: normal;
	    font-weight: 400;
	    line-height: 8px
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .EntryType .EntryBagCounter>div:nth-child(2)>span {
	    margin-left: 3px
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .EntryType .EntryTypeTitle span:nth-child(1) {
	    display: block;
	    background: #fff;
	    padding: 8px;
	    border-radius: 4px 0 0 4px
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .EntryType .EntryTypeTitle span:nth-child(2) {
	    display: block;
	    background: #ffeb3b;
	    padding: 8px;
	    border-radius: 0 4px 4px 0
	}

	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList {
		float: left;
		width: 100%;
		padding: 10px 0;
		overflow: auto;
		max-height: 80vh;
		padding: 10px 16px 34px;
		background: #ffffff1a;
		border-radius: 12px;
		margin-bottom: 7px;
	}

		
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .ProductItem {
	    width: 100%;
	    display: flex;
	    padding: 10px;
	    position: relative;
	    border-radius: 10px;
	    color: #fff;
	    border: 0;
	    margin: 0;
	    box-shadow: none;
	    background: 0 0;
	    margin-bottom: 14px!important
	}
	
	@media only screen and (max-height: 740px) {
	    body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .ProductItem {
	    }
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .ProductItem>.Photo {
	    width: 60px;
	    position: relative;
	    flex: none;
	    z-index: 1;
	    display: block
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .ProductItem>.Photo>img {
	    width: 100%;
	    border-radius: 6px
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .ProductItem>.Photo>.Status {
	    position: absolute;
	    width: 15px;
	    height: 15px;
	    border-radius: 100%;
	    top: -3px;
	    right: -8px
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .ProductItem>.Info {
	    display: flex;
	    flex-direction: column;
	    padding: 0 13px;
	    z-index: 1;
	    width: 100%;
	    justify-content: flex-start
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .ProductItem>.Info>.Name {
	    font-size: 13px;
	    color: #0621a5;
	    line-height: 16px;
	    height: inherit
	}
	
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .ProductItem>.Info>.Desc {
	    font-size: 11px;
	    color: #0621a5;
	    line-height: 12px;
	    height: inherit;
	    margin-bottom: 6px;
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .ProductItem>.Info>.Color {
	    font-size: 12px;
	    color: #0621a5;
	    line-height: 16px
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .ProductItem>.Info>.Code {
	    font-size: 12px;
	    color: #0621a5;
	    line-height: 16px
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .ProductItem>.Info>.Variations {
	    display: flex;
	    margin-top: 6px
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .ProductItem>.Info>.Variations .SizeItem {
	    background: #fff;
	    color: #000;
	    border-radius: 2px;
	    display: flex;
	    align-items: stretch;
	    overflow: hidden;
	    margin: 2px
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .ProductItem>.Info>.Variations .SizeItem>span:nth-child(1) {
	    padding: 4px;
	    font-size: 10px;
	    font-weight: 700
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .ProductItem>.Info>.Variations .SizeItem>span:nth-child(2) {
	    background: #efefef;
	    font-size: 9px;
	    padding: 4px
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .ProductItem>.Nav {
	    width: 20px;
	    flex: none;
	    z-index: 1;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    font-size: 28px;
	    font-weight: 300;
	    color: #0621a5;
	    margin-left: auto
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .ProductItem>.Background {
	    content: "";
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    left: 0;
	    top: 0;
	    overflow: hidden;
	    background-blend-mode: overlay;
	    mix-blend-mode: saturation;
	    border-radius: 10px;
	    opacity: 1;
	    backdrop-filter: brightness(1.7)
	}
	
	body.OtherContent .HeaderBox .OtherContentArea .Content .ProductList .ProductItem>.Background:before {
	    content: "";
	    background: #7bc4ff;
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	    filter: contrast(.82) blur(13px);
	    box-shadow: inset 0 0 0 10px #7bc4ff
	}
    

















        
    .OtherContentArea .VirtualMarketSuccessArea {
        width: 100%;
        background: #00000047;
        min-height: 42px;
        display: flex;
        border-radius: 100px;
    }

    .OtherContentArea .VirtualMarketSuccessArea .Content {
        width: 100%;
        padding: 5px 6px 5px 10px;
        display: flex;
        align-items: center
    }

    .OtherContentArea .VirtualMarketSuccessArea .Content i {
        color: #fff;
        margin-right: 10px
    }

    .OtherContentArea .VirtualMarketSuccessArea .Content span {
        font-size: 13px;
        color: #fff;
        font-weight: 200;
        width: 100%
    }

    .OtherContentArea .VirtualMarketSuccessArea .Content .switch_checkbox {
    }

    .OtherContentArea .VirtualMarketSuccessArea .Content .switch_checkbox label,.switch_radio label {
        padding: 0;
        margin: 0
    }

    .OtherContentArea .VirtualMarketSuccessArea .Content .switch_checkbox label *,.switch_radio label * {
        vertical-align: middle
    }

    .OtherContentArea .VirtualMarketSuccessArea .Content .switch_checkbox label input,.switch_radio label input {
        display: none
    }

    .OtherContentArea .VirtualMarketSuccessArea .Content .switch_checkbox label input+span,.switch_radio label input+span {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 32px;
        background: 0 0;
        border: 1px solid #eeeeee75;
        border-radius: 50px;
        transition: all .3s ease-in-out;
        margin-right: 0
    }

    .OtherContentArea .VirtualMarketSuccessArea .Content .switch_checkbox label input+span small,.OtherContentArea .VirtualMarketSuccessArea .Content .switch_radio label input+span small {
        position: absolute;
        display: block;
        width: 22px;
        height: 22px;
        background: #ffffff80;
        border-radius: 50%;
        transition: all .3s ease-in-out;
        left: 4px;
        top: 4px
    }

    .OtherContentArea .VirtualMarketSuccessArea .Content .switch_checkbox label input:checked+span,.OtherContentArea .VirtualMarketSuccessArea .Content .switch_radio label input:checked+span {
        background: #269bff;
        border-color: #269bff
    }

    .OtherContentArea .VirtualMarketSuccessArea .Content .switch_checkbox label input:checked+span small,.OtherContentArea .VirtualMarketSuccessArea .Content .switch_radio label input:checked+span small {
        left: 50%;
        background: #fff
    }

    .OtherContentArea .VirtualMarketSuccessArea .Content .switch_checkbox.switch-green label input:checked+span,.OtherContentArea .VirtualMarketSuccessArea .Content .switch_radio.switch-green label input:checked+span {
        background: 0 0;
        border-color: #fff
    }

    .OtherContentArea .VirtualMarketSuccessArea .Content .switch_checkbox.switch-dark label input:checked+span,.OtherContentArea .VirtualMarketSuccessArea .Content .switch_radio.switch-dark label input:checked+span {
        background: #313131;
        border-color: #313131
    }

    .OtherContentArea .VirtualMarketSuccessArea .Content .switch_checkbox.switch-orange label input:checked+span,.OtherContentArea .VirtualMarketSuccessArea .Content .switch_radio.switch-orange label input:checked+span {
        background: #f9b954;
        border-color: #f9b954
    }

    .OtherContentArea .VirtualMarketSuccessArea .Content .switch_checkbox.switch-red label input:checked+span,.OtherContentArea .VirtualMarketSuccessArea .Content .switch_radio.switch-red label input:checked+span {
        background: red;
        border-color: red
    }


}


.PageContent table.DesignNav thead tr{width:100%}
.PageContent table.DesignNav thead tr td{border-top: 1px solid #e8e9ed;vertical-align: middle;font-size: 12px;padding: 5px 10px;}



.Page[T=WebSupplyDashboard]{
    width: 100%;
    background:linear-gradient(180deg,#00188D,#153AF3,#2448FF,#14257B,#020853,#00188D 140% );
    position: absolute;
    left: 0;
    transition: all 0s;
    width: 100%;
    height: 100%;
}

.Page[T=WebSupplyDashboard] .HeadArea {
    width: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    padding: 0 20px
}

.Page[T=WebSupplyDashboard] .PageArea {
    width: 100%;
    padding: 0 20px;
    position: relative;
    padding-bottom: 100px
}

.Page[T=WebSupplyDashboard] .HeadArea .LogoBar {
    width: 100%;
    display: flex;
    margin: 36px 0;
    justify-content: flex-start;
    align-items: center
}

.Page[T=WebSupplyDashboard] .HeadArea .Settings {
    width: 100%;
    display: flex;
    margin-left: auto;
    align-items: center;
    justify-content: flex-end
}

.Page[T=WebSupplyDashboard] .HeadArea .Btn {
    background: #fff;
    padding: 9px;
    border-radius: 24px;
    margin-left: 12px;
    font-size: 19px;
    background: 0 0;
    border: 1px solid #fff;
    color: #fff
}

.Page[T=WebSupplyDashboard] .HeadArea .Btn>i {
    display: none
}

.Page[T=WebSupplyDashboard] .HeadArea .Btn.Lock {
    pointer-events: none;
    background: #00000052
}

.Page[T=WebSupplyDashboard] .HeadArea .Btn.Lock>i {
    display: block
}

.Page[T=WebSupplyDashboard] .HeadArea .Btn.Lock:before {
    display: none
}

.Page[T=WebSupplyDashboard] .HeadArea .LogoBar>.Icon {
    background: url(/NewSystem/Library/Img/logo.png);
    display: block;
    height: 41px;
    width: 37px
}

.Page[T=WebSupplyDashboard] .HeadArea .LogoBar>.Text {
    background: url(/NewSystem/Library/Img/logo_logistic_text.png?v454);
    width: 93px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: 50%;
    margin-left: 10px
}

.Page[T=WebSupplyDashboard] .Counter {
    width: 100%;
    background: #ffffff24;
    border-radius: 12px;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    margin-bottom: 11px
}

.Page[T=WebSupplyDashboard] .Counter>.CounterItem {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.Page[T=WebSupplyDashboard] .Counter>.CounterItem:last-child {
    border-left: 1px solid #fff
}

.Page[T=WebSupplyDashboard] .Counter>.CounterItem>.Text {
    font-size: 14px;
    font-weight: 100
}

.Page[T=WebSupplyDashboard] .Counter>.CounterItem>.Count {
    font-size: 22px;
    font-weight: 300;
    margin-left: 10px
}

.Page[T=WebSupplyDashboard] .List {
    width: 100%;
    display: flex;
    flex-direction: column
}

.Page[T=WebSupplyDashboard] .List .ListItem {
    width: 100%;
    height: 70px;
    padding: 16px 18px;
    color: #fff;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    margin-top: 11px;
    -webkit-border-radius: 8px;
    -webkit-overflow: hidden
}

.Page[T=WebSupplyDashboard] .Counter>.CounterItem.Disabled {
    filter: blur(3px);
    mix-blend-mode: overlay;
    pointer-events: none
}

.Page[T=WebSupplyDashboard] .List .ListItem.Disabled {
    /* filter: blur(3px); */
    /* mix-blend-mode: overlay; */
    pointer-events: none
}

.Page[T=WebSupplyDashboard] .List .ListItem.Active {
    background: #192c99;
    border-radius: 8px 8px 0 0
}

.Page[T=WebSupplyDashboard] .List .ListItem.Active>.ListItemBg {
    display: none
}

.Page[T=WebSupplyDashboard] .List .ListItem>.ListItemBg {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #ffffff, transparent);
    mix-blend-mode: overlay;
    opacity: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: absolute;
    top: 0;
    left: 0;
    filter: contrast(.9);
    -webkit-background-blend-mode: overlay;
    background-blend-mode: overlay;
    -webkit-mix-blend-mode: overlay
}

.Page[T=WebSupplyDashboard] .List .ListItem .ListItemLeft {
    width: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center
}

.Page[T=WebSupplyDashboard] .List .ListItem .ListItemLeft>span:nth-child(1) {
    width: 100%;
    font-size: 15px;
    font-weight: 400;
    line-height: 19px
}

.Page[T=WebSupplyDashboard] .List .ListItem .ListItemLeft>span:nth-child(2) {
    width: 90%;
    font-size: 12px;
    font-weight: 100;
    line-height: 15px
}

.Page[T=WebSupplyDashboard] .List .ListItem .ListItemRight {
    width: 50px;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center
}

.Page[T=WebSupplyDashboard] .List .ListItem .ListItemRightCount {
    width: 100%;
    font-size: 14px;
    font-weight: 100;
    line-height: 18px;
    text-align: center
}

.Page[T=WebSupplyDashboard] .List .ListItem .ListItemRightIcon {
    width: 21px;
    color: #fff;
    height: 21px;
    background: #000;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex: none;
    margin-left: 6px;
    transition: all .3s
}

.Page[T=WebSupplyDashboard] .List .ListItem[C="#84D304"] .ListItemRightIcon {
    background: #84d304
}

.Page[T=WebSupplyDashboard] .List .ListItem[C="#bf2f90"] .ListItemRightIcon {
    background: #bf2f90
}

.Page[T=WebSupplyDashboard] .List .ListItem[C="#f9bc06"] .ListItemRightIcon {
    background: #f9bc06
}

.Page[T=WebSupplyDashboard] .List .ListItem[C="#f66102"] .ListItemRightIcon {
    background: #f66102
}

.Page[T=WebSupplyDashboard] .List .ListItem[C="#9c28b7"] .ListItemRightIcon {
    background: #9c28b7
}

.Page[T=WebSupplyDashboard] .List .ListItem[C="#F00"] .ListItemRightIcon {
    background: red
}

.Page[T=WebSupplyDashboard] .List .ListItem .ListItemRightIcon::before {
    content: "\f105";
    font-weight: 600
}

.Page[T=WebSupplyDashboard] .List .ListItem.Active .ListItemRightIcon::before {
    content: "\f107";
    font-weight: 600
}

.Page[T=WebSupplyDashboard] .List .ListSub {
    display: none
}

.Page[T=WebSupplyDashboard] .List .ListSub.Active {
    display: block
}

.Page[T=WebSupplyDashboard] .List .ListSub>.ListItem {
    margin: 0;
    border-radius: 0;
    border-bottom: 1px solid #192c9912
}

.Page[T=WebSupplyDashboard] .List .ListSub .ListItem:last-child {
    border-radius: 0 0 8px 8px
}

.Page[T=WebSupplyDashboard] .List .ListSub>.ListItem .ListItemRightIcon {
    background: 0 0
}




.NextPage {
    position: fixed;
    transform: translate3d(100%,0px,0px);
    transition: transform .2s!important;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(180deg,#042AE5,#00188D)
}

.SubPage {
    position: fixed;
    right: -100%;
    top: 0;
    transition: transform .2s!important;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(180deg,#042AE5,#00188D)
}

body.Next .Page {
    left: -100%;
    transition: all 0s
}

.NextPage.Show {
    transform: translate3d(0%,0px,0px)
}

.SubPage.Show {
    transform: translate3d(-100%,0px,0px)
}

body.Next.Sub .NextPage {
    right: 100%;
    transition: all .4s
}

body.Next .BlueBackground {
    opacity: 0;
    transition: opacity 1s
}

body.Next .BlackBackground {
    opacity: 1
}

body.Next .NextPage .Head {
    padding: 20px
}

body.Next .NextPage .Head {
}

.VirtualMarketSuccessArea {
    width: 100%;
    background: #00000047;
    position: fixed;
    bottom: 273px;
    z-index: 12;
    display: none
}

.VirtualMarketSuccessArea .Content {
    width: 100%;
    padding: 5px 24px;
    display: flex;
    align-items: center
}

.VirtualMarketSuccessArea .Content i {
    color: #fff;
    margin-right: 10px
}

.VirtualMarketSuccessArea .Content span {
    font-size: 13px;
    color: #fff;
    font-weight: 200;
    width: 100%
}

.VirtualMarketSuccessArea .Content .switch_checkbox {
}

.VirtualMarketSuccessArea .Content .switch_checkbox label,.switch_radio label {
    padding: 0;
    margin: 0
}

.VirtualMarketSuccessArea .Content .switch_checkbox label *,.switch_radio label * {
    vertical-align: middle
}

.VirtualMarketSuccessArea .Content .switch_checkbox label input,.switch_radio label input {
    display: none
}

.VirtualMarketSuccessArea .Content .switch_checkbox label input+span,.switch_radio label input+span {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 32px;
    background: 0 0;
    border: 1px solid #eeeeee75;
    border-radius: 50px;
    transition: all .3s ease-in-out
}

.VirtualMarketSuccessArea .Content .switch_checkbox label input+span small,.VirtualMarketSuccessArea .Content .switch_radio label input+span small {
    position: absolute;
    display: block;
    width: 22px;
    height: 22px;
    background: #ffffff80;
    border-radius: 50%;
    transition: all .3s ease-in-out;
    left: 4px;
    top: 4px
}

.VirtualMarketSuccessArea .Content .switch_checkbox label input:checked+span,.VirtualMarketSuccessArea .Content .switch_radio label input:checked+span {
    background: #269bff;
    border-color: #269bff
}

.VirtualMarketSuccessArea .Content .switch_checkbox label input:checked+span small,.VirtualMarketSuccessArea .Content .switch_radio label input:checked+span small {
    left: 50%;
    background: #fff
}

.VirtualMarketSuccessArea .Content .switch_checkbox.switch-green label input:checked+span,.VirtualMarketSuccessArea .Content .switch_radio.switch-green label input:checked+span {
    background: 0 0;
    border-color: #fff
}

.VirtualMarketSuccessArea .Content .switch_checkbox.switch-dark label input:checked+span,.VirtualMarketSuccessArea .Content .switch_radio.switch-dark label input:checked+span {
    background: #313131;
    border-color: #313131
}

.VirtualMarketSuccessArea .Content .switch_checkbox.switch-orange label input:checked+span,.VirtualMarketSuccessArea .Content .switch_radio.switch-orange label input:checked+span {
    background: #f9b954;
    border-color: #f9b954
}

.VirtualMarketSuccessArea .Content .switch_checkbox.switch-red label input:checked+span,.VirtualMarketSuccessArea .Content .switch_radio.switch-red label input:checked+span {
    background: red;
    border-color: red
}

body .NextPage .Head::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: radial-gradient(circle at center,rgb(255 255 255/0%) 60%,rgb(255 255 255/21%) 100%);
    transform: rotate(-30deg)
}

.buz-efekti::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 120%;
    height: 120%;
    background-color: rgba(255,255,255,.2);
    border-radius: 50%
}

body.Sub .Page {
    position: absolute;
    left: -100%;
    transition: all .4s
}

body.Sub .SubPage {
}

body.Sub .BlueBackground {
    opacity: 0;
    transition: opacity .4s
}

body.Sub .BlackBackground {
}

body.Sub .SubPage .Head {
}

body.Next .BottomNavArea>.Overflow {
    width: 100%;
    transition: all .4s
}

body.Sub .BottomNavArea>.Overflow {
    width: 100%;
    transition: all .4s
}



.NextPage .Item {
    width: 100%;
    border-bottom: 1px solid #ffffff26;
    padding: 24px 20px 14px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    height: 70px
}

.NextPage .Item[G=Kargo][P="0"] {
    display: none
}

.NextPage .Item[G=PazarYeri][P="0"] {
    display: none
}

.NextPage .Item.Show {
    border-bottom: 0;
    height: 40px
}

.NextPage .Item:nth-child(n+2) {
    margin-top: 0
}

.NextPage .Item>.ItemLeft {
    width: 100%
}

.NextPage .Item>.ItemLeft>span:nth-child(1) {
    font-size: 16px
}

.NextPage .Item>.ItemRight {
    display: flex;
    justify-content: flex-end
}

.NextPage .Item>.ItemRight>.Info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 14px
}

.NextPage .Item>.ItemRight>.Info>span:nth-child(1) {
    font-size: 14px
}

.NextPage .Item>.ItemRight>.Info>span:nth-child(2) {
    font-size: 10px
}

.NextPage .Item>.ItemRight>.Arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px
}

.NextPage .Item>.ItemRight>.Arrow::before {
    content: "\f105";
    font-weight: 600
}

.NextPage .Item.Active>.ItemRight>.Arrow::before {
    content: "\f107";
    font-weight: 600
}

.NextPage .Head {
    width: 100%;
    height: 100px;
    padding: 0;
    color: #fff;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: flex-end;
    transition: all .4s;
    overflow: hidden;
    left: 0;
    top: 0;
    padding: 20px;
    border-bottom: 1px solid #ffffff40
}

.NextPage .Head>.HeadLeft {
    position: absolute;
    height: calc(100% - 40px);
    display: flex;
    align-items: center;
    font-size: 22px;
    justify-content: flex-start;
    left: 20px;
    bottom: 20px;
    top: 20px;
    width: 50px;
    z-index: 3;
    cursor: pointer
}

.NextPage .Head>.HeadCenter {
    display: flex;
    flex-direction: column;
    align-items: center
}

.NextPage .Head>.HeadCenter>span:nth-child(1) {
    text-align: center;
    font-size: 18px;
    margin-bottom: 6px
}

.NextPage .Head>.HeadCenter>span:nth-child(2) {
    text-align: center;
    font-weight: 100;
    font-size: 14px
}



.SubItemList {
    width: 100%;
    padding: 22px 20px;
    border-bottom: 1px solid #ffffff40;
    padding-top: 0;
    display: none
}

.SubItemList.Show {
    display: block
}

.SubItemList .ListContent {
    width: 100%;
    padding: 18px;
    border-radius: 4px;
    position: relative;
    margin-top: 52px;
    background: #00000054;
    padding-left: 0
}

.SubItemList .ListContent>span {
    position: absolute;
    top: -28px;
    left: 0;
    color: #00ff94;
    font-size: 13px;
    padding: 0 8px;
    border-radius: 4px;
    padding-left: 0
}

.SubItemList .ListContent .Infor {
    width: 100%;
    display: flex
}

.SubItemList .ListContent .Infor .ListContentLeft {
    display: flex
}

.SubItemList .ListContent .Infor .ListContentLeft>.Info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-left: 1px dotted #ffffff63;
    min-width: 80px
}

.SubItemList .ListContent .Infor .ListContentLeft>.Info:first-child {
    border-left: 0
}

.SubItemList .ListContent .Infor .ListContentLeft>.Info>span:nth-child(1) {
    font-size: 12px;
    font-weight: 100
}

.SubItemList .ListContent .Infor .ListContentLeft>.Info>span:nth-child(2) {
    font-size: 20px;
    font-weight: 100
}

.SubItemList .ListContent .Infor .ListContentRight {
    width: 100%;
    display: flex
}

.SubItemList .ListContent .Infor .ListContentRight.w50 {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-left: 18px
}

.SubItemList .ListContent .Infor .ListContentRight>.w50Btn {
    width: calc(50% - 12px);
    border: 1px solid #00d67c;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #00d67c;
    margin: 0 6px 12px;
    padding: 8px;
    flex-direction: column
}

.SubItemList .ListContent .Infor .ListContentRight>.w50Btn.M0 {
    margin-bottom: 0
}

.SubItemList .ListContent .Infor .ListContentRight>.Btn {
    width: 100%;
    border: 1px solid #00d67c;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #00d67c;
    margin-left: 10px;
    background: transparent;
}

.SubItemList .ListContent .Infor .ListContentRight>.Btn:first-child {
    margin: 0
}

.SubItemList .ListContent .Infor .ListContentRight>.Btn>i {
    display: none
}

.SubItemList .ListContent .Infor .ListContentRight>.Btn.Lock>i {
    display: block;
    font-size: 16px;
    color: #fff;
    opacity: .5
}

.SubItemList .ListContent .Infor .ListContentRight>.Btn.Lock {
    background: #0003;
    font-size: 0;
    border-color: transparent
}

.SubItemList .ListContent>.Info {
    width: calc(100% - 22px);
    background: #0003;
    color: #eaeaea;
    font-size: 11px;
    padding: 4px;
    border-radius: 3px;
    display: none;
    text-align: center;
    opacity: .5;
    margin: 10px 0 0 22px
}

.SubItemList .ListContent>.Info>i {
    font-size: 12px;
    margin-right: 5px
}

.SubItemList .ListContent.Alert>.Info {
    display: block
}

.UserSupplyAlert {
    width: 100%;
    background: #f60745;
    height: 40px;
    position: fixed;
    bottom: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    z-index: 10;
    transition: all 1s
}

.UserSupplyAlert>.Icon {
    width: 45px;
    height: 45px;
    border-radius: 100%;
    background: #fff;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center
}

.UserSupplyAlert>.Text {
    width: 100%;
    color: #fff;
    font-size: 12px;
    padding-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px
}

.UserSupplyAlert>.Btn {
    border: 1px solid #fff;
    color: #fff;
    padding: 4px 8px;
    flex: none;
    font-size: 13px;
    background: transparent;
}



.DepotViewContainer {
    position: fixed;
    width: 100%;
    background: #fff;
    z-index: 999999;
    transition: all .3s;
    height: 0;
    overflow: hidden;
    left: 0;
    right: 0;
    bottom: 0
}

.DepotViewContainer.Active {
    height: 100%;
    transition: all .3s;
    overflow: visible;
    bottom: 0
}

.DepotViewContainer .Container {
    width: 100%;
    padding: 15px;
    display: inline-block
}

.DepotViewContainer .Container .Header {
    float: left;
    width: 100%;
    position: relative
}

.DepotViewContainer .Container .Header .DepotName {
    float: left;
    width: 100%
}

.DepotViewContainer .Container .Header .DepotName .T {
    float: left;
    width: 100%;
    font-weight: 600;
    font-size: 14px
}

.DepotViewContainer .Container .Header .DepotName .S {
    float: left;
    font-size: 12px
}

.DepotViewContainer .Container .Header .Closed {
    float: left;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 18px;
    background: #000;
    color: #fff;
    padding: 8px;
    border-radius: 4px
}

.DepotViewContainer .Container .ViewArea {
    float: left;
    width: 100%;
    padding: 20px 0
}

.DepotViewContainer .Container .ViewArea .TabList {
    margin-bottom: 0;
    overflow-x: scroll;
    padding-right: 20px;
}

.DepotViewContainer .Container .ViewArea .TabList .TabItem {
    float: left;
    background: 0 0;
    padding: 10px 12px 5px;
    border-radius: 6px 6px 0 0
}

.DepotViewContainer .Container .ViewArea .TabList .TabItem.Active {
    display: block;
    background: #03a9f4;
    color: #fff
}

.DepotViewContainer .Container .ViewArea .TabViews {
    float: left;
    width: 100%;
    display: none
}

.DepotViewContainer .Container .ViewArea .TabViews.Active {
    display: block;
    border: 1px solid #03a9f4;
    padding: 5px
}

.DepotViewContainer .Container .ViewArea .TabViews .InputArea {
    float: left;
    width: 100%;
    background: #f9f9f9;
    border: 1px solid #ccc;
    padding: 2px;
    border-radius: 4px;
    margin-bottom: 10px
}

.DepotViewContainer .Container .ViewArea .TabViews .InputArea input {
    float: left;
    background: 0 0;
    border: 0;
    padding: 10px;
    width: 100%
}

.DepotViewContainer .Container .ViewArea .TabViews .InputArea input:focus {
    float: left
}

.DepotViewContainer .Container .ViewArea .TabViews .InputArea.Active {
    background: #4caf50;
    color: #fff;
    border-color: #fff
}

.DepotViewContainer .Container .TabViews .DepotView {
    float: left;
    width: 100
}

.DepotViewContainer .Container .TabViews .DepotView select[name=OPERATION] {
    float: left;
    width: 100%;
    margin-right: 5px;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 4px;
    outline: none
}

.DepotViewContainer .Container .TabViews .DepotView .BtnList {
    float: left;
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: center
}

.DepotViewContainer .Container .TabViews .DepotView .BtnList .Btn {
    float: left;
    width: 60%;
    text-align: center;
    padding: 7px 5px;
    margin-right: 5px;
    border-radius: 4px;
    font-size: 13px
}

.DepotViewContainer .Container .TabViews .DepotView .BtnList .Btn.Blue {
    background: #00bcd4;
    color: #fff
}

.DepotViewContainer .Container .TabViews .DepotView .BtnList .Btn.Orange {
    background: #ff5722;
    margin: 0;
    color: #fff
}

.DepotViewContainer .Container .TabViews .DepotView .BtnList .Btn.Log {
    background: #ececec;
    margin: 0;
    color: #3879bb;
    font-size: 24px;
    padding: 0;
    width: 30px;
    flex: none;
    margin-left: 5px
}

.DepotViewContainer .Container .TabViews .DepotView .Istatistic {
    float: left;
    width: 100%;
    display: flex;
    align-items: center
}

.DepotViewContainer .Container .TabViews .DepotView .Istatistic .Box {
    float: left;
    width: 100%;
    padding: 4px;
    background: #fff;
    box-shadow: 0 0 0 1px #ccc
}

.DepotViewContainer .Container .TabViews .DepotView .Istatistic .Box span:nth-child(1) {
    float: left;
    width: 100%;
    font-size: 12px;
    text-align: center
}

.DepotViewContainer .Container .TabViews .DepotView .Istatistic .Box span:nth-child(2) {
    float: left;
    width: 100%;
    font-size: 16px;
    font-weight: 700;
    text-align: center
}

.DepotViewContainer .Container .TabViews .DepotView .ProductList {
    float: left;
    width: 100%;
    padding: 10px 0;
    overflow: auto
}



body .DepotViewContainer .ViewArea {
    background: transparent linear-gradient(179deg,#042AE5 -67%,#a96bff 28%,#00188D 98%) no-repeat padding-box;
    padding: 0;
    position: relative
}

body .DepotViewContainer .Container .Header .Closed {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 100%;
    padding: 0;
    padding-bottom: 20px;
    display: flex;
    font-size: 18px;
    background: #fff0;
    color: #fff;
    border-radius: 4px;
    align-items: flex-end;
    justify-content: center
}

body .DepotViewContainer {
    z-index: 105
}

.DepotViewContainer.Query:before {
    content: "";
    background: #001266db url(/Library/Img/loading_Ajax.svg);
    background-repeat: no-repeat;
    width: 41px;
    height: 48px;
    z-index: 2;
    background-size: 40px;
    position: absolute;
    top: 6px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: 50%;
    z-index: 999;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

body .DepotViewContainer .Container {
    padding: 0
}

body .DepotViewContainer .Container .Header {
    background: linear-gradient(180deg,#3f95ff,#817eff);
    padding: 11px 16px 9px;
    border-bottom: 1px solid #ffffff1c;
    z-index: 2
}

body .DepotViewContainer .Container .Header>.DepotName {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

body .DepotViewContainer .Container .Header>.DepotName>.T {
    font-size: 20px;
    color: #fff;
    font-weight: 400;
    width: initial;
    margin-bottom: 0px;
}

body .DepotViewContainer .Container .Header>.DepotName>.S {
    font-size: 13px;
    color: #fff;
    font-weight: 200
}

body .DepotViewContainer .TabList {
    padding: 7px 16px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ffffff38;
    position: relative;
    top: 0;
    transition: all .3s;
    width: 100%;
    gap: 0;
}

body .DepotViewContainer .TabList.HideArea {
    top: -72px;
    transition: all .3s
}

body .DepotViewContainer .Container .ViewArea .TabList .TabItem {
    background: #0000000a;
    border: 1px solid #ffffff57;
    border-radius: 4px;
    width: calc(50% - 20px);
    flex: none;
    text-align: center;
    padding: 10px;
    color: #fff;
    margin-right: 10px;
}

body .DepotViewContainer .Container .ViewArea .TabList .TabItem.Active {
    background: #fff;
    color: #0924a9
}

body .DepotViewContainer .Container .ViewArea .TabViews.Active {
    border: 0;
    padding: 0px 0;
    position: relative;
    top: -1px;
    transition: all .3s
}

.ItemQuestion {
    width: 100%;
    padding: 5px 14px;
    border: 1px solid #ccc;
    border-left: 0;
    border-right: 0;
    margin-bottom: -1px;
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.ItemQuestion>span {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff
}

.ItemQuestion>span.Index {
    width: 30px;
    height: 30px;
    background: #ccc;
    border-radius: 4px;
    margin-right: 10px
}

.ItemQuestion>span.Index[T="1"] {
    background: #4b00cf;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600
}

.ItemQuestion>span.Index[T="2"] {
    background: #4b00cfb8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600
}

.ItemQuestion>span.Index[T="3"] {
    background: #4b00cf7d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600
}

.ItemQuestion>span.Index[T="4"] {
    background: #4b00cf4d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600
}

.ItemQuestion>span.Index[T="5"] {
    background: #4b00cf21;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600
}

.ItemQuestion>span.Index[T="6"] {
    background: #4b00cf1c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600
}

.ItemQuestion>span.Index[T="7"] {
    background: #4b00cf1c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600
}

.ItemQuestion>span.Index[T="8"] {
    background: #4b00cf1c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600
}

.ItemQuestion>span.Index[T="9"] {
    background: #4b00cf1c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600
}

.ItemQuestion>div:nth-child(3) {
    margin-left: auto
}

.ItemQuestion>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    min-width: 100px;
    margin-right: 10px
}

.ItemQuestion>div>span:first-child {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600
}

.ItemQuestion>div>span:last-child {
    font-size: 17px;
    font-weight: 700;
    line-height: 18px
}

.ItemQuestion>i {
    font-size: 14px;
    color: #fff
}

body .DepotViewContainer .Container .ViewArea .TabViews.HideArea {
    top: -930px;
    transition: all .3s
}

body .DepotViewContainer .Container .ViewArea .TabViews>.BarcodeArea {
    width: 100%;
    padding: 0 20px;
    padding-top: 40px;
    position: relative;
    top: 0;
    margin: 0;
    transition: all .3s;
    z-index: 4;
    background: 0 0
}

body .DepotViewContainer .Container .TabViews .DepotView {
    width: 100%
}

body .DepotViewContainer .Container .ViewArea .TabViews>.BarcodeArea.Active {
    position: relative;
    top: -140px;
    margin-bottom: -125px
}

body .DepotViewContainer .Container .ViewArea .TabViews>.BarcodeArea>.Input {
    width: 100%;
    display: none;
    height: 72px
}

body .DepotViewContainer .Container .ViewArea .TabViews>.BarcodeArea>.Input>form {
    width: 100%;
    display: flex
}

body .DepotViewContainer .Container .ViewArea .TabViews>.BarcodeArea>.Input.Active {
    display: flex
}

body .DepotViewContainer .Container .ViewArea .TabViews>.BarcodeArea>.Input input {
    width: 100%;
    background: #a657ff;
    border: 1px solid #ea98ff;
    border-radius: 31px;
    margin-right: 10px;
    background-blend-mode: overlay;
    text-indent: 24px;
    color: #fff;
    font-size: 14px;
    height: 61px;
    line-height: 61px;
    outline: none
}

body .DepotViewContainer .Container .ViewArea .TabViews>.BarcodeArea>.Input input::placeholder {
    color: #ffffff7d
}

body .DepotViewContainer .Container .ViewArea .TabViews>.BarcodeArea>.Input .DeviceChange {
    width: 61px;
    height: 61px;
    flex: none;
    position: relative
}

body .DepotViewContainer .Container .ViewArea .TabViews>.BarcodeArea>.Input .DeviceChange>span {
    position: absolute;
    top: -34px;
    right: 0;
    color: #ffffff85;
    font-size: 9px;
    width: 300px;
    text-align: right;
    font-weight: lighter
}

body .DepotViewContainer .Container .ViewArea .TabViews>.BarcodeArea>.Input .DeviceChange>span::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 28px;
    width: 0;
    height: 13px;
    border: .5px dashed #fff6
}

body .DepotViewContainer .Container .ViewArea .TabViews>.BarcodeArea>.Input .DeviceChange>.Icon {
    width: 61px;
    background: #fff;
    height: 61px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #1626b6;
    box-shadow: 0 0 0 1px #fff;
    flex-direction: column
}

body .DepotViewContainer .Container .ViewArea .TabViews>.BarcodeArea>.Input .DeviceChange>.Icon>img {
    height: 21px
}

body .DepotViewContainer .Container .ViewArea .TabViews>.BarcodeArea>.Input .DeviceChange>.Icon>span {
    font-size: 8px;
    text-align: center;
    color: #0e34ed;
    font-weight: 700;
    line-height: 8px;
    margin-top: 4px;
    width: 40px
}

body .DepotViewContainer .Container .ViewArea .TabViews>.BarcodeArea>.Input .CamScreen {
    width: 100%;
    margin-right: 10px;
    position: relative;
    border: 3px solid #fff;
    border-radius: 6px
}

body .DepotViewContainer .Container .ViewArea .TabViews>.BarcodeArea>.Input .CamScreen>div {
    width: 100%;
    background: #000;
    height: 66px;
    border-top: 3px solid #9263fb;
    position: relative;
    z-index: 1;
    border-radius: 6px;
    border-left: 3px solid #9263fb;
    border-right: 3px solid #9a65fc;
    border-bottom: 3px solid #a36aff
}

body .DepotViewContainer .Container .ViewArea .TabViews>.BarcodeArea>.Input .CamScreen>span:nth-child(2) {
    position: absolute;
    background: linear-gradient(182deg,#9263fb 4%,#a36aff 84%);
    top: -3px;
    left: 32px;
    right: 32px;
    bottom: -3px
}

body .DepotViewContainer .Container .ViewArea .TabViews>.BarcodeArea>.Input .CamScreen>span:nth-child(3) {
    position: absolute;
    background: #9c67fe;
    top: 22px;
    left: -3px;
    right: -3px;
    bottom: 22px
}

body .DepotViewContainer .Container .TabViews .Istatistic .Box {
    background: 0 0;
    box-shadow: none;
    padding: 10px 0
}

body .DepotViewContainer .Container .TabViews .Istatistic .Box:after {
    content: "";
    background: 0 0;
    box-shadow: 1px 0 0 0 #ffffff59;
    height: 15px;
    display: block;
    position: relative;
    top: 13px
}

body .DepotViewContainer .Container .TabViews .Istatistic .Box:last-child:after {
    display: none
}

body .DepotViewContainer .Container .TabViews .Istatistic .Box>span:nth-child(1) {
    font-size: 11px;
    color: #fff;
    font-weight: 200
}

body .DepotViewContainer .Container .TabViews .Istatistic .Box>span:nth-child(2) {
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    line-height: 24px
}

body .DepotViewContainer .Container .TabViews .ProductList {
    padding: 16px;
    overflow: auto
}

body .DepotViewContainer .Container .TabViews .BarcodeArea>.Input {
    width: 100%;
    display: none;
    height: 72px
}

body .DepotViewContainer .Container .TabViews .BarcodeArea>.Input>form {
    width: 100%;
    display: flex
}

body .DepotViewContainer .Container .TabViews .BarcodeArea>.Input.Active {
    display: flex
}

body .DepotViewContainer .Container .TabViews .BarcodeArea>.Input input {
    width: 100%;
    background: #a657ff;
    border: 1px solid #ea98ff;
    border-radius: 31px;
    margin-right: 10px;
    background-blend-mode: overlay;
    text-indent: 24px;
    color: #fff;
    font-size: 14px;
    height: 61px;
    line-height: 61px;
    outline: none
}

body .DepotViewContainer .Container .TabViews .BarcodeArea>.Input input::placeholder {
    color: #fff
}

body .DepotViewContainer .Container .TabViews .ProductItem {
    width: 100%;
    display: flex;
    padding: 18px 4px 18px 18px;
    position: relative;
    border-radius: 22px;
    -webkit-border-radius: 22px;
    color: #fff;
    border: 0;
    margin: 0;
    box-shadow: none;
    background: 0 0;
    margin-bottom: 14px!important
}

@media only screen and (max-height: 740px) {
    body .DepotViewContainer .Container .TabViews .ProductItem {
    }
}

body .DepotViewContainer .Container .TabViews .ProductItem>.Photo {
    width: 60px;
    position: relative;
    flex: none;
    z-index: 1;
    display: block
}

body .DepotViewContainer .Container .TabViews .ProductItem>.Photo>img {
    width: 100%;
    border-radius: 6px
}

body .DepotViewContainer .Container .TabViews .ProductItem>.Photo>.Status {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    top: -3px;
    right: -8px
}

body .DepotViewContainer .Container .TabViews .ProductItem>.Info {
    display: flex;
    flex-direction: column;
    padding: 0 13px;
    z-index: 1;
    width: 100%;
    justify-content: flex-start
}

body .DepotViewContainer .Container .TabViews .ProductItem>.Info>.Name {
    font-size: 13px;
    color: #0621a5;
    line-height: 16px;
    height: inherit
}


body .DepotViewContainer .Container .TabViews .ProductItem>.Info>.Desc {
    font-size: 11px;
    color: #0621a5;
    line-height: 12px;
    height: inherit;
    margin-bottom: 6px;
}

body .DepotViewContainer .Container .TabViews .ProductItem>.Info>.Color {
    font-size: 12px;
    color: #0621a5;
    line-height: 16px
}

body .DepotViewContainer .Container .TabViews .ProductItem>.Info>.Code {
    font-size: 12px;
    color: #0621a5;
    line-height: 16px
}

body .DepotViewContainer .Container .TabViews .ProductItem>.Info>.Variations {
    display: flex;
    margin-top: 6px
}

body .DepotViewContainer .Container .TabViews .ProductItem>.Info>.Variations .SizeItem {
    background: #fff;
    color: #000;
    border-radius: 2px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    margin: 2px
}

body .DepotViewContainer .Container .TabViews .ProductItem>.Info>.Variations .SizeItem>span:nth-child(1) {
    padding: 4px;
    font-size: 10px;
    font-weight: 700
}

body .DepotViewContainer .Container .TabViews .ProductItem>.Info>.Variations .SizeItem>span:nth-child(2) {
    background: #efefef;
    font-size: 9px;
    padding: 4px
}

body .DepotViewContainer .Container .TabViews .ProductItem>.Nav {
    width: 20px;
    flex: none;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 300;
    color: #0621a5;
    margin-left: auto
}

body .DepotViewContainer .Container .TabViews .ProductItem>.Background {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    background-blend-mode: overlay;
    mix-blend-mode: saturation;
    border-radius: 22px;
    opacity: 1;
    backdrop-filter: brightness(1.7)
}

body .DepotViewContainer .Container .TabViews .ProductItem>.Background:before {
    content: "";
    background: #7bc4ff;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    filter: contrast(.82) blur(13px);
    box-shadow: inset 0 0 0 10px #7bc4ff
}

body .DepotViewContainer .Container .Header .Nav {
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
    height: 100%;
    padding: 0;
    padding-bottom: 20px;
    display: flex;
    font-size: 30px;
    background: #fff0;
    color: #fff;
    border-radius: 4px;
    align-items: flex-end;
    justify-content: center
}

body .DepotViewContainer .ViewArea {
    background: transparent linear-gradient(179deg,#042AE5 -67%,#a96bff 28%,#00188D 98%) no-repeat padding-box;
    padding: 0;
    position: relative
}




body .Popup_v2 {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999999999;
    outline: 0;
    overflow-y: auto;
    height: 100%;
    top: auto;
    padding-right: 0;
    background: rgba(0,0,0,.47)
}

body .Popup_v2 .Modal {
    -ms-transform: translate(0,75%);
    -ms-transform: translate(0,0);
    position: relative;
    width: auto;
    margin: 10px;
    transition: all .2s!important;
    margin: 0 auto;
    display: table;
    transform: translate3d(0,0,0);
    overflow: auto;
    width: 80%
}

body .Popup_v2 .Modal .Htm {
    display: flex;
    width: 100%;
    text-align: center;
    vertical-align: middle
}


body .Popup_v2.Mobil {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 107;
    outline: 0;
    overflow-y: auto;
    height: 100%;
    top: auto;
    padding-right: 0;
    background: 0 0;
    display: flex;
    align-items: flex-end
}

body .Popup_v2.Mobil.Bluer {
    filter: blur(4px) brightness(.8) contrast(.9);
    background-blend-mode: color-dodge;
    mix-blend-mode: inherit;
    transition: all .3s
}

body .Popup_v2.Mobil .PopupOwerflow {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    outline: 0;
    overflow-y: auto;
    height: 100%;
    top: auto;
    padding-right: 0;
    background: #00000014;
    mix-blend-mode: normal;
    opacity: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px)
}

body .Popup_v2.Mobil .PopupOwerflow.Dark {
    background: #00000017;
    mix-blend-mode: normal;
    opacity: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px)
}

body .Popup_v2 .Modal.center-xs {
    max-width: 400px
}

body .Popup_v2 .Modal.center-sm {
    max-width: 600px
}

body .Popup_v2 .TabList{width:100%;margin-bottom: 16px;position: relative;display: flex;justify-content: flex-start;align-items: center;gap: 4px;}
body .Popup_v2 .TabList .TabItem{background: #ffffff;border: 2px solid #dedee6;padding: 8px 12px;border-radius: 4px;cursor: pointer;font-weight: 600;}
body .Popup_v2 .TabList .TabItem:hover{border-color : #116cff;color: #135e9a;}
body .Popup_v2 .TabList .TabItem.Active{background: #edf7ff;border-color : #116cff;color: #135e9a;}
body .Popup_v2 .TabView{display: none;}
body .Popup_v2 .TabView.Active{display: block;}

body.android .Page[T=WebSupplyDashboard] .List .ListItem.Disabled {
    filter:none;
    opacity:0.3;
}
body.android .Page[T=WebSupplyDashboard] .List .ListItem>.ListItemBg {
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background: #2647ff;
    box-shadow: 0 2px 6px #00000080;
}




@media only screen and (max-width: 768px) {
	body.HomePage .Page{margin-left:0}
	
    @keyframes pageTransitionIn {
    0% {
        opacity:0;
        transform: translateX(-50vw);
    }
    100% {
        opacity:1;
        transform: translateX(0);
    }
    }
    @keyframes pageTransitionOut {
    0% {
        opacity:1;
        transform: translateX(0);
    }
    100% {
        opacity:0;
        transform: translateX(-50vw);
    }
    }
    body.android .Page {
    position: absolute;
    left: 0;
    right:0;
    transition: none;
    width: 100vw;
    height: 100%;
    opacity: 0;
    z-index:1;
    animation: pageTransitionIn .8s forwards normal 1;
    }
    body.android.Next .Page {
    left:0;
    transition: none;
    transform: none;
    opacity:1;
    z-index:2;
    animation: pageTransitionOut .8s forwards normal 1;
    pointer-events:none;
    }
    @keyframes nextPageTransitionIn {
    0% {
        opacity:0;
        transform: translateX(50vw);
    }
    100% {
        opacity:1;
        transform: translateX(0);
    }
    }
    @keyframes nextPageTransitionOut {
    0% {
        opacity:1;
        transform: translateX(0);
    }
    100% {
        opacity:0;
        transform: translateX(50vw);
    }
    }
    body.android .NextPage {
    position: fixed;
    right: unset;
    transition: none;
    width: 100vw;
    left: 0;
    height: 100%;
    z-index: 0;
    opacity: 0;
    transform: none;
    animation: nextPageTransitionOut .8s forwards normal 1;
    }
    body.android.Next .NextPage {
    right: 0;
    width: 100vw;
    transition: none;
    left: 0;
    opacity: 1;
    z-index:1;
    transform: none;
    animation: nextPageTransitionIn .8s forwards normal 1;
    }

    body.android .BottomNavArea>.Overflow {
    width: 0;
    background: linear-gradient(180deg,#ec653f,#5d1b08 140%);
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: center right;
    transition: transform .5s ease 0s, width 0s linear .8s;
    }
    body.android.Next .BottomNavArea>.Overflow {
    width: 100vw;
    transform: scaleX(1);
    transform-origin: center right;
    transition: transform .8s ease 0s;
    }
}

body .Popup_v2 .Modal.Mobile {
    bottom:0;
    transition: transform .3s ease 0s !important;
    transform: translateY(120%);
}
body .Popup_v2.Active .Modal.Mobile {
    bottom:0;
    transition: transform 2s ease 0s;
    transform: translateY(0);
}


@keyframes fadeInPopupOverflow {
    from { opacity:0; }
    to { opacity:1; }
}
@keyframes fadeOutPopupOverflow {
    from { opacity:1; }
    to { opacity:0; }
}
body .Popup_v2.Mobil .PopupOwerflow {
    backdrop-filter: none;
    background: #00000080;
    animation-name: fadeOutPopupOverflow;
    animation-duration: 0.3s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}
body .Popup_v2.Mobil.Active .PopupOwerflow {
    animation-name: fadeInPopupOverflow;
    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}












body .Popup_v2 .Modal.center-40 {
    max-width: 40%
}
body .Popup_v2 .Modal.Right {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background: #fff;
}
body .Popup_v2 .Modal.Right .Htm .Document{
    height: 100%;
    border: 0;
    background: transparent;
    padding: 24px;
    overflow: auto;
}
body .Popup_v2 .Modal.Right .Htm .Document .Close{top: 30px !important;!i;!;right: 30px !important;!i;!;border: 0;padding: 0;font-size: 30px;color: #969696;cursor: pointer;z-index: 1;}


body .Popup_v2 .Modal.Left {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background: #fff;
}
body .Popup_v2 .Modal.Left .Htm .Document{
    height: 100%;
    border: 0;
    background: transparent;
    padding: 24px;
    overflow: auto;
}
body .Popup_v2 .Modal.Left .Htm .Document .Close{top: 30px !important;!i;!;right: 30px !important;!i;!;border: 0;padding: 0;font-size: 30px;color: #969696;cursor: pointer;z-index: 1;}


body .Popup_v2 .Modal.newRight {
    position: absolute;
    right: -100%;
    top: 0;
    height: 100%;
    background: #fff;
    transform:all 0.3s
}
body .Popup_v2.show .Modal.newRight {
    right: 0%;
    transform:all 0.3s
}
body .Popup_v2 .Modal.newRight .Htm .Document{
    height: 100%;
    border: 0;
    background: transparent;
    padding: 24px;
    overflow: auto;
    display: block;
}
body .Popup_v2 .Modal.newRight .Htm .Document .Close{top: 30px !important;!i;!;right: 30px !important;!i;!;border: 0;padding: 0;font-size: 30px;color: #969696;cursor: pointer;z-index: 1;}

body .Popup_v2 .Modal.center-50 {
    max-width: 50%
}

body .Popup_v2 .Modal.center-60 {
    max-width: 60%
}

body .Popup_v2 .Modal.center-70 {
    max-width: 70%
}

body .Popup_v2 .Modal.center-80 {
    max-width: 80%
}

body .Popup_v2 .Modal.center-100 {
    max-width: 100%;
    min-width: 95%
}

body .Popup_v2 .Modal.Mobile {
    width: 100%;
    max-width: 100%;
    position: relative;
    z-index: 11;
    bottom: -100%;
    transition: all .4s
}

body .Popup_v2.Active .Modal.Mobile {
    bottom: 0%;
    transition: all .4s
}

body .Popup_v2 .Modal.Mobile .Htm {
    vertical-align: bottom;
    background: transparent linear-gradient(179deg,#042AE5 -121%,#a96bff 4%,#00188D 126%) 0% 0% no-repeat padding-box;
    border-radius: 22px 22px 0 0
}

body .Popup_v2 .Modal.Mobile .Htm .Document {
    background: 0 0;
    box-shadow: none;
    border: 0;
    padding: 0!important;
    border-radius: 22px;
    bottom: -100%;
    transition: all .4s
}

body .Popup_v2.Active .Modal.Mobile .Htm .Document {
    bottom: 0;
    transition: all .6s
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Close {
    position: absolute;
    right: 10px;
    top: -30px!important;
    cursor: pointer;
    width: 45px;
    height: 30px;
    background: 0 0;
    color: #fff;
    border: 0;
    line-height: inherit
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Close::before {
    content: "X";
    font-family: sans-serif;
    font-size: 22px;
    bottom: 14px;
    right: 5px
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Close::after {
    width: 1px;
    height: 16px;
    border-right: 2px dotted #fff;
    display: block;
    position: absolute;
    right: 12px;
    bottom: 0;
    opacity: 1
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Close:hover {
    background-color: transparent;
    color: #fff
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Title {
    margin: 0;
    text-align: center;
    padding: 0 20px;
    border-radius: 22px 22px 0 0;
    line-height: 85px;
    background: linear-gradient(180deg,#3d94ff,#817eff);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100px
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Title .SingleProduct {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Title .SingleProduct>.Photo {
    width: 70px;
    position: relative;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    overflow: hidden;
    flex: none
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Title .SingleProduct>.Photo>img {
    width: 70px
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Title .SingleProduct>.Info {
    width: 100%;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    color: #0621a5
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Title .SingleProduct>.Info>.Name {
    width: 100%
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Title .SingleProduct>.Info>.Variation {
    width: 100%
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Title .SingleProduct>.Info>.Member {
    width: 100%
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Title .SingleProduct>.Info>.Order {
    width: 100%
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Title .SingleProduct>.Info>.Barcode {
    width: 100%
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Title>.RightBtn {
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -15px;
    color: #fff;
    font-size: 13px;
    font-weight: 200;
    border: 1px solid #ccc;
    height: initial;
    line-height: 29px;
    padding: 0 12px;
    border-radius: 3px;
    display: none
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Title>.RightBtn.Active {
    display: block
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Title>.Big {
    color: #fff;
    font-size: 20px;
    position: relative;
    z-index: 1;
    text-transform: none;
    margin: 0;
    width: fit-content;
    line-height: 38px
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center {
    text-align: left;
    margin: 0;
    padding: 0;
    min-height: 40px;
    background: transparent linear-gradient(179deg,#042AE5 -121%,#a96bff 4%,#00188D 126%) 0% 0% no-repeat padding-box;
    opacity: 1;
    z-index: 1;
    position: relative;
    overflow: auto;
    min-height: 100px
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ToolsBar {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    border-bottom: 1px solid #ffffff40;
    padding: 18px
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ToolsBar>.Item {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-left: 1px solid #ffffff4a;
    flex-direction: column
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ToolsBar>.Item:first-child {
    border: 0
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ToolsBar>.Item>span:nth-child(1) {
    color: #fff9;
    font-size: 12px
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ToolsBar>.Item>span:nth-child(2) {
    color: #fff;
    font-size: 18px
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductList {
    width: 100%;
    padding: 18px 24px;
    flex-direction: column;
    max-height: 400px;
    overflow: auto
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductList {
    padding: 16px 24px!important
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem {
    width: 100%;
    display: flex;
    padding: 18px 4px 18px 18px;
    position: relative;
    border-radius: 22px;
    -webkit-border-radius: 22px;
    color: #fff;
    border: 0;
    margin: 0;
    box-shadow: none;
    background: 0 0;
    margin-bottom: 14px!important;
    overflow: hidden
}

@media only screen and (max-height: 740px) {
    body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem {
    }
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem>.Photo {
    width: 38px;
    position: relative;
    flex: none;
    z-index: 1;
    display: block
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem>.Photo>img {
    width: 100%;
    border-radius: 6px
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem>.Photo>.Status {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    top: -3px;
    right: -8px
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem>.Info {
    display: flex;
    flex-direction: column;
    padding: 0 13px;
    z-index: 1;
    width: 100%;
    justify-content: flex-start
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem>.Info>.Name {
    font-size: 13px;
    color: #0621a5;
    line-height: 16px;
    height: inherit
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem>.Info>.Variation {
    font-size: 14px;
    color: #0621a5;
    line-height: 20px;
    height: inherit
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem>.Info>.Address {
    font-size: 13px;
    color: #fff;
    line-height: 16px;
    height: inherit
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem>.Info>.Color {
    font-size: 12px;
    color: #0621a5;
    line-height: 16px
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem>.Info>.Code {
    font-size: 12px;
    color: #0621a5;
    line-height: 16px
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem>.Info>.Variations {
    display: flex;
    margin-top: 6px
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem>.Info>.Variations .SizeItem {
    background: #fff;
    color: #000;
    border-radius: 2px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    margin: 2px
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem>.Info>.Variations .SizeItem>span:nth-child(1) {
    padding: 4px;
    font-size: 10px;
    font-weight: 700
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem>.Info>.Variations .SizeItem>span:nth-child(2) {
    background: #efefef;
    font-size: 9px;
    padding: 4px
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem>.Nav {
    width: 20px;
    flex: none;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 300;
    color: #0621a5;
    margin-left: auto
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem>.QuantityBar {
    position: absolute;
    right: 0;
    font-size: 18px;
    color: #fff;
    font-weight: 700;
    background: #9e439ea6;
    display: flex;
    top: 0;
    bottom: 0;
    width: 60px;
    border-radius: 38px 22px 22px 22px;
    align-items: center;
    justify-content: center
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem[S="1"]>.QuantityBar {
    display: flex;
    background: #000
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem[S="2"]>.QuantityBar {
    display: flex;
    background: red
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem>.ReplyBtn {
    display: none
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem[S="2"]>.ReplyBtn {
    background: red;
    color: #fff;
    position: absolute;
    right: 50%;
    margin-right: -45px;
    margin-top: -2px;
    z-index: 1;
    padding: 10px 12px;
    border-radius: 12px;
    box-shadow: 0 0 1006px 100px #ff000080;
    display: block
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem>.Background {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    background-blend-mode: overlay;
    mix-blend-mode: normal;
    border-radius: 22px;
    opacity: 1;
    backdrop-filter: brightness(1.7)
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem.Loading>.QuantityBar:before {
    content: "";
    background: #000 url(/Library/Img/loading_Ajax.svg);
    background-repeat: no-repeat;
    background-size: 26px;
    width: 35px;
    height: 28px;
    position: relative;
    z-index: 2;
    display: block;
    position: absolute;
    left: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: 50%
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center>.Info {
    text-align: center;
    padding: 24px 40px;
    font-size: 14px;
    color: #fff
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Bottom {
    border-top: 1px solid #ffffff40;
    padding: 14px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Bottom>.Right {
    display: flex;
    align-items: center;
    justify-content: center
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Bottom>.Right .Btn,body .Popup_v2 .Modal.Mobile .Htm .Document .Bottom>.Right .theme-button {
    border: 1px solid #ccc;
    padding: 8px 14px;
    border-radius: 4px;
    color: #fff;
    margin: 0 6px;
    font-size: 15px;
    position: relative;
    display: flex;
    align-items: center;
    background: transparent;
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Bottom>.Right .theme-button.btnCancel {
    border: 0
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Bottom>.Right .theme-button.btnSuccess {
    background: #fff;
    color: #000
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Bottom>.Right .Btn>span {
    margin-right: 5px
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center>.BtnList {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px
}
body .Popup_v2 .Modal.Mobile .Htm .Document .Center>.BtnList .Btn {
    background: transparent;
}
body .Popup_v2 .Modal.Mobile .Htm .Document .Center>.BtnList .Btn.Line {
    border: 1px solid #fff;
    padding: 9px 14px;
    border-radius: 6px;
    font-size: 14px;
    color: #fff;
    font-weight: 200
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center>.BtnList .Btn.Line>span {
    margin-right: 9px
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Center>.BtnList .Btn.Line>i {
    margin-left: 4px
}

body .Popup_v2 .Modal.Mobile .Htm .Document .Bottom {
    display: none
}

body .Popup_v2 .Modal .Htm .Document {
    position: relative;
    outline: 0;
    background: #fff;
    display: inline-block;
    padding: 0;
    width: 100%;
    box-shadow: 0 11px 78px -29px #000;
    padding: 20px 10px;
    border: 2px solid #147fde;
    border-radius: 10px
}

body .Popup_v2 .Modal .Htm .Document .Title {
    text-align: left;
    position: relative;
    margin-bottom: 15px;
    padding: 0 13px;
}

body .Popup_v2 .Modal .Htm .Document .Title>.TitleIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    text-align: center;
    background-color: #007de1;
    justify-content: center;
    color: #fff;
    border: 8px solid #fff;
    font-size: 18px;
    margin-top: -50px
}

body .Popup_v2.top-0 .Modal .Htm {
    vertical-align: top;
    padding-top: 50px
}

body .Popup_v2 .theme-tabs>.theme-tabs-nav {
    margin-bottom: 20px
}

body .Popup_v2 .theme-tabs>.theme-tabs-nav>li {
    margin-right: 7px
}

body .Popup_v2 .theme-tabs>.theme-tabs-nav>li>a {
    border: 1px solid #eee;
    box-shadow: none;
    background-color: #fdfdfd
}

body .Popup_v2 .theme-tabs>.theme-tabs-nav>li.active>a {
    background-color: #317aff;
    color: #fff;
    position: relative
}

body .Popup_v2 .theme-tabs>.theme-tabs-nav>li.active>a:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: transparent;
    border-top-color: #3179ff;
    border-width: 7px;
    margin-left: -7px
}

body .Popup_v2 .Modal .Htm .Document .Title>.Big {
    text-transform: uppercase;
    color: #4380e1;
    font-weight: 600;
    font-size: 16px;
    margin-top: 8px
}

body .Popup_v2 .Modal .Htm .Document .Title>.S {
    color: #454545;
    font-weight: 100;
    line-height: 16px;
    font-size: 14px
}

body .Popup_v2 .Modal .Htm .Document .Close {
    position: absolute;
    right: 4px;
    top: 15px;
    cursor: pointer;
    width: 45px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 0;
    font-weight: 700;
    background-color: #fff;
    border-radius: 5px;
    color: #4380e1;
    border: 1px solid #4380e1
}

body .Popup_v2 .Modal .Htm .Document .Close::before {
    content: "\e939";
    font-family: misszenne!important;
    font-size: 10px
}

body .Popup_v2 .Modal .Htm .Document .Close:hover {
    background-color: #4380e1;
    color: #fff
}

body .Popup_v2 .Modal .Htm .Document .Center {
    text-align: left;
    margin-bottom: 15px;
    padding: 7px 15px 0
}

body .Popup_v2 .Modal .Htm .Document .Center .nonRECORD {
    text-align: left;
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

body .Popup_v2 .Modal .Htm .Document .Center .nonRECORD>.Icon {
    width: 66px;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff0d;
    border-radius: 100%;
    border: 1px solid #ffffff3d;
    mix-blend-mode: color-dodge;
    margin-bottom: 20px;
    color: #fff;
    font-size: 25px
}

body .Popup_v2 .Modal .Htm .Document .Center .nonRECORD>.Icon:before {
    position: relative;
    z-index: 9
}

body .Popup_v2 .Modal .Htm .Document .Center .nonRECORD>.Text {
    font-size: 14px;
    text-align: center;
    color: #fff;
    line-height: 30px;
    margin-bottom: 62px
}

body .Popup_v2 .Modal .Htm .Document .Bottom {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px
}

body .Popup_v2.popup-red .Modal .Htm .Document {
    border-color: #dc0000
}

body .Popup_v2.popup-red .Modal .Htm .Document .Title>.TitleIcon {
    background-color: #d11100
}

body .Popup_v2.popup-red .Modal .Htm .Document .Title>.Big {
    color: #dc0000
}

body .Popup_v2.popup-red .Modal .Htm .Document .Close {
    color: #dc0000;
    border-color: #dc0000
}

body .Popup_v2.popup-red .Modal .Htm .Document .Close:hover {
    background-color: #dc0000;
    color: #fff
}

body .Popup_v2.popup-green .Modal .Htm .Document {
    border-color: #32bf5f
}

body .Popup_v2.popup-green .Modal .Htm .Document .Title>.TitleIcon {
    background-color: #32bf5f
}

body .Popup_v2.popup-green .Modal .Htm .Document .Title>.Big {
    color: #32bf5f
}

body .Popup_v2.popup-green .Modal .Htm .Document .Close {
    color: #32bf5f;
    border-color: #32bf5f
}

body .Popup_v2.popup-green .Modal .Htm .Document .Close:hover {
    background-color: #32bf5f;
    color: #fff
}

body .Popup_v2.popup-orange .Modal .Htm .Document {
    border-color: #ec653f
}

body .Popup_v2.popup-orange .Modal .Htm .Document .Title>.TitleIcon {
    background-color: #ec653f
}

body .Popup_v2.popup-orange .Modal .Htm .Document .Title>.Big {
    color: #ec653f
}

body .Popup_v2.popup-orange .Modal .Htm .Document .Close {
    color: #ec653f;
    border-color: #ec653f
}

body .Popup_v2.popup-orange .Modal .Htm .Document .Close:hover {
    background-color: #ec653f;
    color: #fff
}

body .Popup_v2 .Modal.Mobile .SupplyStatusItem {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    border-bottom: 1px solid #cccccc59;
    line-height: 60px;
    font-size: 15px;
    padding: 0 20px;
    position: relative
}

body .Popup_v2.Query .Modal.Mobile .TopMessage {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: -100px;
    background: #fff;
    color: #fff;
    font-size: 14px;
    color: #000;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    box-shadow: 0 0 100px 10px transparent;
    transition: all .4s
}

body .Popup_v2.Query .Modal.Mobile .TopMessage.Show {
    bottom: 30px;
    transition: all .4s;
    box-shadow: 0 0 100px 10px #000
}

body .Popup_v2.Query .Modal.Mobile .SupplyStatusItem {
    text-decoration: line-through;
    color: #000;
    pointer-events: none
}

body .Popup_v2.Query .Modal.Mobile .SupplyStatusItem>svg>path {
    fill: #000
}

body .Popup_v2 .Modal.Mobile .SupplyStatusItem>svg {
    margin-right: 10px
}

body .Popup_v2 .Modal.Mobile .SupplyStatusItem.Active::before {
    content: "\f00c";
    font-family: 'font awesome 6 pro';
    font-weight: 300;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display,inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    position: absolute;
    right: 18px
}

body .Popup_v2 .Modal.Mobile .SupplyStatusItem>.Color {
    width: 18px;
    height: 18px;
    border-radius: 100%;
    flex: none;
    margin-right: 20px
}

body .Popup_v2 .Modal.Mobile .SupplyStatusItem>.Text {
    width: 100%
}

body .Popup_v2 .Modal.Mobile .SupplyStatusItem>.Counter {
    width: 100px;
    margin-left: auto;
    text-align: center
}

body .Popup_v2 .Modal.Mobile .SupplyStatusItem:last-child {
    border: 0
}

body .Popup_v2 .Modal.Mobile .SupplyFilterItem {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    border-bottom: 1px solid #cccccc59;
    height: 60px;
    font-size: 15px;
    padding: 0 20px;
    position: relative;
    overflow: hidden
}
body .Popup_v2 .Modal.Mobile .SupplyFilterItem.Active::before {
    content: "\f00c";
    font-family: 'font awesome 6 pro';
    font-weight: 300;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display,inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    position: absolute;
    left: 2px;
}
body .Popup_v2 .Modal.Mobile .SupplyFilterItem[D="asc"].Active::after {
    content: "\f15d";
    font-family: 'font awesome 6 pro';
    font-weight: 300;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display,inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    position: absolute;
    right: 18px
}
body .Popup_v2 .Modal.Mobile .SupplyFilterItem[D="desc"].Active::after {
    content: "\f881";
    font-family: 'font awesome 6 pro';
    font-weight: 300;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display,inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    position: absolute;
    right: 18px
}
body .Popup_v2 .Modal.Mobile .SupplyFilterItem>.Color {
    width: 18px;
    height: 18px;
    border-radius: 100%;
    flex: none;
    margin-right: 20px
}

body .Popup_v2 .Modal.Mobile .SupplyFilterItem>.Text {
    width: 100%
}

body .Popup_v2 .Modal.Mobile .SupplyFilterItem>.Input {
    position: absolute;
    right: 0;
    width: 0;
    transition: all .3s;
    overflow: hidden
}

body .Popup_v2 .Modal.Mobile .SupplyFilterItem>.Input>input {
    background: 0 0;
    border: 0;
    padding: 0 20px;
    color: #fff;
    width: 100%;
    line-height: 60px;
    outline: none;
    font-size: 15px
}

body .Popup_v2 .Modal.Mobile .SupplyFilterItem>.Input>i {
    position: absolute;
    right: 20px;
    color: #fff;
    z-index: 1;
    top: 19px;
    font-size: 22px
}

body .Popup_v2 .Modal.Mobile .SupplyFilterItem>.Input>input::placeholder {
    color: #ffffff7a
}

body .Popup_v2 .Modal.Mobile .SupplyFilterItem.Active>.Text {
    /* display: none; */
}

body .Popup_v2 .Modal.Mobile .SupplyFilterItem.Active>.Input {
    position: absolute;
    right: 0;
    transition: all .8s;
    width: 100%
}



body .Popup_v2 .Modal.Mobile .TrendyolControlOrderItem {
    width: 100%;
    display: flex;
    background: #0000002b;
    color: #fff;
    padding: 4px 10px;
    font-size: 14px;
    margin-bottom: 4px;
    font-weight: 200;
    justify-content: space-between;
    align-items: center;
    position: relative;
    transition: all 0.3s;
}

body .Popup_v2 .Modal.Mobile .TrendyolControlOrderItem .Status{
    display: flex;
    background: #0000002b;
    color: #fff;
    padding: 5px 8px;
    font-size: 14px;
    align-items: center;
    justify-content: space-between;
    font-weight: 200;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 11px;
    text-indent: 0;
}
body .Popup_v2 .Modal.Mobile .TrendyolControlOrderItem[S="1"] {
    text-indent: 40px;
    background: #223cb3;
    transition: all 0.3s;
}
body .Popup_v2 .Modal.Mobile .TrendyolControlOrderItem[S="1"] .Text:before {
    content: "";
    background: #223cb3 url(/Library/Img/loading_Ajax.svg);
    width: 32px;
    height: 30px;
    position: relative;
    z-index: 2;
    display: block;
    background-size: 25px;
    position: absolute;
    right: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: 50%;
    left: 0;
    top: 0;
}
body .Popup_v2 .Modal.Mobile .TrendyolControlOrderItem[S="1"] .Status{
    background: #000000;
}
body .Popup_v2 .Modal.Mobile .TrendyolControlOrderItem[S="2"] .Status{
    background: #f00;
}
body .Popup_v2 .Modal.Mobile .TrendyolControlOrderItem[S="3"] .Status{
    background: #4CAF50;
}


body .Popup_v2 .Modal.Mobile .OrderItem {
    width: calc(100% - 48px);
    margin: 10px 24px;
    position: relative;
    padding: 12px;
    display: flex;
    flex-direction: row
}

body .Popup_v2 .Modal.Mobile .OrderItem.Empty {
    display: none
}

body .Popup_v2 .Modal.Mobile .OrderItem:before {
    content: "";
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #0000001a;
    mix-blend-mode: overlay
}

body .Popup_v2 .Modal.Mobile .OrderItem>.Number {
    width: 28px;
    flex: none;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 12px
}

body .Popup_v2 .Modal.Mobile .OrderItem>.Info {
    width: 100%
}

body .Popup_v2 .Modal.Mobile .OrderItem>.Info>.OrderItemTop {
    width: 100%;
    position: relative;
    z-index: 1;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px dashed #ffffff52
}

body .Popup_v2 .Modal.Mobile .OrderItem>.Info>.OrderItemBottom {
    position: relative;
    z-index: 1;
    color: #fff;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column
}

body .Popup_v2 .Modal.Mobile .OrderItem>.Info>.OrderItemTop .Item {
    width: 100%;
    display: flex;
    flex-direction: column
}

body .Popup_v2 .Modal.Mobile .OrderItem>.Info>.OrderItemTop .Item:nth-child(2) {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    align-items: flex-end;
    text-align: right;
    border-left: 1px dashed #ffffff5c
}

body .Popup_v2 .Modal.Mobile .OrderItem>.Info>.OrderItemTop .Item>span:nth-child(1) {
    width: 100%;
    font-size: 12px;
    font-weight: 300;
    padding-bottom: 3px
}

body .Popup_v2 .Modal.Mobile .OrderItem>.Info>.OrderItemTop .Item>span:nth-child(2) {
    width: 100%;
    font-size: 13px
}

body .Popup_v2 .Modal.Mobile .OrderItem>.Info>.OrderItemBottom .Item {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-bottom: 3px
}

body .Popup_v2 .Modal.Mobile .OrderItem>.Info>.OrderItemBottom .Item:nth-child(2) {
    display: flex;
    flex-direction: row
}

body .Popup_v2 .Modal.Mobile .OrderItem>.Info>.OrderItemBottom .Item:nth-child(3) {
    width: -webkit-fill-available;
    display: flex;
    margin: 0
}

body .Popup_v2 .Modal.Mobile .OrderItem>.Info>.OrderItemBottom .Item>span:nth-child(1) {
    width: 110px;
    font-size: 12px;
    font-weight: 300;
    padding-bottom: 3px;
    flex: none
}

body .Popup_v2 .Modal.Mobile .OrderItem>.Info>.OrderItemBottom .Item>span:nth-child(2) {
    width: 100%;
    font-size: 13px
}

body .Popup_v2 .Modal.Mobile .OrderItem>.Info>.OrderItemBottom .Item>span:nth-child(2) .isWhere {
    width: 100%;
    font-size: 12px;
    background: #fff;
    padding: 2px;
    color: #000;
    border-radius: 2px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center
}

body .Popup_v2 .Modal.Mobile .OrderItem>.Info>.OrderItemBottom .Item>span:nth-child(2) .Cargo {
    width: 100%;
    font-size: 13px;
    background: #fff;
    padding: 2px;
    color: #000;
    border-radius: 2px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px
}



body .Popup_v2 .BarcodeArea {
    width: 100%;
    padding: 40px;
    position: relative;
    top: 0;
    margin: 0;
    transition: all .3s;
    z-index: 4;
    background: 0 0;
    display: flex;
    flex-direction: column;
}

body .Popup_v2 .RangeBar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    margin-bottom: 10px;
    display: none
}

body .Popup_v2 .RangeBar .asRange {
    height: 18px;
    background: #3f288c;
    width: 100%
}

body .Popup_v2 .RangeBar .asRange .asRange-selected {
    height: 18px;
    background: #ffeb3b
}

body .Popup_v2 .RangeBar .asRange .asRange-pointer .asRange-tip:before {
    display: none
}

body .Popup_v2 .RangeBar .asRange .asRange-pointer:before {
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    content: "";
    background: #fff;
    border-radius: inherit
}

body .Popup_v2 .RangeBar .asRange .asRange-pointer:after {
    background: #3f278c
}

body .Popup_v2 .RangeBar .asRange .asRange-pointer {
    height: 18px;
    width: 18px;
    border-radius: 2px
}

body .Popup_v2 .RangeBar .asRange .asRange-pointer .asRange-tip {
    position: absolute;
    top: 1px;
    left: initial;
    right: 21px;
    width: initial;
    height: 16px;
    margin: 0;
    margin-right: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 15px;
    color: #3f278c;
    text-align: center;
    font-family: sans-serif;
    background-color: #fff;
    border: 1px solid #3f278c;
    border-radius: 3px;
    -webkit-transition: opacity .3s ease-in-out 0s;
    transition: opacity .3s ease-in-out 0s;
    padding: 0 2px;
    font-weight: 500
}

body .Popup_v2 .BarcodeArea.Active {
    position: relative;
    top: -140px;
    margin-bottom: -125px
}

body .Popup_v2 .BarcodeArea>.Input {
    width: 100%;
    display: none;
    height: 72px
}

body .Popup_v2 .BarcodeArea>.Input>form {
    width: 100%;
    display: flex;
    position: relative
}

body .Popup_v2 .BarcodeArea>.Input.Active {
    display: flex;
    flex-direction: column-reverse;
    height: inherit
}

body .Popup_v2 .BarcodeArea>.Input input {
    width: 100%;
    background: #a657ff;
    border: 1px solid #ea98ff;
    border-radius: 31px;
    margin: 5px 0 6px;
    margin-right: 10px;
    background-blend-mode: overlay;
    text-indent: 24px;
    color: #fff;
    font-size: 14px;
    height: 61px;
    line-height: 61px;
    outline: none
}

body .Popup_v2 .BarcodeArea>.Input input::placeholder {
    color: #ffffff7d
}

body .Popup_v2 .BarcodeArea>.Input .DeviceChange {
    width: 100%;
    flex: none;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 44px
}

body .Popup_v2 .BarcodeArea>.Input .DeviceChange>span {
    position: initial;
    font-size: 11px;
    color: #fff;
    width: 100%;
    text-align: center;
    font-weight: lighter;
    margin-bottom: 10px
}

body .Popup_v2 .BarcodeArea>.Input .DeviceChange>span::after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 50%;
    right: 0;
    width: 0;
    height: 16px;
    border: .5px dashed #ffffffb0
}

body .Popup_v2 .BarcodeArea>.Input .DeviceChange>.Icon {
    width: 72px;
    background: 0 0;
    height: 72px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    box-shadow: none;
    flex-direction: column
}

body .Popup_v2 .BarcodeArea>.Input .DeviceChange>.Icon>img {
    height: 72px
}

body .Popup_v2 .BarcodeArea>.Input .DeviceChange>.Icon>span {
    font-size: 8px;
    text-align: center;
    color: #0e34ed;
    font-weight: 700;
    line-height: 8px;
    margin-top: 4px;
    width: 40px
}

body .Popup_v2 .BarcodeArea>.Input .CamScreen {
    width: 100%;
    margin-right: 10px;
    position: relative;
    border: 3px solid #fff;
    border-radius: 6px
}

body .Popup_v2 .BarcodeArea>.Input .CamScreen>div {
    width: 100%;
    border-radius: 6px;
    border-left: 3px solid #9263fb;
    border-right: 3px solid #9a65fc;
    border-bottom: 3px solid #a36aff
}

body .Popup_v2 .BarcodeArea>.Input .CamScreen>span:nth-child(2) {
    position: absolute;
    background: linear-gradient(182deg,#9263fb 4%,#a36aff 84%);
    top: -4px;
    left: 32px;
    right: 32px;
    bottom: -4px
}

body .Popup_v2 .BarcodeArea>.Input .CamScreen>span:nth-child(3) {
    position: absolute;
    background: #9c67fe;
    top: 22px;
    left: -4px;
    right: -4px;
    bottom: 22px
}


body[p="WebSupply"]{background: linear-gradient(180deg, #0021bb, #7983ba);background-position: top;background-attachment: fixed;}
body[p="WebSupply"]:after{display:none;}

[T=WebSupply]>.Head {
    width: 100%;
    display: flex;
    border-bottom: 1px solid #ffffff14;
    align-items: center;
    padding: 0 20px;
    height: 45px;
    position: fixed;
    top: 0;
    left: 0;
    transition: all .2s;
    z-index: 3;
    background: #0824ad
}

body.ScrollOn [T=WebSupply]>.Head {
    transition: all .3s;
    position: fixed;
    /* top: -45px; */
}

body.ScrollOn [T=WebSupply]>.BarcodeArea {
    /* transition: all .3s; */
    /* position: fixed; */
    /* top: -120px; */
}

body.ScrollOn .BottomNavArea {
    transition: all .3s;
    position: fixed;
    bottom: -120px
}

[T=WebSupply]>.Head>.HeadIcon {
    margin-right: 10px
}

[T=WebSupply]>.Head>.HeadIcon>img {
    height: 16px
}

[T=WebSupply]>.Head>.HeadText {
    width: 100%;
    color: #fff;
    opacity: .7;
    font-size: 12px
}

[T=WebSupply]>.BarcodeArea {
    width: 100%;
    padding: 0 20px;
    padding-top: 40px;
    position: absolute;
    top: 45px;
    transition: all .3s;
    z-index: 4;
    background: linear-gradient(180deg, #0724ad, transparent);
    position: fixed;
}

[T=WebSupply]>.BarcodeArea>.Input {
    width: 100%;
    display: none;
    height: 72px;
    position: relative;
}

[T=WebSupply]>.BarcodeArea>.Input input {
    width: 100%;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 31px;
    margin-right: 10px;
    background-blend-mode: overlay;
    text-indent: 24px;
    color: #000;
    font-size: 16px;
    height: 61px;
    line-height: 61px;
    outline: none
}

[T=WebSupply]>.BarcodeArea>.Input.Active {
    display: flex
}

.Input .InputKeywboard{position: absolute;right: 32px;top: 18px;}
.Input .InputKeywboard::before{content:"";display: block;width: 100%;height: 0px;background: #ccd1ff;transform: rotate(25deg);position: absolute;top: 10px;z-index: 1;}
.Input .InputKeywboard>i{color: #041dab;font-size: 24px;padding: 0;background: transparent;border: 0;}
.Input .InputKeywboard.Active>i{color: #fff;font-size: 24px;}
.Input .InputKeywboard.Active::before{display:none}

[T=WebSupply]>.BarcodeArea>.Input.Error.Active input {
    background: #ff020236;
    border-color: red
}

[T=WebSupply]>.BarcodeArea>.Input.Error.Active form:after {
    content: attr(Text);
    position: absolute;
    right: 15px;
    top: 23px;
    color: #ffffff6e;
    font-size: 12px
}

[T=WebSupply]>.BarcodeArea>.Input>form {
    width: 100%;
    position: relative
}

[T=WebSupply]>.BarcodeArea>.Input>form>input {
    width: 100%;
    background: #2647ff;
    border: 1px solid #438dfc;
    border-radius: 31px;
    background-blend-mode: overlay;
    text-indent: 24px;
    color: #fff;
    font-size: 14px;
    height: 61px;
    line-height: 61px;
    outline: none
}

[T=WebSupply]>.BarcodeArea>.Input>form>input::placeholder {
    color: #ffffff7d
}

[T=WebSupply]>.BarcodeArea>.Input>.DeviceChange {
    width: 61px;
    height: 61px;
    flex: none;
    position: relative
}

[T=WebSupply]>.BarcodeArea>.Input>.DeviceChange>span {
    position: absolute;
    top: -34px;
    right: 0;
    color: #ffffff85;
    font-size: 9px;
    width: 300px;
    text-align: right;
    font-weight: lighter
}

[T=WebSupply]>.BarcodeArea>.Input>.DeviceChange>span::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 28px;
    width: 0;
    height: 13px;
    border: .5px dashed #fff6
}

[T=WebSupply]>.BarcodeArea>.Input>.DeviceChange>.Icon {
    width: 61px;
    background: #fff;
    height: 61px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #1626b6;
    box-shadow: 0 0 0 1px #fff;
    flex-direction: column
}

[T=WebSupply]>.BarcodeArea>.Input>.DeviceChange>.Icon>img {
    height: 21px
}

[T=WebSupply]>.BarcodeArea>.Input>.DeviceChange>.Icon>span {
    font-size: 8px;
    text-align: center;
    color: #0e34ed;
    font-weight: 700;
    line-height: 8px;
    margin-top: 4px;
    width: 40px
}

[T=WebSupply]>.BarcodeArea>.Input>.CamScreen {
    width: 100%;
    margin-right: 10px;
    position: relative;
    border: 3px solid #fff;
    border-radius: 6px
}

[T=WebSupply]>.BarcodeArea>.Input>.CamScreen>div {
    width: 100%;
    background: #000;
    height: 66px;
    border-top: 3px solid #1a28cb;
    position: relative;
    z-index: 1;
    border-radius: 6px;
    border-left: 3px solid #2130e6;
    border-right: 3px solid #2130e6;
    border-bottom: 3px solid #2130e7
}

[T=WebSupply]>.BarcodeArea>.Input>.CamScreen>span:nth-child(2) {
    position: absolute;
    background: linear-gradient(182deg,#1927c9 4%,#2030e7 84%);
    top: -3px;
    left: 32px;
    right: 32px;
    bottom: -3px
}

[T=WebSupply]>.BarcodeArea>.Input>.CamScreen>span:nth-child(3) {
    position: absolute;
    background: #2030e6;
    top: 22px;
    left: -3px;
    right: -3px;
    bottom: 22px
}

body[P=WebSupply] .BlueBackground {
    margin-top: 0;
    background: transparent linear-gradient(179deg,#021883 0%,#4b6cff 38%,#001786 86%) 0% 0% no-repeat padding-box
}

[T=WebSupply]>.ProductList .ProductItem.swiper-slide-prev {
    opacity: 0!important
}

[T=WebSupply]>.ProductList .ProductItem.swiper-slide {
    opacity: 0!important;
    filter: blur(12px)!important
}

[T=WebSupply]>.ProductList .swiper-slide.nonTransform {
    transform: none!important;
    opacity: 1!important;
    filter: blur(0px)!important
}

[T=WebSupply]>.ProductList .swiper-slide.nonTransform:last+.swiper-slide+.swiper-slide {
    transform: none!important;
    opacity: 1;
    filter: blur(0px)
}

[T=WebSupply]>.ProductList .ProductItem.nonTransform+.swiper-slide:not(.nonTransform) {
    opacity: 1!important;
    filter: blur(0.5px)!important
}

[T=WebSupply]>.ProductList .ProductItem.nonTransform+.swiper-slide:not(.nonTransform)::before {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 20px;
    right: 20px;
    background: #00000085;
    height: 12px;
    z-index: -1;
    border-radius: 0 0 22px 22px;
    box-shadow: inset 0 1px 5px 0 #00000021
}

[T=WebSupply]>.ProductList .ProductItem.nonTransform+.swiper-slide:not(.nonTransform)::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 40px;
    right: 40px;
    background: #0000005c;
    height: 7px;
    z-index: -1;
    border-radius: 0 0 22px 22px
}

body .swiper-wrapper {
    -webkit-transform-style: preserve-3d;
    height: max-content
}

[T=WebSupply]>.ProductList {
    width: 100%;
    padding: 0 20px;
    z-index: 1;
    position: sticky;
    top: 20px;
    padding-top: 190px;
    padding-bottom: 180px;
}

[T=WebSupply]>.ProductList .ProductItem {
    width: 100%;
    display: flex;
    padding: 18px 4px 18px 18px;
    position: relative;
    border-radius: 22px;
    -webkit-border-radius: 22px;
    color: #fff;
    border: 0;
    margin: 0;
    box-shadow: none;
    background: 0 0;
    margin-bottom: 14px
}

@media only screen and (max-height: 740px) {
    [T=WebSupply]>.ProductList .ProductItem {
    }
}

[T=WebSupply]>.ProductList .ProductItem>.Photo {
    width: 38px;
    position: relative;
    flex: none;
    z-index: 1;
    display: block
}

[T=WebSupply]>.ProductList .ProductItem>.Photo>img {
    width: 100%;
    border-radius: 6px
}

[T=WebSupply]>.ProductList .ProductItem>.Photo>.Status {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    top: -3px;
    right: -8px
}

[T=WebSupply]>.ProductList .ProductItem[FilterSupply="1"]>.Photo>.Status {
    background: #96c!important
}

[T=WebSupply]>.ProductList .ProductItem[FilterSupply="2"]>.Photo>.Status {
    background: #ff7c00!important
}

[T=WebSupply]>.ProductList .ProductItem[FilterSupply="3"]>.Photo>.Status {
    background: red!important
}

[T=WebSupply]>.ProductList .ProductItem[FilterSupply="4"]>.Photo>.Status {
    background: #000!important
}

[T=WebSupply]>.ProductList .ProductItem[FilterSupply="6"]>.Photo>.Status {
    background: red!important
}

[T=WebSupply]>.ProductList .ProductItem>.Info {
    display: flex;
    flex-direction: column;
    padding: 0 13px;
    z-index: 1
}

[T=WebSupply]>.ProductList .ProductItem>.Info>.Name {
    font-size: 12px;
    color: #0621a5;
    line-height: 23px
}

[T=WebSupply]>.ProductList .ProductItem>.Info>.Variation,[T=WebSupply]>.ProductList .ProductItem>.Info>.Code,[T=WebSupply]>.ProductList .ProductItem>.Info>.Barcode {
    font-size: 12px;
    color: #000000;
    line-height: 16px;
}

[T=WebSupply]>.ProductList .ProductItem>.Info>.Address {
    font-size: 12px;
    line-height: 20px;
    width: 230px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
    text-align: left
}

[T=WebSupply]>.ProductList .ProductItem>.Nav {
    width: 20px;
    flex: none;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 300;
    color: #0621a5;
    margin-left: auto
}

[T=WebSupply]>.ProductList .ProductItem>.Background {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 22px;
    overflow: hidden;
    mix-blend-mode: overlay;
    background-blend-mode: overlay;
    filter: opacity(1);
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    background-blend-mode: overlay;
    mix-blend-mode: normal;
    border-radius: 22px;
    opacity: 1;
    backdrop-filter: brightness(1.7)
}



.BottomNavArea {
    width: 100%;
    height: 75px;
    background: linear-gradient(180deg,#042AE5,#00188D);
    position: fixed;
    bottom: 0;
    display: flex;
    height: 75px;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    z-index: 9;
    transition: all 1s
}

.BottomNavItem {
    width: 100%;
    color: #fff;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative
}

.BottomNavItem.Active>i::after {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    width: 10px;
    height: 10px;
    background: #ff0045 0% 0% no-repeat padding-box;
    opacity: 1;
    border-radius: 100%;
    z-index: 1
}

.BottomNavItem>i {
    font-size: 18px;
    margin-bottom: 10px;
    position: relative
}

.BottomNavItem>span {
    font-size: 11px;
    font-weight: 100
}




.SupplyComplete {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent linear-gradient(179deg,#021883 0%,#4b6cff 38%,#001786 86%) 0% 0% no-repeat padding-box;
    z-index: 10;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transition: all .4s
}

.SupplyComplete>.Icon {
    background: #3458ff;
    border: 2px solid #fff;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px
}

.SupplyComplete>.Text {
    width: 100%;
    text-align: center;
    color: #fff;
    margin-bottom: 14px;
    font-weight: 100
}

.SupplyComplete>.Btn {
    padding: 12px 24px;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 4px;
    text-align: center;
    font-weight: 100;
    font-size: 14px;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    background: transparent;
}

body.Complete .SupplyComplete {
    opacity: 1;
    transition: all .4s
}

body.Complete .BottomNavArea {
    opacity: 0;
    transition: all .4s
}

body.Complete [T=WebSupply] {
    opacity: 0;
    transition: all .4s
}

.SupplyComplete>.Btn.Query {
    opacity: .8;
    pointer-events: none;
    border-color: #000;
    color: #000
}

.SupplyComplete>.Btn.Query:before {
    content: "";
    background: #223cb300 url(/Library/Img/loading_Ajax.svg);
    background-size: 22px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: 50%
}
@keyframes blinkBorder {
  0%, 100% {
    border-color: #f00;
    color: #f00;
  }
  50% {
    border-color: transparent;
    color: inherit;
  }
}

.blink-border {
  animation: blinkBorder 0.5s ease-in-out 5; /* 0.5sn x 5 tekrar */
}




.PageInPopup.Mobil .PopupArea .TitleBox .SingleProduct {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0
}

.PageInPopup.Mobil .PopupArea .TitleBox .SingleProduct>.Photo {
    width: 70px;
    position: relative;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    overflow: hidden;
    flex: none
}

.PageInPopup.Mobil .PopupArea .TitleBox .SingleProduct>.Photo>img {
    width: 70px
}

.PageInPopup.Mobil .PopupArea .TitleBox .SingleProduct>.Info {
    width: 100%;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    color: #0621a5
}

.PageInPopup.Mobil .PopupArea .TitleBox .SingleProduct>.Info>.Name {
    width: 100%
}

.PageInPopup.Mobil .PopupArea .TitleBox .SingleProduct>.Info>.Variation {
    width: 100%
}

.PageInPopup.Mobil .PopupArea .TitleBox .SingleProduct>.Info>.Member {
    width: 100%
}

.PageInPopup.Mobil .PopupArea .TitleBox .SingleProduct>.Info>.Order {
    width: 100%
}

.PageInPopup.Mobil .PopupArea .TitleBox .SingleProduct>.Info>.Barcode {
    width: 100%
}


section{width:100%}
section .Tabs{width:100%;display: flex;gap: 5px;margin-bottom: 20px;}
section .Tabs .TabItem{width:100%;background: #efefef;padding: 9px 12px;border-radius: 4px;display: flex;align-items: center;justify-content: center;}
section .Tabs .TabItem.active{background: #fff;border: 1px solid #484d98;color: #484d98;font-weight: 500;}
section .TabView{width:100%;display: none;}
section .TabView.active{display: block;}
section .TabView .List{width:100%}
section .TabView .List .Item{
    display: flex;
    gap: 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 5px;
}
section .TabView .List .Item .Photo{
    width: 50px;
    border-radius: 5px;
    border: 1px solid #c1c1c1;
    overflow: hidden;
    flex: none;
}
section .TabView .List .Item .Photo>img{width:100%;display:block}
section .TabView .List .Item .Info{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}
section .TabView .List .Item .Info .Name{width:100%;font-weight: 500;margin-bottom: 6px;}
section .TabView .List .Item .Info .Color{width:100%}
section .TabView .List .Item .Info .Variation{width:100%}
section .TabView .List .Item .Stock{
    background: #484d98;
    line-height: 30px;
    padding: 3px;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    width: 60px;
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    align-content: center;
}


.TitleBox .Item{
    display: flex;
    gap: 4px;
    padding: 8px;
    margin: 20px 0px;
    line-height: initial;
}
.TitleBox .Item .Photo{
    width: 85px;
    border-radius: 5px;
    border: 1px solid #c1c1c1;
    overflow: hidden;
    flex: none;
}
.TitleBox .Item .Photo>img{width:100%;display:block}
.TitleBox .Item .Info{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    color: #fff;
    text-align: left;
}
.TitleBox .Item .Info .Name{width:100%;font-weight: 500;margin-bottom: 6px;}
.TitleBox .Item .Info .Color{width:100%}
.TitleBox .Item .Info .Variation{width:100%}
.TitleBox .Item .Stock{
    background: #000;
    line-height: 30px;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    width: 70px;
    height: 40px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.CacheItem{
	display: flex;
    padding: 12px;
    border: 1px solid #ccc;
    margin: 8px 0px;
    border-radius: 3px
}
.CacheItem .Name>span:nth-child(1){
	width: 100%;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 11px;
}
.CacheItem .Name>span:nth-child(2){
	width: 100%;
	font-size: 11px;
	color: #243ecb;
}
.CacheItem .Check{width: 20px;margin-right: 10px;position: relative;}
.CacheItem .Check:before{
	content:"";
	display: flex;
	width: 16px;
	height: 16px;
	border: 1px solid;
} 
.CacheItem[completed="Load"]{width:100%}
.CacheItem[completed="Load"] .Check:before{content:"";background: #223cb300 url(/Library/Img/loading_Ajax.svg);background-repeat: no-repeat;width: 23px;height: 18px;position: relative;z-index: 2;display: block;background-size: 21px;border-color: transparent;}
.CacheItem[completed="1"]{width:100%;border-color: #8BC34A;background: #f5ffea;}
.CacheItem[completed="1"] .Check:after{content:"";display: block;width: 10px;height: 10px;background: #4CAF50;position: absolute;top: 4px;left: 4px;}
.CacheItem[completed="err"]{width:100%;border-color: #ff110080;background: #f4433605;}
.CacheItem[completed="err"] .Check:before{content:"";border-color: #f00;}


/* ==================================================================
   SPECTRUM RENK SEÇİCİ - MODERN TASARIM
   ================================================================== */

/* 1. Input Görünümü (Tıklanmadan Önceki Hali) */
.sp-replacer.custom-spectrum {
    display: flex;
    align-items: center;
    width: 100%;
    height: 38px; /* Diğer inputlarla aynı yükseklik için ayarlayabilirsiniz */
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0px 0px 4px 4px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    cursor: pointer;
}

.sp-replacer.custom-spectrum:hover {}

/* Renk önizleme kutucuğu */
.sp-replacer.custom-spectrum .sp-preview {
    width: 100%;
    height: 42px;
    border: 0;
    border-radius: 0;
    margin: 0;
    outline: none;
}

/* "transparent" seçildiğinde önizleme */
.sp-replacer.custom-spectrum .sp-preview .sp-clear-display {
    background-position: 0 0, 10px 10px;
    background-size: 10px;
}

/* Aşağı ok ikonu */
.sp-replacer.custom-spectrum .sp-dd {
    margin-left: auto; /* Oku sağa yaslar */
    font-size: 10px;
    color: #6c757d;
    display: none;
}


/* 2. Açılan Palet Tasarımı */
.sp-container.custom-spectrum {
    border-radius: 8px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    padding: 10px;
    width: 260px;
}

/* Renk seçme alanı ve kaydırıcılar */
.sp-container.custom-spectrum .sp-picker-container {
    padding: 0;
    margin-bottom: 10px;
}

/* Hazır renk paleti */
.sp-container.custom-spectrum .sp-palette-container {
    border: none;
}

.sp-container.custom-spectrum .sp-thumb-el {
    width: 22px;
    height: 22px;
    border-radius: 50%; /* Renkleri yuvarlak yapar */
    border: none;
    transition: transform 0.1s ease-out;
}

.sp-container.custom-spectrum .sp-thumb-el:hover,
.sp-container.custom-spectrum .sp-thumb-el.sp-thumb-active {
    transform: scale(1.15);
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

/* Butonlar (Seç, İptal, Temizle) */
.sp-container.custom-spectrum .sp-button-container {
    background-color: transparent;
    border-top: 1px solid #f0f0f0;
    padding-top: 10px;
    margin-top: 5px;
}

.sp-container.custom-spectrum .sp-choose,
.sp-container.custom-spectrum .sp-cancel {
    background-image: none !important;
    border: 1px solid transparent;
    text-shadow: none;
    border-radius: 4px;
    padding: 6px 15px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.sp-container.custom-spectrum .sp-choose {
    background-color: #007bff;
    color: white;
}

.sp-container.custom-spectrum .sp-choose:hover {
    background-color: #0069d9;
}

.sp-container.custom-spectrum .sp-cancel {
    background-color: #f8f9fa;
    color: #6c757d;
    border: 1px solid #ced4da;
}

.sp-container.custom-spectrum .sp-cancel:hover {
    background-color: #e2e6ea;
}

/* Renk kodu input'u */
.sp-container.custom-spectrum .sp-input {
    border-radius: 4px;
    border: 1px solid #ced4da;
    background: #f8f9fa;
    color: #495057;
}