body.noLeftBar{padding-left:0 !important}

.som-barcode-camera-modal {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    transition: z-index 0s linear .3s,opacity ease .3s
}

.som-barcode-camera-modal.active {
    z-index: 999;
    opacity: 1;
    pointer-events: all;
    transition: opacity ease .3s
}

.som-barcode-camera-modal>.som-barcode-camera-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #00000050;
    z-index: 1
}

.som-barcode-camera-modal>.som-barcode-camera-modal-close-button {
    position: absolute;
    background: #158;
    width: 45px;
    height: 45px;
    top: 6px;
    right: 15px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: background-color ease .3s,color ease .3s
}

.som-barcode-camera-modal.active>.som-barcode-camera-modal-close-button {
    background-color: #fff;
    color: #444
}

.som-barcode-camera-modal>.som-barcode-camera-modal-content {
    background-color: #fff;
    border-radius: 10px;
    padding: 5px;
    position: relative;
    z-index: 2;
    transform: scale(0);
    transition: transform ease .3s;
    width: calc(100% - 70px);
    height: calc(100% - 60px);
    display: flex;
    flex-direction: column
}

.som-barcode-camera-modal.active>.som-barcode-camera-modal-content {
    transform: scale(1)
}

.som-barcode-camera-wrapper {
    height: calc(100% - 45px);
    width: 100%;
    margin-bottom: 5px;
    border-radius: 6px;
    background: #000;
    border: 1px solid #000;
    position: relative
}

.som-barcode-camera-animation-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.som-barcode-camera-animation-layer-1 {
    position: absolute;
    width: 0%;
    height: 0%;
    border: 30px solid #00000000;
    opacity: 0
}

.som-barcode-camera-wrapper.active .som-barcode-camera-animation-layer-1 {
    opacity: 1;
    width: 100%;
    height: 100%;
    border-color: #00000050;
    transition: opacity .3s ease 0s,width .3s ease .3s,height .3s ease .6s,border-color .3s ease .9s
}

.som-barcode-camera-animation-layer-1>span {
    border: 2px solid #ff0;
    display: inline-block;
    position: absolute;
    width: 40px;
    height: 40px
}

.som-barcode-camera-animation-layer-1>span:nth-child(1) {
    top: -1px;
    left: -1px;
    border-right: 0;
    border-bottom: 0
}

.som-barcode-camera-animation-layer-1>span:nth-child(2) {
    top: -1px;
    right: -1px;
    border-left: 0;
    border-bottom: 0
}

.som-barcode-camera-animation-layer-1>span:nth-child(3) {
    bottom: -1px;
    left: -1px;
    border-top: 0;
    border-right: 0
}

.som-barcode-camera-animation-layer-1>span:nth-child(4) {
    bottom: -1px;
    right: -1px;
    border-top: 0;
    border-left: 0
}

.som-barcode-camera {
}

.som-barcode-camera>video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px
}

.som-barcode-camera>canvas {
    display: none
}

.som-barcode-panel {
    display: flex;
    flex-direction: row
}

.som-barcode-panel>button {
    width: 40%;
    min-width: 40px;
    height: 100%;
    border: none;
    background: #158;
    border-radius: 6px 0 0 6px;
    color: #fff;
    outline: none
}

.som-barcode-panel>select.som-barcode-type-select {
    border: 1px solid #ccc;
    border-left: 0;
    border-radius: 0;
    outline: none
}

.som-barcode-panel>select.som-barcode-camera-id-select {
    border: 1px solid #ccc;
    border-left: 0;
    border-radius: 0 6px 6px 0;
    outline: none
}

.som-barcode-camera-modal>.som-barcode-camera-modal-content {
    background-color: #fff;
    border-radius: 10px;
    padding: 5px;
    position: relative;
    z-index: 2;
    transform: scale(0);
    transition: transform ease .3s;
    width: calc(100% - 70px);
    height: calc(100% - 60px);
    display: flex;
    flex-direction: column
}

.som-barcode-camera-modal.active>.som-barcode-camera-modal-content {
    transform: scale(1)
}

.som-barcode-camera-wrapper {
    height: calc(100% - 45px);
    width: 100%;
    margin-bottom: 5px;
    border-radius: 6px;
    background: #000;
    border: 1px solid #000;
    position: relative
}

.som-barcode-camera-animation-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.som-barcode-camera-animation-layer-1 {
    position: absolute;
    width: 0%;
    height: 0%;
    border: 30px solid #00000000;
    opacity: 0
}

.som-barcode-camera-wrapper.active .som-barcode-camera-animation-layer-1 {
    opacity: 1;
    width: 100%;
    height: 100%;
    border-color: #00000050;
    transition: opacity .3s ease 0s,width .3s ease .3s,height .3s ease .6s,border-color .3s ease .9s
}

.som-barcode-camera-animation-layer-1>span {
    border: 2px solid #ff0;
    display: inline-block;
    position: absolute;
    width: 40px;
    height: 40px
}

.som-barcode-camera-animation-layer-1>span:nth-child(1) {
    top: -1px;
    left: -1px;
    border-right: 0;
    border-bottom: 0
}

.som-barcode-camera-animation-layer-1>span:nth-child(2) {
    top: -1px;
    right: -1px;
    border-left: 0;
    border-bottom: 0
}

.som-barcode-camera-animation-layer-1>span:nth-child(3) {
    bottom: -1px;
    left: -1px;
    border-top: 0;
    border-right: 0
}

.som-barcode-camera-animation-layer-1>span:nth-child(4) {
    bottom: -1px;
    right: -1px;
    border-top: 0;
    border-left: 0
}

.som-barcode-camera {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden
}

.som-barcode-camera>video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px
}

.som-barcode-camera>canvas {
    display: none
}

.som-barcode-panel {
    display: flex;
    flex-direction: row
}

.som-barcode-panel>button {
    width: 40%;
    min-width: 40px;
    height: 100%;
    border: none;
    background: #158;
    border-radius: 6px 0 0 6px;
    color: #fff;
    outline: none
}

.som-barcode-panel>select.som-barcode-type-select {
    border: 1px solid #ccc;
    border-left: 0;
    border-radius: 0;
    outline: none
}

.som-barcode-panel>select.som-barcode-camera-id-select {
    border: 1px solid #ccc;
    border-left: 0;
    border-radius: 0 6px 6px 0;
    outline: none
}

.PageView_v2.ErpCari .TabList {
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.PageView_v2.ErpCari .TabList>.TabItem {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 6px;
    border: 2px solid #eee;
    flex: none;
    padding: 5px 6px;
    margin-left: 14px;
    cursor: pointer
}

.PageView_v2.ErpCari .TabList>.TabItem:after {
    display: none
}

.PageView_v2.ErpCari .TabList>.TabItem.Active:after {
    content: "\f0dd";
    font-family: 'font awesome 6 pro';
    font-weight: 900;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display,inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    position: absolute;
    bottom: -17px;
    font-size: 42px;
    color: #3ca640
}

.PageView_v2.ErpCari .TabList>.TabItem>span:nth-child(1) {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: 0 0;
    border-radius: 6px;
    border: 0;
    flex: none;
    padding: 16px 22px;
    font-weight: 700
}

.PageView_v2.ErpCari .TabList>.TabItem>span:nth-child(2) {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: 0 0;
    border-radius: 6px;
    border: 0;
    flex: none;
    padding: 4px 22px;
    font-size: 21px
}

.PageView_v2.ErpCari .TabList>.TabItem.Active {
    background: #3ca640;
    border: 2px solid #238027;
    color: #fff
}

@import 'https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap';body {
    font-family: mulish,sans-serif;
    margin: 0;
    padding: 0;
    background: #3f51b5;
    padding-top: 0!important
}

@keyframes gradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

#Sound {
    display: none
}

#Success_Screen {
    z-index: 99999999999
}

#Error_Screen {
    z-index: 99999999999
}

body.New .PageView_v2 {
    padding-top: 60px;
    background: 0 0;
    margin: 0!important
}

body.New .PageView_v2 .control-panel {
    background: 0 0
}

body.New .PageView_v2 .control-panel {
    background: 0 0;
    border-color: #ffffff24;
    padding: 16px 32px;
    margin: 0
}

body.New .PageView_v2 .control-panel>.column .panel-title>.T {
}

body.New .PageView_v2 .control-panel>.column .panel-title>.sT {
}

body.New .control-panel>.column .panel-title {
    margin: 0;
    padding-bottom: 10px
}

body.New .v2Table-container {
}

body.New .PageView_v2 .v2Table-container .v2Table-overflow .ItemBox .Info .SubItem span:nth-child(1) {
    color: #c7c7c7
}

body.New .PageView_v2 .v2Table-container .v2Table-overflow .ItemBox .Info .SubItem span a {
    color: #f7f41b
}

body.New .PageView_v2 .v2Table-container .v2Table-overflow .ItemBox .Info .PriceBox .PriceArea .PriceTopArea .Box,body.New .PageView_v2 .v2Table-container .v2Table-overflow .ItemBox .Info .PriceBox .PriceArea .PriceBottomArea .Box {
    background-color: #fff
}

body.Closed .container-fluid .container-v3 .dash-head>.column .Title {
    color: #fff
}

body.Closed .container-fluid .container-v3 .dash-head>.column .Title>select[name=changeFirmReport] {
    color: #000
}

body.New header.headerv3 {
    border-color: #444;
    width: calc( 100% - 254px );
    margin-left: 0;
    display: flex;
    border-bottom: 1px solid #65656514;
    align-items: center;
    padding: 0 16px;
    position: fixed;
    top: 0;
    transition: all .2s;
    background: #fff
}

body.New table {
    background: #fff
}

body.New header.headerv3>.HamburgerNav>i {
}

body.New header.headerv3>.MobAllSearch i {
    color: #fff
}

.container-v3 {
    padding: 14px!important;
    padding-top: 80px!important
}

.container-v3.p0 {
    padding-top: 0!important
}

body.ScrollOn header.headerv3 {
    transition: all .3s;
    position: fixed;
    top: -60px
}

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

body.New header.headerv3 .LogoBar {
    width: 100%;
    display: flex;
    margin: 36px 0;
    justify-content: flex-start;
    align-items: center
}

body.New header.headerv3 .LogoBar>.Icon {
    background: url(/NewSystem/Library/Img/logo.png);
    background-repeat: no-repeat;
    background-size: 26px;
    display: block;
    height: 28px;
    width: 26px
}

body.New header.headerv3 .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
}

body.New .table-footer-scroll-hide {
    bottom: 0;
    transform: initial!important;
    visibility: initial!important
}

.BlueBackground {
    position: fixed;
    background: url(/NewSystem/Library/Img/wallpaper_blue.jpg);
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    transition: opacity .4s;
    background: linear-gradient(180deg,#00188D,#153AF3,#2448FF,#14257B,#020853,#00188D 140% );
    transition: background 10s
}

.BlueBackground {
    background-size: cover;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -3;
    opacity: 1;
    transition: opacity 1s
}

.BlueBackground:before {
    content: "";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    opacity: .3
}

@keyframes sf-fly-by-1 {
    from {
        transform: translateZ(-600px);
        opacity: .5
    }

    to {
        transform: translateZ(0);
        opacity: .5
    }
}

@keyframes sf-fly-by-2 {
    from {
        transform: translateZ(-1200px);
        opacity: .5
    }

    to {
        transform: translateZ(-600px);
        opacity: .5
    }
}

@keyframes sf-fly-by-3 {
    from {
        transform: translateZ(-1800px);
        opacity: .5
    }

    to {
        transform: translateZ(-1200px);
        opacity: .5
    }
}

.star-field {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    perspective: 600px;
    -webkit-perspective: 600px;
    z-index: -1
}

.star-field .layer {
    box-shadow: -411px -476px #ccc,777px -407px #d4d4d4,-387px -477px #fcfcfc,-91px -235px #d4d4d4,491px -460px #f7f7f7,892px -128px #f7f7f7,758px -277px #ededed,596px 378px #ccc,647px 423px #f5f5f5,183px 389px #c7c7c7,524px -237px #f0f0f0,679px -535px #e3e3e3,158px 399px #ededed,157px 249px #ededed,81px -450px #ebebeb,719px -360px #c2c2c2,-499px 473px #e8e8e8,-158px -349px #d4d4d4,870px -134px #cfcfcf,446px 404px #c2c2c2,440px 490px #d4d4d4,414px 507px #e6e6e6,-12px 246px #fcfcfc,-384px 369px #e3e3e3,641px -413px #fcfcfc,822px 516px #dbdbdb,449px 132px #c2c2c2,727px 146px #f7f7f7,-315px -488px #e6e6e6,952px -70px #e3e3e3,-869px -29px #dbdbdb,502px 80px #dedede,764px 342px #e0e0e0,-150px -380px #dbdbdb,654px -426px #e3e3e3,-325px -263px #c2c2c2,755px -447px #c7c7c7,729px -177px #c2c2c2,-682px -391px #e6e6e6,554px -176px #ededed,-85px -428px #d9d9d9,714px 55px #e8e8e8,359px -285px #cfcfcf,-362px -508px #dedede,468px -265px #fcfcfc,74px -500px #c7c7c7,-514px 383px #dbdbdb,730px -92px #cfcfcf,-112px 287px #c9c9c9,-853px 79px #d6d6d6,828px 475px #d6d6d6,-681px 13px #fafafa,-176px 209px #f0f0f0,758px 457px #fafafa,-383px -454px #ededed,813px 179px #d1d1d1,608px 98px #f5f5f5,-860px -65px #c4c4c4,-572px 272px #f7f7f7,459px 533px #fcfcfc,624px -481px #e6e6e6,790px 477px #dedede,731px -403px #ededed,70px -534px #ccc,-23px 510px #cfcfcf,-652px -237px #f5f5f5,-690px 367px #d1d1d1,810px 536px #d1d1d1,774px 293px #c9c9c9,-362px 97px #c2c2c2,563px 47px #dedede,313px 475px #e0e0e0,839px -491px #e3e3e3,-217px 377px #d4d4d4,-581px 239px #c2c2c2,-857px 72px #ccc,-23px 340px #dedede,-837px 246px #fff,170px -502px #cfcfcf,822px -443px #e0e0e0,795px 497px #e0e0e0,-814px -337px #cfcfcf,206px -339px #f2f2f2,-779px 108px #e6e6e6,808px 2px #d4d4d4,665px 41px #d4d4d4,-564px 64px #ccc,-380px 74px #cfcfcf,-369px -60px #f7f7f7,47px -495px #e3e3e3,-383px 368px #f7f7f7,419px 288px #d1d1d1,-598px -50px #c2c2c2,-833px 187px #c4c4c4,378px 325px #f5f5f5,-703px 375px #d6d6d6,392px 520px #d9d9d9,-492px -60px #c4c4c4,759px 288px #ebebeb,98px -412px #c4c4c4,-911px -277px #c9c9c9;
    transform-style: preserve-3d;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 4px;
    width: 4px;
    border-radius: 2px
}

.star-field .layer:nth-child(1) {
    animation: sf-fly-by-1 5s linear infinite
}

.star-field .layer:nth-child(2) {
    animation: sf-fly-by-2 5s linear infinite
}

.star-field .layer:nth-child(3) {
    animation: sf-fly-by-3 5s linear infinite
}

.BlackBackground {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 1s;
    z-index: -3
}

body[G=Genel] .BlackBackground {
    background: linear-gradient(180deg,rgb(18,95,107),#086f43,#0c485b 70%,#00188d 205%)
}

body[G=Genel] .BottomNavArea>.Overflow {
    width: 0;
    background: linear-gradient(180deg,#125f89,#05344e 140%);
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    transition: all .4s
}

body[G=Kargo] .BlackBackground {
    background: linear-gradient(180deg,rgb(85 84 9),#7c6212,#444005 70%,#00188d 205%)
}

body[G=Kargo] .BottomNavArea>.Overflow {
    width: 0;
    background: linear-gradient(180deg,#737328,#3c3b1d 140%);
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    transition: all .4s
}

body[G=PazarYeri] .BlackBackground {
    background: linear-gradient(180deg,rgb(54 6 22),#bf2f9094,#4e0a21 70%,#00188d 205%)
}

body[G=PazarYeri] .BottomNavArea>.Overflow {
    width: 0;
    background: linear-gradient(180deg,#75154c,#570e3f94 140%);
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    transition: all .4s
}

body[G=Odeme] .BlackBackground {
    background: linear-gradient(180deg,rgb(72 25 10),#f66102b8,#642410 70%,#00188d 205%)
}

body[G=Odeme] .BottomNavArea>.Overflow {
    width: 0;
    background: linear-gradient(180deg,#ec653f,#5d1b08 140%);
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    transition: all .4s
}

body[G=Toptan] .BlackBackground {
    background: linear-gradient(180deg,rgb(96 17 109),#9c28b7b3,#4d0e57 70%,#00188d 205%)
}

body[G=Toptan] .BottomNavArea>.Overflow {
    width: 0;
    background: linear-gradient(180deg,#681c8e,#4a0b59b3 140%);
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    transition: all .4s
}

body[G=Yurtdisi] .BlackBackground {
    background: linear-gradient(180deg,#7bc4ff,#1d5e93,#05487e 70%,#7bc4ff 205%)
}

body[G=Yurtdisi] .BottomNavArea>.Overflow {
    width: 0;
    background: linear-gradient(180deg,#17578f,#041829 140%);
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    transition: all .4s
}

body[G=Fenomen] .BlackBackground {
    background: linear-gradient(180deg,rgb(96 17 109),#9c28b7b3,#4d0e57 70%,#00188d 205%)
}

body[G=Fenomen] .BottomNavArea>.Overflow {
    width: 0;
    background: linear-gradient(180deg,#671f8c,#3c0749b3 140%);
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    transition: all .4s
}

body[G=Yardim] .BlackBackground {
    background: linear-gradient(180deg,rgb(96 17 109),#9c28b7b3,#4d0e57 70%,#00188d 205%)
}

body[G=Yardim] .BottomNavArea>.Overflow {
    width: 0;
    background: linear-gradient(180deg,#671f8c,#3c0749b3 140%);
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    transition: all .4s
}

body[G=Xml] .BlackBackground {
    background: linear-gradient(180deg,rgb(96 17 109),#9c28b7b3,#4d0e57 70%,#00188d 205%)
}

body[G=Xml] .BottomNavArea>.Overflow {
    width: 0;
    background: linear-gradient(180deg,#671f8c,#3c0749b3 140%);
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    transition: all .4s
}

body[G=Request] .BlackBackground {
    background: linear-gradient(180deg,#ec653f,#ae4f35,#762711 70%,#ec653f 205%)
}

body[G=Request] .BottomNavArea>.Overflow {
    width: 0;
    background: linear-gradient(180deg,#ec653f,#5d1b08 140%);
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    transition: all .4s
}

body[G=Request] .SubItemList .ListContent>span {
    color: #ffe3db
}

body[G=Request] .SubItemList .ListContent .Infor .ListContentRight>.Btn {
    color: #ffe3db;
    border-color: #ffe3db
}

body[G=Request].New .Popup_v2 .Modal.Mobile .Htm .Document .Center {
    background: linear-gradient(180deg,#ec653f,#ae4f35,#762711 70%,#ec653f 205%);
    padding: 24px
}

body[G=Request].New .Popup_v2 .Modal.Mobile .Htm .Document .Bottom {
    background-color: #8e331b
}

body[G=Request].New .Popup_v2 .Modal.Mobile .Htm .Document .Title {
    background: #f2977d
}

body[G=Request].New .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem>.Info>.Name {
    font-size: 14px;
    color: #000;
    margin-bottom: 6px
}

body[G=Request].New .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem>.Info>.Color {
    font-size: 12px;
    color: #000;
    line-height: 17px
}

body[G=Request].New .Popup_v2 .BarcodeArea>.Input input {
    background: #89351e;
    border: 1px solid #d75e3c
}

body[G=Request].New .Popup_v2 .BarcodeArea>.Input .CamScreen>div {
    border-top: 3px solid #782811;
    border-left: 3px solid #7d2c13;
    border-right: 3px solid #7d2c15;
    border-bottom: 3px solid #8b311a
}

body[G=Request].New .Popup_v2 .BarcodeArea>.Input .CamScreen>span:nth-child(2) {
    background: linear-gradient(182deg,#7b2b14 4%,#8a3119 84%)
}

body[G=Request].New .Popup_v2 .BarcodeArea>.Input .CamScreen>span:nth-child(3) {
    background: #7d2b13
}

.LineBackground {
    opacity: .2;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none
}

body[P=WebSupplyDashboard] .LineBackground {
    display: block
}

body.Next .LineBackground {
    opacity: 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
}

* {
    box-sizing: border-box
}

body.New.FullScreen .sidebar {
    display: none
}

body.New.FullScreen {
    padding: 0
}

body.New.FullScreen .PageView_v2 {
    padding: 0
}

body.New.FullScreen header.headerv3 {
    display: none
}

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

.PageArea {
    width: 100%;
    padding: 0 20px;
    position: relative;
    padding-bottom: 100px
}

.FooterArea {
    width: 100%
}

.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
}

.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: #fff;
    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 .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
}

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

.SubPage .Item.Active {
    border-bottom: 0
}

.SubPage .Item:nth-child(n+3) {
    margin-top: 0
}

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

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

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

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

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

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

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

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

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

.SubPage .Head {
}

.SubPage .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
}

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

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

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

.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
}

.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
}

[T=WebSupply] {
    width: 100%;
    position: relative
}

body.OpenPopup [T=WebSupply] {
}

[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,#042AE5,transparent)
}

[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;}
.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;
    margin-top: 12px;
    z-index: 1;
    position: sticky;
    top: 20px;
    padding-top: 160px;
    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)
}

body.New .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.New .Popup_v2.Mobil.Bluer {
    filter: blur(4px) brightness(.8) contrast(.9);
    background-blend-mode: color-dodge;
    mix-blend-mode: inherit;
    transition: all .3s
}

body.New .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.New .Popup_v2.Mobil .PopupOwerflow.Dark {
    background: #00000017;
    mix-blend-mode: normal;
    opacity: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px)
}

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

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

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


.SizeItem{
    background: #fff;
    padding: 6px 16px;
    border: 1px solid #000000;
    border-radius: 4px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
 }
 .SizeItem:not(.Disabled):hover{
    border-color: #6ccd70
 }
 .SizeItem.Select{
    background: #9df1a1;
    color: #135916;
    border-color: #6ccd70;
 }
 .SizeItem.Disabled{
    background: #f1f1f1;
    color: #b1b1b1;
    border-color: #dddddd;
    pointer-events:none;
 }

body.New .Popup_v2 .Modal.center-40 {
    max-width: 40%
}
body.New .Popup_v2 .Modal.Right {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background: #fff;
}
body.New .Popup_v2 .Modal.Right .Htm .Document{
    height: 100%;
    border: 0;
    background: transparent;
    padding: 24px;
    overflow: auto;
}
body.New .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.New .Popup_v2 .Modal.Left {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background: #fff;
}
body.New .Popup_v2 .Modal.Left .Htm .Document{
    height: 100%;
    border: 0;
    background: transparent;
    padding: 24px;
    overflow: auto;
}
body.New .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.New .Popup_v2 .Modal.newRight {
    position: absolute;
    right: -100%;
    top: 0;
    height: 100%;
    background: #fff;
    transform:all 0.3s
}
body.New .Popup_v2.show .Modal.newRight {
    right: 0%;
    transform:all 0.3s
}
body.New .Popup_v2 .Modal.newRight .Htm .Document{
    height: 100%;
    border: 0;
    background: transparent;
    padding: 24px;
    overflow: auto;
    display: block;
}
body.New .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.New .Popup_v2 .Modal.center-50 {
    max-width: 50%
}

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

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

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

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

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

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

body.New .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.New .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.New .Popup_v2.Active .Modal.Mobile .Htm .Document {
    bottom: 0;
    transition: all .6s
}

body.New .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.New .Popup_v2 .Modal.Mobile .Htm .Document .Close::before {
    content: "X";
    font-family: sans-serif;
    font-size: 22px;
    bottom: 14px;
    right: 5px
}

body.New .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.New .Popup_v2 .Modal.Mobile .Htm .Document .Close:hover {
    background-color: transparent;
    color: #fff
}

body.New .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.New .Popup_v2 .Modal.Mobile .Htm .Document .Title .SingleProduct {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0
}

body.New .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.New .Popup_v2 .Modal.Mobile .Htm .Document .Title .SingleProduct>.Photo>img {
    width: 70px
}

body.New .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.New .Popup_v2 .Modal.Mobile .Htm .Document .Title .SingleProduct>.Info>.Name {
    width: 100%
}

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

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

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

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

body.New .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.New .Popup_v2 .Modal.Mobile .Htm .Document .Title>.RightBtn.Active {
    display: block
}

body.New .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.New .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.New .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.New .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.New .Popup_v2 .Modal.Mobile .Htm .Document .Center .ToolsBar>.Item:first-child {
    border: 0
}

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

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

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

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

body.New .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.New .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem {
    }
}

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

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

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

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

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

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

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

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

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

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

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

body.New .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.New .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.New .Popup_v2 .Modal.Mobile .Htm .Document .Center .ProductItem[S="1"]>.QuantityBar {
    display: flex;
    background: #000
}

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

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

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

body.New .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.New .Popup_v2 .Modal.Mobile .Htm .Document .Bottom>.Right {
    display: flex;
    align-items: center;
    justify-content: center
}

body.New .Popup_v2 .Modal.Mobile .Htm .Document .Bottom>.Right .Btn,body.New .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
}

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

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

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

body.New .Popup_v2 .Modal.Mobile .Htm .Document .Center>.BtnList {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px
}

body.New .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.New .Popup_v2 .Modal.Mobile .Htm .Document .Center>.BtnList .Btn.Line>span {
    margin-right: 9px
}

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

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

body.New .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.New .Popup_v2 .Modal .Htm .Document .Title {
    text-align: left;
    position: relative;
    margin-bottom: 15px;
    padding: 0 13px;
}

body.New .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.New .Popup_v2.top-0 .Modal .Htm {
    vertical-align: top;
    padding-top: 50px
}

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

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

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

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

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

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

body.New .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.New .Popup_v2 .Modal .Htm .Document .Close::before {
    content: "\e939";
    font-family: misszenne!important;
    font-size: 10px
}

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

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

body.New .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.New .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.New .Popup_v2 .Modal .Htm .Document .Center .nonRECORD>.Icon:before {
    position: relative;
    z-index: 9
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body.New .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.New .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.New .Popup_v2.Query .Modal.Mobile .TopMessage.Show {
    bottom: 30px;
    transition: all .4s;
    box-shadow: 0 0 100px 10px #000
}

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

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

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

body.New .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.New .Popup_v2 .Modal.Mobile .SupplyStatusItem>.Color {
    width: 18px;
    height: 18px;
    border-radius: 100%;
    flex: none;
    margin-right: 20px
}

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

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

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

body.New .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.New .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.New .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.New .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.New .Popup_v2 .Modal.Mobile .SupplyFilterItem>.Color {
    width: 18px;
    height: 18px;
    border-radius: 100%;
    flex: none;
    margin-right: 20px
}

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

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

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

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

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

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



body.New .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.New .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.New .Popup_v2 .Modal.Mobile .TrendyolControlOrderItem[S="1"] {
    text-indent: 40px;
    background: #223cb3;
    transition: all 0.3s;
}
body.New .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.New .Popup_v2 .Modal.Mobile .TrendyolControlOrderItem[S="1"] .Status{
    background: #000000;
}
body.New .Popup_v2 .Modal.Mobile .TrendyolControlOrderItem[S="2"] .Status{
    background: #f00;
}
body.New .Popup_v2 .Modal.Mobile .TrendyolControlOrderItem[S="3"] .Status{
    background: #4CAF50;
}


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

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

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

body.New .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.New .Popup_v2 .Modal.Mobile .OrderItem>.Info {
    width: 100%
}

body.New .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.New .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.New .Popup_v2 .Modal.Mobile .OrderItem>.Info>.OrderItemTop .Item {
    width: 100%;
    display: flex;
    flex-direction: column
}

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

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

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

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

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

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

body.New .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.New .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
}

.XHide {
    display: none!important
}

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

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

.Page[T=Login] .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=Login] .PageArea {
    width: 100%;
    padding: 0 50px;
    position: relative;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc( 100% - 130px)
}

.LoginFirstScreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-bottom: 120px
}

.LoginFirstScreen>.Title {
    display: flex;
    font-size: 26px;
    color: #fff;
    margin-bottom: 18px;
    font-weight: 500
}

.LoginFirstScreen>.Text {
    display: flex;
    font-size: 13px;
    color: #fff;
    opacity: .9;
    margin-bottom: 30px
}

.LoginFirstScreen>.Btn {
    display: flex;
    width: 100%;
    padding: 16px 0;
    position: relative;
    align-items: center;
    justify-content: center;
    border-radius: 4px
}

.LoginFirstScreen>.Btn>span {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 14px
}

.LoginFirstScreen>.Btn>.Bg {
    content: "";
    width: 100%;
    height: 100%;
    background: #3c58fe;
    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;
    border-radius: 4px;
    border: 1px solid #4776ff
}

.Page[T=Login] .errorText {
    background: #ff000059;
    border: 1px solid red;
    color: #fff;
    padding: 14px;
    margin: 0 auto;
    width: 80%;
    margin-bottom: -62px;
    min-height: 62px
}

.FormBody {
    width: 100%;
    display: none
}

.FormBody>form {
    width: 100%
}

.FormBody>form>.item {
    width: 100%;
    margin-bottom: 20px;
    position: relative
}

.FormBody>form>.item>label {
    width: 100%;
    font-size: 12px;
    color: #fff;
    opacity: .9;
    font-weight: 300;
    margin-bottom: 10px
}

.FormBody>form>.item>input {
    width: 100%;
    padding: 22px;
    border: 0;
    background: #312cd8;
    color: #fff;
    font-size: 13px;
    border-radius: 4px
}

.FormBody>form>.item>input::placeholder {
    color: #fff;
    opacity: .7
}

.FormBody>form>.item>.showPass {
    position: absolute;
    right: 10px;
    bottom: 20px;
    color: #b5c4eb;
    font-size: 18px
}

.FormBody>form>.item>.showPass::before {
    content: "\f06e"
}

.FormBody>form>.item>.showPass.activePass::before {
    content: "\f070"
}

.FormBody>form>.item>.Remember {
    width: 100%;
    text-align: right
}

.FormBody>form>.item>.Remember>span {
    color: #fff;
    font-size: 10px;
    text-decoration: underline;
    opacity: .5
}

.FormBody>form>.item>button {
    display: flex;
    width: 100%;
    padding: 16px 0;
    position: relative;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 0
}

.FormBody>form>.item>button>span {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 14px
}

.FormBody>form>.item>button>.Bg {
    content: "";
    width: 100%;
    height: 100%;
    background: #3c58fe;
    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;
    border-radius: 4px;
    border: 1px solid #4776ff
}

.FormBody>form>.item>button.Query {
    opacity: .8;
    pointer-events: none
}

.FormBody>form>.item>button.Query:before {
    content: "";
    background: #223cb3 url(/Library/Img/loading_Ajax.svg);
    width: 70px;
    height: 48px;
    position: relative;
    z-index: 2;
    display: block;
    background-size: 40px;
    position: absolute;
    right: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: 50%
}

.Popup_v2 .Modal.Mobile .Htm .Document .Bottom>.Right .theme-button.Query {
    opacity: .8;
    pointer-events: none;
    background: #00000045;
    color: #ffffff91;
    border-color: #cccccc57
}

.Popup_v2 .Modal.Mobile .Htm .Document .Bottom>.Right .theme-button.Query:after {
    content: "";
    background: #223cb300 url(/Library/Img/loading_Ajax.svg);
    width: 26px;
    height: 16px;
    position: relative;
    z-index: 2;
    display: block;
    background-size: 28px;
    right: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: 50%
}

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

body.New .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.New .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.New .DepotViewContainer .Container {
    padding: 0
}

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

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

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

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

body.New .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.New .DepotViewContainer .TabList.HideArea {
    top: -72px;
    transition: all .3s
}

body.New .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.New .DepotViewContainer .Container .ViewArea .TabList .TabItem.Active {
    background: #fff;
    color: #0924a9
}

body.New .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.New .DepotViewContainer .Container .ViewArea .TabViews.HideArea {
    top: -930px;
    transition: all .3s
}

body.New .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.New .DepotViewContainer .Container .TabViews .DepotView {
    width: 100%
}

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

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

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

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

body.New .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.New .DepotViewContainer .Container .ViewArea .TabViews>.BarcodeArea>.Input input::placeholder {
    color: #ffffff7d
}

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

body.New .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.New .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.New .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.New .DepotViewContainer .Container .ViewArea .TabViews>.BarcodeArea>.Input .DeviceChange>.Icon>img {
    height: 21px
}

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

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

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

body.New .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.New .DepotViewContainer .Container .TabViews .Istatistic .Box:last-child:after {
    display: none
}

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

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

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

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

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

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

body.New .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.New .DepotViewContainer .Container .TabViews .BarcodeArea>.Input input::placeholder {
    color: #fff
}

body.New .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.New .DepotViewContainer .Container .TabViews .ProductItem {
    }
}

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

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

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

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

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


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

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

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

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

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

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

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

body.New .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.New .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.New .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.New .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
}

.Popup_v2 .Modal.Mobile .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
}

.Popup_v2 .Modal.Mobile .OperationNav.isComing {
    pointer-events: none;
}

.Popup_v2 .Modal.Mobile .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
}

.Popup_v2 .Modal.Mobile .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
}

.Popup_v2 .Modal.Mobile .OperationSubNav.Show {
    display: flex
}

.Popup_v2 .Modal.Mobile .OperationNav>i {
    margin-right: 10px
}

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

.Popup_v2 .Modal.Mobile .OperationNav>.Arrow {
    width: 28px;
    margin-left: auto;
    text-align: center
}

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

.Popup_v2.Query {
}

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

.Popup_v2 .Modal.Mobile .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%
}

body.New .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.New .Popup_v2 .RangeBar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    margin-bottom: 10px;
    display: none
}

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

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

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

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

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

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

body.New .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.New .Popup_v2 .BarcodeArea.Active {
    position: relative;
    top: -140px;
    margin-bottom: -125px
}

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

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

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

body.New .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.New .Popup_v2 .BarcodeArea>.Input input::placeholder {
    color: #ffffff7d
}

body.New .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.New .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.New .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.New .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.New .Popup_v2 .BarcodeArea>.Input .DeviceChange>.Icon>img {
    height: 72px
}

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

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

body.New .DepotViewContainer .Container .ViewArea .PopPage.Show {
    bottom: 0;
    transition: all .3s;
    top: 0
}

body.New .DepotViewContainer .Container .ViewArea .PopPage {
    position: absolute;
    width: 100%;
    top: -100%;
    transition: all .3s;
    z-index: 1
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .Istatistic {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-shadow: 0 1px 0 0 #ffffff2b;
    background: #ffffff14
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .Istatistic .Box {
    background: 0 0;
    box-shadow: none;
    padding: 10px 0 5px;
    width: 100%;
    position: relative
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .Istatistic .Box:after {
    content: "";
    background: 0 0;
    box-shadow: 1px 0 0 0 #ffffff59;
    height: 15px;
    display: block;
    position: absolute;
    top: 20px;
    right: 0;
    width: 1px
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .Istatistic .Box:last-child:after {
    display: none
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .Istatistic .Box>span:nth-child(1) {
    font-size: 11px;
    color: #fff;
    font-weight: 200;
    width: 100%;
    display: block;
    text-align: center
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .Istatistic .Box>span:nth-child(2) {
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    line-height: 24px;
    width: 100%;
    display: block;
    text-align: center
}

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

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

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

body.New .DepotViewContainer .Container .ViewArea .PopPage>.BarcodeArea>.Input>form {
    width: 100%;
    display: flex;
    position: relative
}

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

body.New .DepotViewContainer .Container .ViewArea .PopPage>.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.New .DepotViewContainer .Container .ViewArea .PopPage>.BarcodeArea>.Input input::placeholder {
    color: #ffffff7d
}

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

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

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

body.New .DepotViewContainer .Container .ViewArea .PopPage>.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.New .DepotViewContainer .Container .ViewArea .PopPage>.BarcodeArea>.Input .DeviceChange>.Icon>img {
    height: 21px
}

body.New .DepotViewContainer .Container .ViewArea .PopPage>.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.New .DepotViewContainer .Container .ViewArea .PopPage>.BarcodeArea>.Input .CamScreen {
    width: 100%;
    margin-right: 10px;
    position: relative;
    border: 3px solid #fff;
    border-radius: 6px
}

body.New .DepotViewContainer .Container .ViewArea .PopPage>.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.New .DepotViewContainer .Container .ViewArea .PopPage>.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.New .DepotViewContainer .Container .ViewArea .PopPage>.BarcodeArea>.Input .CamScreen>span:nth-child(3) {
    position: absolute;
    background: #9c67fe;
    top: 22px;
    left: -3px;
    right: -3px;
    bottom: 22px
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .VirtualMarketSuccessArea {
    width: 100%;
    background: #00000047;
    min-height: 42px;
    display: flex
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .VirtualMarketSuccessArea .Content {
    width: 100%;
    padding: 5px 24px;
    display: flex;
    align-items: center
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .VirtualMarketSuccessArea .Content i {
    color: #fff;
    margin-right: 10px
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .VirtualMarketSuccessArea .Content span {
    font-size: 13px;
    color: #fff;
    font-weight: 200;
    width: 100%
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .VirtualMarketSuccessArea .Content .switch_checkbox {
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .VirtualMarketSuccessArea .Content .switch_checkbox label,.switch_radio label {
    padding: 0;
    margin: 0
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .VirtualMarketSuccessArea .Content .switch_checkbox label *,.switch_radio label * {
    vertical-align: middle
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .VirtualMarketSuccessArea .Content .switch_checkbox label input,.switch_radio label input {
    display: none
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .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
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .VirtualMarketSuccessArea .Content .switch_checkbox label input+span small,body.New .DepotViewContainer .Container .ViewArea .PopPage .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
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .VirtualMarketSuccessArea .Content .switch_checkbox label input:checked+span,body.New .DepotViewContainer .Container .ViewArea .PopPage .VirtualMarketSuccessArea .Content .switch_radio label input:checked+span {
    background: #269bff;
    border-color: #269bff
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .VirtualMarketSuccessArea .Content .switch_checkbox label input:checked+span small,body.New .DepotViewContainer .Container .ViewArea .PopPage .VirtualMarketSuccessArea .Content .switch_radio label input:checked+span small {
    left: 50%;
    background: #fff
}

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

body.New .DepotViewContainer .Container .ViewArea .PopPage .VirtualMarketSuccessArea .Content .switch_checkbox.switch-dark label input:checked+span,body.New .DepotViewContainer .Container .ViewArea .PopPage .VirtualMarketSuccessArea .Content .switch_radio.switch-dark label input:checked+span {
    background: #313131;
    border-color: #313131
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .VirtualMarketSuccessArea .Content .switch_checkbox.switch-orange label input:checked+span,body.New .DepotViewContainer .Container .ViewArea .PopPage .VirtualMarketSuccessArea .Content .switch_radio.switch-orange label input:checked+span {
    background: #f9b954;
    border-color: #f9b954
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .VirtualMarketSuccessArea .Content .switch_checkbox.switch-red label input:checked+span,body.New .DepotViewContainer .Container .ViewArea .PopPage .VirtualMarketSuccessArea .Content .switch_radio.switch-red label input:checked+span {
    background: red;
    border-color: red
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .ProductList {
    padding: 10px 16px 34px;
    width: 100%;
    overflow: auto;
    position: absolute;
    bottom: 0;
    background: #ffffff1a
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .ProductList .EntryType {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .ProductList .EntryType .EntryTypeTitle {
    width: inherit;
    display: flex;
    font-size: 12px
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .ProductList .EntryType[T=BagEntry] .EntryTypeTitle {
    pointer-events: none
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .ProductList .EntryType[T=BagEntry] .EntryBagCounter {
    display: flex
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .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.New .DepotViewContainer .Container .ViewArea .PopPage .ProductList .EntryType .EntryBagCounter>div:nth-child(1) {
    color: #000;
    width: 100%;
    font-size: 12px;
    letter-spacing: normal;
    font-weight: 400;
    line-height: 8px
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .ProductList .EntryType .EntryBagCounter>div:nth-child(2)>span {
    margin-left: 3px
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .ProductList .EntryType .EntryTypeTitle span:nth-child(1) {
    display: block;
    background: #fff;
    padding: 8px;
    border-radius: 4px 0 0 4px
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .ProductList .EntryType .EntryTypeTitle span:nth-child(2) {
    display: block;
    background: #ffeb3b;
    padding: 8px;
    border-radius: 0 4px 4px 0
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .ProductList .Title {
    width: 100%;
    font-size: 14px;
    color: #fff;
    font-weight: 200;
    margin-bottom: 14px
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .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
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .List .ProductItem:nth-child(n+2) {
    display: none
}

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

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

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

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

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

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

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

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

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

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

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

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

body.New .DepotViewContainer .Container .ViewArea .PopPage .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.New .DepotViewContainer .Container .ViewArea .PopPage .ProductItem>.Background {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    background-blend-mode: overlay;
    mix-blend-mode: overlay;
    border-radius: 22px;
    opacity: 1;
    backdrop-filter: saturate(.5)
}

body.New .DepotViewContainer .Container .ViewArea .PopPage .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
}

.DepotViewContainer.Query {
    pointer-events: none
}

.DepotViewContainer.Query .BarcodeArea form: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;
    top: 6px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: 50%
}

body.New .Popup_v2 .BarcodeArea.Query form: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;
    top: 10px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: 50%
}

body.New .Popup_v2 .BarcodeArea.Type2 {
    width: 100%;
    padding: 0 20px;
    padding-top: 40px;
    position: relative;
    top: 0;
    margin: 0;
    transition: all .3s;
    z-index: 4;
    background: 0 0;
    margin-bottom: 30px
}

body.New .Popup_v2 .ProductList {
    padding: 0!important
}

body.New .Popup_v2 .ProductList .Address {
    display: none
}

body.New .Popup_v2 .ProductList .Nav {
    display: none!important
}

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

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

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

body.New .Popup_v2 .BarcodeArea.Type2>.Input.Active {
    display: flex;
    flex-direction: row
}

body.New .Popup_v2 .BarcodeArea.Type2>.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.New .Popup_v2 .BarcodeArea.Type2>.Input input::placeholder {
    color: #ffffff7d
}

body.New .Popup_v2 .BarcodeArea.Type2>.Input .DeviceChange {
    width: 61px;
    height: 61px;
    flex: none;
    position: relative
}

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

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

body.New .Popup_v2 .BarcodeArea.Type2>.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.New .Popup_v2 .BarcodeArea.Type2>.Input .DeviceChange>.Icon>img {
    height: 21px
}

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

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

body.New .Popup_v2 .BarcodeArea.Type2>.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.New .Popup_v2 .BarcodeArea.Type2>.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.New .Popup_v2 .BarcodeArea.Type2>.Input .CamScreen>span:nth-child(3) {
    position: absolute;
    background: #9c67fe;
    top: 22px;
    left: -3px;
    right: -3px;
    bottom: 22px
}

.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
}

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%
}

.AlertMessageBox:empty {
    display: none
}

.AlertMessageBox {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 9999999999
}

.AlertMessageBox>.Item {
    background: red;
    color: #fff;
    font-size: 12px;
    padding: 14px;
    border-radius: 4px;
    box-shadow: 0 0 1110px 100px #000;
    transition: all .4s;
    position: absolute;
    top: -300px;
    width: 100%;
    text-align: center
}

.AlertMessageBox>.Item.Error {
    background: red;
    color: #fff
}

.AlertMessageBox>.Item.Success {
    background: red;
    color: #fff
}

.AlertMessageBox>.Item.Show {
    transition: all .4s;
    top: 0
}

.Page {
    width: 100%;
    margin: 0 auto;
    position: absolute
}

.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
}

.RequestPoolSupply {
    width: 100%;
    padding: 14px 24px;
    overflow: auto
}

.RequestPoolSupply .checkboxElements {
    width: 100%;
    padding: 9px;
    background: #5439ae;
    border-radius: 4px;
    color: #fff!important;
    margin: 0!important;
    margin-bottom: 10px!important
}

.RequestPoolSupply .checkboxElements label {
    width: 100%
}

.RequestPoolSupply .checkboxElements label>.Name {
    width: 100%;
    font-size: 13px;
    font-weight: 700;
    color: #fff
}

.RequestPoolSupply .checkboxElements label>.Info {
    width: 100%
}

.RequestPoolSupply .checkboxElements label>.Info>span:nth-child(1) {
    width: 100%;
    font-size: 11px;
    color: #ffffffb0
}

.RequestPoolSupply .checkboxElements label>.Info>span:nth-child(2) {
    width: 100%;
    font-size: 14px;
    background: #fff;
    border-radius: 2px;
    padding: 0 4px
}

@media only screen and (max-width: 768px) {
    body.New header.headerv3 {
        border-color:#ffffff2b;
        width: 100%;
        display: flex;
        border-bottom: 1px solid #ffffff14;
        align-items: center;
        padding: 0 20px;
        position: fixed;
        top: 0;
        left: 0;
        transition: all .2s;
        z-index: 3;
        background: #0824ad
    }

    body.New .PageView_v2 .control-panel>.column .panel-title>.T {
        color: #fff;
        font-size: 16px;
        margin-bottom: 1px
    }

    body.New .PageView_v2 .control-panel>.column .panel-title>.sT {
        color: #ffffff80;
        font-size: 12px;
        font-weight: 300
    }

    body.New header.headerv3>.HamburgerNav>i {
        color: #fff
    }

    body.New .v2Table-container {
        left: 14px;
        right: 14px;
        top: 200px;
        margin: 0;
        height: calc( 100% - 300px);
        border: 0;
        padding: 0;
        border-radius: 4px;
        width: 100%;
        position: fixed;
        overflow: auto;
        height: 100%;
        position: initial;
        padding: 14px;
        background: 0 0
    }

    body.New .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.New .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.New .Popup_v2 .Modal .Htm {
        display: flex;
        width: 100%;
        text-align: center;
        vertical-align: middle
    }

    .Page {
        position: absolute;
        left: 0;
        transition: all 0s;
        width: 100%;
        height: 100%
    }

    .NextPage {
        width: 100%
    }

    body.Next .NextPage {
        right: 0;
        width: 100%;
        transition: all 0s;
        left: 0
    }

    [T=WebSupply]>.BarcodeArea {
        position: fixed
    }
}

.Btn.AddFile {
    background: #3b52d5;
    color: #fff;
    font-size: 12px;
    padding: 2px 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer
}

.Btn.AddFile.Query {
    background-color: #273cb3
}

.Btn.AddFile.Query:before {
    content: "";
    background: #223cb3 url(/Library/Img/loading_Ajax.svg);
    width: 20px;
    height: 23px;
    position: relative;
    z-index: 2;
    display: block;
    background-size: 22px;
    left: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: 50%
}

.TableQuantityTools {
    display: flex;
    gap: 3px;
    background: #fff;
    padding: 4px;
    width: max-content;
    position: relative
}

.TableQuantityTools.Query:before {
    content: "";
    background: #ffffffd1 url(/Library/Img/loading_Ajax.svg);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    display: block;
    background-size: 40px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: 50%
}

.TableQuantityTools>.Btn {
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer
}

.TableQuantityTools>.Btn:hover {
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer
}

.TableQuantityTools>.Btn.Disabled {
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer
}

.TableQuantityTools>.Qty {
    display: flex;
    width: 40px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 12px
}



.PeronItem .Stock,.PeronItem .Rezerved,.PeronItem .Request,.PeronItem .Total,.PeronItem .Counter{
    letter-spacing: 1px;
    font-family: monospace;
}
.PeronItem .Last>span{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    letter-spacing: 1px;
    font-family: monospace;
}
.PeronItem .Last[T="0"]>span::before{
    font-family: 'font awesome 6 pro';
    font-weight: 900;
    -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;
    content:"\f111";
    font-size: 7px;
    color: #bfbfbf;
}
.PeronItem .Last.Up>span::before{
    font-family: 'font awesome 6 pro';
    font-weight: 900;
    -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;
    content:"\f0d8";
    font-size: 13px;
    color: #4CAF50;
}
.PeronItem .Last.Down>span::before{
    font-family: 'font awesome 6 pro';
    font-weight: 900;
    -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;
    content:"\f0d8";
    font-size: 13px;
    color: #f00;
}
.PeronItem .Activite[S="0"] .cancelBtn{display:none}
.PeronItem .Activite[S="1"] .cancelBtn{display:none}
.PeronItem .Activite .removeFile{display:none}
.PeronItem .Activite[S="1"][I="0"] .removeFile{display:flex}
.PeronItem .Activite[I="0"] .resumeBtn{display:none}
.PeronItem .Activite:not([I="0"])[T="0"] .resumeBtn{display: none;}
.PeronItem .Activite:not([I="0"]) .resumeBtn{display: flex;}








.ReturnRequestForm .Item {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #000;
    padding-top: 15px;
    padding-bottom: 10px;
}
.ReturnRequestForm .Information{
    display: flex;
    align-items: center
}
.ReturnRequestForm .Item .Information .Check{display: flex;width: 14px;height: 14px;justify-content: flex-start;position: relative;align-items: center;padding-left: 30px;gap: 6px;cursor: pointer;}
.ReturnRequestForm .Item .Information .Photo {width: 52px;margin-right: 16px;}
.ReturnRequestForm .Item .Information .Photo img{width:100%;}

.ReturnRequestForm .Item .Information .Product {
   display: flex;
   flex-direction: column;
   gap: 6px
}

.ReturnRequestForm .Item .Information .Product>.Item {
   display: block;
   border: 0;
   padding: 0;
   font-size: 12px;
}

.ReturnRequestForm .Item .Information .Return,.Item .Information .Success,
.ReturnRequestForm .Item .Information .LastDay {
   display: none;
   gap: 20px;
   margin-left: auto
}

.ReturnRequestForm .Item .Information .Check::before{
                                  content: "";
                                  width: 20px;
                                  height: 20px;
                                  border: 1px solid #000;
                                  flex: none;
                                  position: absolute;
                                  left: 0;
                                 }
.ReturnRequestForm .Item .Information .Check.active::after{
                                        content: "";
                                        width: 12px;
                                        height: 12px;
                                        background: #000;
                                        position: absolute;
                                        left: 4px;
                                        top: 1px;
                                        flex: none;
                                       }
.ReturnRequestForm .Item .Information .Action {
   display: flex;
   gap: 6px;
   margin-left: auto
}

.ReturnRequestForm .Item .Information .Action .InputBox>span {
   display: block;
   margin-bottom: 6px;
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 1px;
}

.ReturnRequestForm .Item .Information .Action .InputBox>select {
   display: block;
   border: 1px solid #000;
   height: 34px;
   font-size: 11px;
   min-width: 200px;
   outline: 0
}

.ReturnRequestForm .Item .Information .Action .InputBox>select.error {
   border: 1px solid #e91e1e;
   color: red
}

.ReturnRequestForm .Item .Note {
   display: none;
   margin: 0;
}
.ReturnRequestForm .Item .Note {margin-top: 20px;}
.ReturnRequestForm .Item.active .Note {display:block}
.ReturnRequestForm .Item .Note .Input {
    width: 100%;
    position: relative;
    margin-bottom: 8px;
    margin-top: -2px;
}
.ReturnRequestForm .Item .Note .Input input, .ReturnRequestForm .Item .Note .Input select, .ReturnRequestForm .Item .Note .Input textarea {
    display: block;
    height: auto;
    width: 100%;
    font-size: 13px;
    font-weight: 300;
    color: #000;
    appearance: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 0;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    line-height: 24px;
    padding: 18px 10px 4px 12px;
    outline: 0;
    resize: none;
    font-weight: 400;
    font-family: inherit;
}
.ReturnRequestForm .Item .Note .Input label {
    position: absolute;
    top: -1px;
    left: 9px;
    z-index: 2;
    font-size: 11px;
    overflow: hidden;
    text-align: start;
    border: 1px solid transparent;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
    color: #7b7b7b;
    line-height: 50px;
    font-weight: 500;
    pointer-events: none;
}
.ReturnRequestForm .Item .Note .Input input:focus~label,
.ReturnRequestForm .Item .Note .Input input:not(:placeholder-shown)~label,
.ReturnRequestForm .Item .Note .Input select:focus~label,
.ReturnRequestForm .Item .Note .Input textarea:focus~label,
.ReturnRequestForm .Item .Note .Input textarea:not(:placeholder-shown)~label {
    font-size: 11px;
    color: #000000;
    line-height: 20px;
    padding-left: 0;
    background: transparent;
    padding: 0 3px;
    top: 4px;
    font-weight: 300;
}
.ReturnRequestForm .Item:not([data-status="0"]) .Information .Check {
   pointer-events: none;
   opacity: .2
}

.ReturnRequestForm .Item[data-status="99"] .Information .Return {
   display: flex;
   border: 1px dashed #000;
   padding: 10px
}

.ReturnRequestForm .Item[data-status="1"] .Information .Success {
   display: flex;
   border: 1px dashed #4caf50;
   padding: 10px;
   color: #319435
}
.ReturnRequestForm .Item[data-status="3"] .Information .LastDay {
   display: flex;
   border: 1px dashed #ffffff;
   padding: 10px;
   color: #ffffff;
}

.ReturnRequestForm .Item[data-status="1"],.ReturnRequestForm .Item[data-status="99"] {
   padding-bottom: 10px;
   margin-bottom: 6px;
}
.ReturnRequestForm .Item:not([data-status="99"]) .Information .Return{display:none}
.ReturnRequestForm .Item:not([data-status="99"]) .Information .Success{display:none}
.ReturnRequestForm .Item:not([data-status="99"]) .Information .LastDay{display:none}
.ReturnRequestForm .Item[data-status="1"] .Information .Action{display:none}
.ReturnRequestForm .Item[data-status="99"] .Information .Action{display:none}
.ReturnRequestForm .Item[data-status="1"] .Information .Success {
    display: flex;
    border: 1px dashed #4caf50;
    padding: 10px;
    color: #319435;
}


.ReturnRequestForm .Item .Information .Action .InputBox>select.error {
   border: 1px solid #e91e1e;
   color: red
}

.ReturnRequestForm .Item:not([data-status="0"]) .Information .Check {
   pointer-events: none;
   opacity: .2
}

.ReturnRequestForm .Item[data-status="99"] .Information .Return {
   display: flex;
   border: 1px dashed #000;
   padding: 10px
}

.ReturnRequestForm .Item[data-status="1"] .Information .Success {
   display: flex;
   border: 1px dashed #4caf50;
   padding: 10px;
   color: #319435
}
.ReturnRequestForm .Item[data-status="3"] .Information .LastDay {
   display: flex;
   border: 1px dashed #ffffff;
   padding: 10px;
   color: #ffffff;
}

[fr=OrderDetail]{
   width: 100%;
   padding: 20px 0px;
   overflow: auto;
   font-size: 12px;
}
.PopupBox.RightPop .Title{
  color: #E8E8E8;
  margin-bottom: 5px;
}
[fr=OrderDetail] .OrderNumber {
   width: 100%;
   margin-bottom: 32px;
   line-height: 17px;
   color: #797979;
}
[fr=OrderDetail] .OrderNumber > span{
   color: #000000;
}

[fr=OrderDetail] .History {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 32px;
   position: relative
}
[fr=OrderDetail] .Btn {
   line-height: 34px;
   text-align: center;
   margin-top: 20px;
}


[fr=OrderDetail] .History::before,[fr=RequestDetail] .History::before {
   content: "";
   width: 1px;
   height: 100%;
   border-left: 1px dashed #000;
   position: absolute;
   left: 6px;
   top: 1px
}

[fr=OrderDetail] .History::after,[fr=RequestDetail] .History::after {
   content: "";
   width: 1px;
   height: 26px;
   border-left: 1px solid #fff;
   position: absolute;
   left: 6px;
   bottom: -10px;
   z-index: -1;
}

[fr=OrderDetail] .History .Item,[fr=RequestDetail] .History .Item {
   width: 100%;
   display: flex;
   flex-direction: column;
   padding: 0;
   padding-left: 28px;
   position: relative;
   border: 0;
}

[fr=OrderDetail] .History .Item::before,[fr=RequestDetail] .History .Item::before {
   content: "";
   width: 11px;
   height: 17px;
   border: 1px solid;
   position: absolute;
   left: 1px;
   top: 0px;
   background: #fff
}
[fr=OrderDetail] .History .Item.completed::before{
  background-color: #4CAF50 !important;
}
[fr=OrderDetail] .History .Item.active::before{
  background-color: #4CAF50;
}
[fr=OrderDetail] .History .Item.active.red::before{
  background-color: #ff0606;
}

[fr=RequestDetail] .History .Item.active::before {
   content: "";
   width: 11px;
   height: 11px;
   border: 1px solid;
   position: absolute;
   left: 0;
   top: 1px;
   background: #000;
   z-index: 1
}

[fr=OrderDetail] .History .Item.completed::after,[fr=RequestDetail] .History .Item.completed::after {
   content: "";
   width: 1px;
   height: calc(100% + 32px);
   border-left: 1px solid;
   position: absolute;
   left: 6px;
   top: 13px
}

[fr=OrderDetail] .History .Item>span:first-child,[fr=RequestDetail] .History .Item>span:first-child {
   width: 100%;
   font-weight: 500;
   line-height: 16px;
   color: #666
}

[fr=OrderDetail] .History .Item>span:nth-child(2),[fr=RequestDetail] .History .Item>span:nth-child(2) {
   width: 100%;
   font-size: 11px;
   color: #666
}
.Btn.Black{
  background-color: #000;
  color: #fff;
  font-size: 12px;
  padding: 2px 18px;
}
[fr=OrderDetail] .ProductList {
   display: flex;
   flex-direction: column;
   width: 100%;
   max-width: 610px;
   margin-top: 65px
}

[fr=OrderDetail] .ProductList .ProductItem{
   width: 100%;
   display: flex;
   padding-bottom: 10px;
   margin-bottom: 10px;
   position: relative;
   align-items: stretch;
}
[fr=OrderDetail] .ProductList .ProductItem .Gallery{
   width: 100%;
   max-width: 63px;
   margin-right: 12px;
   flex: none
}
[fr=OrderDetail] .ProductList .ProductItem .Gallery>img{width: 100%;display: block;}

[fr=OrderDetail] .ProductList .ProductItem .Info{
   width: 100%;
   display: flex;
   flex-direction: column;
   height: auto;
   padding: 0
}

[fr=OrderDetail] .ProductList .ProductItem .Info>.Item{
   width: 100%;
   border: 0;
   padding: 0;
   line-height: 14px;
}