.PopContent[fr=Contract] {
   width: 100%;
   padding: 50px 36px 16px
}

.PopContent[fr=Contract] .Title{
   width: 100%;
   font-weight: 500;
   text-transform: uppercase;
   margin-bottom: 10px
}

.PopContent[fr=Contract] .Viewer {
   width: 100%;
   overflow: auto;
   padding-bottom: 40px;
   padding-right:12px
}

.PopContent[fr=Contract] .Viewer::-webkit-scrollbar {
   width: 2px;
   background: #e8e8e800
}

.PopContent[fr=Contract] .Viewer:hover::-webkit-scrollbar {
   background: #e8e8e8
}

.PopContent[fr=Contract] .Viewer:hover::-webkit-scrollbar-thumb {
   background: #000;
   border-radius: 2px
}

.PopContent[fr=Contract] .Viewer::-webkit-scrollbar-thumb:hover {
   background: #555
}

.PopContent[fr=Contract] .Btn{
   width: 100%;
   margin-top: auto
}
.PopContent[fr=StockNotificationForm]>.Form .Contract .Text>span:hover{
   text-decoration: underline;
}
.PopContent[fr=StockNotificationForm] .Preview {
   width: 100%;
   margin-top: 20px
}
.PopContent[fr=StockNotificationForm]>.Title {
   width: 100%;
   margin-bottom: 16px
}
.PopContent[fr=StockNotificationForm]>.Form .BtnList {
   width: 100%;
   display: flex;
   margin: 40px 0 30px
}

.PopContent[fr=StockNotificationForm]>.Form .Contract .Text>span {
   font-weight: 500;
   cursor: pointer
}
.PopContent[fr=StockNotificationForm]>.Form .Check {
   display: flex;
   width: 11px;
   height: 11px;
   justify-content: center;
   position: relative;
   align-items: center;
   margin-right: 8px;
   flex: none
}
.PopContent[fr=StockNotificationForm]>.Form .Check::before {
   content: "";
   width: 11px;
   height: 11px;
   border: 1px solid #000;
   flex: none
}

.PopContent[fr=StockNotificationForm]>.Form .Check.active::after {
   content: "";
   width: 5px;
   height: 5px;
   background: #000;
   position: absolute;
   left: 3px;
   top: 3px;
   flex: none
}


.PopContent[fr=StockNotificationForm] {
   width: 100%;
   padding: 50px 16px 36px
}

.PopContent[fr=StockNotificationForm]>.Text {
   width: 100%;
   font-size: 13px;
   line-height: 19px;
   margin-bottom: 16px
}

.PopContent[fr=StockNotificationForm] .Preview .Title {
   width: 100%;
   margin: 20px 0;
   text-transform: uppercase
}

.PopContent[fr=StockNotificationForm] .Preview .List {
   width: 100%;
   display: block;
   padding-right: 5px;
   overflow: auto
}

.PopContent[fr=StockNotificationForm] .Preview .List::-webkit-scrollbar {
   width: 2px;
   background: #b2b2b2
}

.PopContent[fr=StockNotificationForm] .Preview .List::-webkit-scrollbar-thumb { 
   background: #000;
   border-radius: 2px
}

.PopContent[fr=StockNotificationForm] .Preview .List::-webkit-scrollbar-thumb:hover {
   background: #555
}

.PopContent[fr=StockNotificationForm] .Preview .List .ProductItem {
   width: calc(50% - 10px);
   height: initial;
   display: inline-block;
   margin: 4px 4px;
}
.PopContent[fr=StockNotFound]>.Form .Contract .Text>span:hover{
   text-decoration: underline;
}
.PopContent[fr=StockNotFound] .Preview {
   width: 100%;
   margin-top: 20px
}
.PopContent[fr=StockNotFound]>.Title {
   width: 100%;
   margin-bottom: 16px
}
.PopContent[fr=StockNotFound]>.Form .BtnList {
   width: 100%;
   display: flex;
   margin: 40px 0 30px
}

.PopContent[fr=StockNotFound]>.Form .Contract .Text>span {
   font-weight: 500;
   cursor: pointer
}
.PopContent[fr=StockNotFound]>.Form .Check {
   display: flex;
   width: 11px;
   height: 11px;
   justify-content: center;
   position: relative;
   align-items: center;
   margin-right: 8px;
   flex: none
}
.PopContent[fr=StockNotFound]>.Form .Check::before {
   content: "";
   width: 11px;
   height: 11px;
   border: 1px solid #000;
   flex: none
}

.PopContent[fr=StockNotFound]>.Form .Check.active::after {
   content: "";
   width: 5px;
   height: 5px;
   background: #000;
   position: absolute;
   left: 3px;
   top: 3px;
   flex: none
}


.PopContent[fr=StockNotFound] {
   width: 100%;
   padding: 50px 16px 36px
}

.PopContent[fr=StockNotFound]>.Text {
   width: 100%;
   font-size: 13px;
   line-height: 19px;
   margin-bottom: 16px
}

.PopContent[fr=StockNotFound] .Preview .Title {
   width: 100%;
   margin: 20px 0;
   text-transform: uppercase
}

.PopContent[fr=StockNotFound] .Preview .List {
   width: 100%;
   display: block;
   padding-right: 5px;
   overflow: auto
}

.PopContent[fr=StockNotFound] .Preview .List::-webkit-scrollbar {
   width: 2px;
   background: #b2b2b2
}

.PopContent[fr=StockNotFound] .Preview .List::-webkit-scrollbar-thumb {
   background: #000;
   border-radius: 2px
}

.PopContent[fr=StockNotFound] .Preview .List::-webkit-scrollbar-thumb:hover {
   background: #555
}

.PopContent[fr=StockNotFound] .Preview .List .ProductItem {
   width: calc(50% - 10px);
   height: initial;
   display: inline-block;
   margin: 4px 4px;
}
.PopupBox.mod2 .PopContent[fr=ColorSelect] {
    padding: 21px 16px 16px 16px;
} 
.PopupBox.mod2 .PopContent[fr=ColorSelect] .Closed{
    display:none
}
.PopContent[fr=ColorSelect] {
   width: 100%;
   padding: 55px 24px 24px 24px;
}

.PopContent[fr=ColorSelect]>.Name {
   font-size: 11px
}

.PopContent[fr=ColorSelect]>.Price {
   font-size: 12px;
   margin-bottom: 18px
}

.PopContent[fr=ColorSelect]>.PriceBox {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 4px;
   position: inherit;
   padding: 0 20px;
   margin-bottom: 14px
}

.PopContent[fr=ColorSelect]>.PriceBox .OldPrice{
   width: fit-content;
   font-size: 12px;
   line-height: 17px;
   position: relative;
   display: none
}
.PopContent[fr=ColorSelect]>.PriceBox .OldPrice:before,



.PopContent[fr=ColorSelect]>.PriceBox .SalePrice .Info{
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex-direction: row;
   width: initial;
   padding: 0;
   height: inherit
}

.PopContent[fr=ColorSelect]>.PriceBox:not([OldPrice="0"]) .SalePrice .Info{
   display: flex;
   justify-content: flex-start;
   align-items: center;
   background: #ffeb3b;
   margin-right: 10px;
   flex-direction: row;
   width: fit-content;
   padding: 0;
   height: inherit
}

.PopContent[fr=ColorSelect]>.PriceBox .SalePrice .Info>.Price {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   padding: 0x;
   line-height: 15px
}

.PopContent[fr=ColorSelect]>.PriceBox:not([OldPrice="0"]) .SalePrice .Info>.Price{
   /* padding: 2px 6px 0; */
}

.PopContent[fr=ColorSelect]>.PriceBox .SalePrice .Info>.DiscountRate {
   line-height: 15px;
   padding: 2px 6px 0 0;
   display: none
}

.PopContent[fr=ColorSelect]>.PriceBox .SalePrice .Info>.DiscountRate:before{
   content: "";
   display: flex;
   border-left: 1px solid #000;
   height: 10px;
   width: 1px;
   margin-top: 2px;
   padding-right: 4px
}

.PopContent[fr=ColorSelect]>.PriceBox .SalePrice .SpecialText{
   width: fit-content;
   border: 1px solid #000;
   line-height: 14px;
   padding: 2px 5px 0;
   cursor: pointer;
   overflow: hidden;
   line-height: 12px;
   height: 17px;
}

.PopContent[fr=ColorSelect]>.PriceBox .Campaigns{
   width: fit-content;
   border: 1px solid #000;
   line-height: 16px;
   padding: 2px 5px 0;
   font-size: 12px;
   min-height: 14px
}

.PopContent[fr=ColorSelect]>.PriceBox .Campaigns:empty{
   opacity: 0
}

.PopContent[fr=ColorSelect]>.Gallery {
   width: 100%;
   display: grid;
   margin-bottom: 42px
}

.PopContent[fr=ColorSelect]>.Gallery .List {
   overflow: hidden;
   overflow-x: scroll;
   width: 100%;
   display: flex
}

.PopContent[fr=ColorSelect]>.Gallery .List::-webkit-scrollbar {
   height: 2px;
   background: #fff
}

.PopContent[fr=ColorSelect]>.Gallery .List:hover::-webkit-scrollbar-thumb {
   background: #000;
   border-radius: 2px
}

.PopContent[fr=ColorSelect]>.Gallery .List::-webkit-scrollbar-thumb:hover {
   background: #555
}

.PopContent[fr=ColorSelect]>.Gallery .List .Item {
   height: 100%;
   display: inline-block
}

.PopContent[fr=ColorSelect]>.Gallery .List .Item>img {
   width: 90px;
   display: block
}

.PopContent[fr=ColorSelect]>.Title {
   font-size: 10px;
   line-height: 14px;
   width: 100%;
   margin-top: 20px;
   margin-bottom: 18px;
   text-align: center
}

.PopContent[fr=ColorSelect]>.Note{
   max-width: 72%;
   margin: 0 auto 35px;
   flex-direction: row;
   gap: 2px 34px;
   width: 100%;
   display: flex
}

.PopContent[fr=ColorSelect]>.Colors {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   flex-direction: row;
   gap: 4px;
   overflow: hidden;
   overflow-x: auto;
   padding-bottom: 16px;
}

.PopContent[fr=ColorSelect]>.Colors::-webkit-scrollbar {
   display: block;
   height: 1px;
}

.PopContent[fr=ColorSelect]>.Colors::-webkit-scrollbar {
   display: block;
   background: #ebebeb
}

.PopContent[fr=ColorSelect]:hover .Colors::-webkit-scrollbar-thumb {
   background: #000;
}


.PopContent[fr=ColorSelect]>.Colors .ColorItem {
   display: flex;
   flex-direction: column;
   cursor: pointer;
   width: 58px;
}
.PopContent[fr=ColorSelect]>.Colors .ColorItem .Color{
   width: 100%;
   display: none;
}
.PopContent[fr=ColorSelect]>.Colors .ColorItem .Image{
   width: 58px;
   border: 1px solid transparent;
   padding: 6px;
   border-radius: 4px;
}
.PopContent[fr=ColorSelect]>.Colors .ColorItem.active .Image{
   border: 1px solid #DADADA;
   padding: 6px;
   border-radius: 4px;
}
.PopContent[fr=ColorSelect]>.Colors .ColorItem .Name{
   text-align: center;
   margin-top: 6px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
.PopContent[fr=ColorSelect]>.Colors .ColorItem img{
   width: 100%;
}

.PopContent[fr=ColorSelect]>.Note {
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   color: #727272
}

.PopContent[fr=ColorSelect]>.Footer {
   width: 100%;
   border-top: 1px solid;
   display: flex;
   align-items: center;
   justify-content: center;
   order: 9;
}

.PopContent[fr=ColorSelect]>.Footer>.Btn {
   width: 50%;
   line-height: 56px;
   font-size: 12px
}
.PopContent[fr=Message] .Title {
   position: relative;
   margin: 10px 0 17px;
   text-align: center;
   text-transform: uppercase
}

.PopContent[fr=Message] .Text {
   position: relative;
   margin: 0;
   text-align: center
}
.PopContent[fr=PaymentAccountForm] .Banks .Logo>svg{
   width: 100%
}
.PopContent[fr=PaymentAccountForm] .Banks .Bank{
   font-size: 12px
}
.PopContent[fr=PaymentAccountForm] .Title{
   width: 100%;
   font-size: 12px;
   line-height: 17px;
   text-align: center;
   margin: 10px 0 18px
}

.PopContent[fr=PaymentAccountForm] {
   width: 100%;
   padding: 30px 0 0;
   display: flex;
   flex-direction: column
}

.PopContent[fr=PaymentAccountForm] .Text {
   width: 100%;
   text-align: center;
   margin: 0 auto 5px
}

.PopContent[fr=PaymentAccountForm] .Divider {
   width: 100%;
   height: 1px;
   background: #000;
   margin: 8px 0
}

.PopContent[fr=PaymentAccountForm] .Banks {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 6px;
   padding: 10px 0;
   align-content: center;
   align-items: center
}

.PopContent[fr=PaymentAccountForm] .Banks .Logo {
   display: flex;
   margin-bottom: 15px
}

.PopContent[fr=PaymentAccountForm] .Banks .Iban {
   font-size: 14px
}

.PopContent[fr=PaymentAccountForm] .Banks .Account {
   display: flex;
   gap: 5px
}

.PopContent[fr=PaymentAccountForm] .Total {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 14px;
   line-height: 26px;
   font-weight: 500
}

.PopContent[fr=PaymentAccountForm] .Input {
   width: 100%;
   margin: 0
}

.PopContent[fr=PaymentAccountForm] .Input>textarea {
   border: 0;
   min-height: 70px
}

.PopContent[fr=PaymentAccountForm] .Input .Note {
   font-size: 9px;
   color: #444;
   position: absolute;
   bottom: 0;
   left: 5px;
   text-transform: uppercase;
   letter-spacing: .8px
}
.PopContent[fr=SupportForm] .Form{
   width: 100%;
   margin-bottom: 32px
}
.mod2 .PopContent[fr=SupportForm] .Form{
   padding: 0 18px; 
}

.PopContent[fr=SupportForm] {
   width: 100%;
   padding-top: 30px
}

.PopContent[fr=SupportForm] .Title {
   width: 100%;
   font-weight: 500;
   margin-bottom: 30px;
   text-align: center
}

.PopContent[fr=SupportForm] .Form textarea {
   width: 100%;
   min-height: 180px
}
.PopContent[fr=Support]>.List .ItemBox,
.PopContent[fr=Support]>.List .ItemBox .Item>div{
   width: 100%
}

.PopContent[fr=Support]>.List {
   width: 100%;
   height: 100%;
   margin-bottom: 10px;
   padding: 50px 10px 10px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   overflow-y: auto
}

.PopContent[fr=Support]>.List::-webkit-scrollbar {
   width: 2px;
   background: #fff;
   display: block
}

.PopContent[fr=Support]>.List::-webkit-scrollbar-thumb {
   background: #555;
   border-radius: 2px
}

.PopContent[fr=Support]>.List .ItemBox .Item {
   max-width: 90%;
   background: #efefef;
   border-radius: 3px;
   padding: 12px;
   min-width: 110px
}

.PopContent[fr=Support]>.List .ItemBox .Item>div>span:first-child
{
   width: 100%;
   font-size: 12px
}

.PopContent[fr=Support]>.List .ItemBox .Item>div>span:nth-child(2){
   width: 100%;
   font-size: 10px
}

.PopContent[fr=Support]>.Footer {
   width: 100%;
   margin-top: 0;
   padding: 8px;
   border-top: 1px solid #ccc
}

.PopContent[fr=Support]>.Footer .Input {
   width: 100%;
   display: flex;
   margin: 0;
   gap: 8px
}

.PopContent[fr=Support]>.Footer .Input input {
   padding: 12px;
   border: 1px solid #000
}

.PopContent[fr=Support]>.Footer .Input .Btn {
   position: initial;
   width: 100px;
   flex: none
}
.PopContent[fr=Support]>.List .ItemBox.M0 {
   display: flex;
   justify-content: flex-end;
   align-items: flex-end;
}

.PopContent[fr=Support]>.List .ItemBox.M0 .Item {
   background: #d2f6d3
}

.PopContent[fr=Support]>.List .ItemBox.M1 .Item {
   background: #eee
}
.PopContent[fr=AddBagSuccess] .Closed{
   position: absolute;
   right: 20px;
   top: 20px;
   cursor: pointer
}
.PopContent[fr=AddBagSuccess] .TabView .Preview .List .Product .Photo>img,
.PopContent[fr=AddBagSuccess] .TabView>.Title,
.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .Addition .Btn:hover,
.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .Addition .Items .Item>span:first-child>strong,
.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Gallery>img{
   width: 100%
}

.PopContent[fr=AddBagSuccess] .TabList .TabItem[Q="0"]>span:nth-child(2),
.PopContent[fr=AddBagSuccess] .TabView .Preview .List .Product .Info .PriceBox .Campaigns:empty,
.PopContent[fr=AddBagSuccess] .TabView .Preview .List .Product .Info .PriceBox .SpecialText:empty,
.PopContent[fr=AddBagSuccess] .TabView[T=Add] .Product .Info .PriceBox .Campaigns:empty,
.PopContent[fr=AddBagSuccess] .TabView[T=Add] .Product .Info .PriceBox .SpecialText:empty,
.PopContent[fr=AddBagSuccess] .TabView[T=Add] .Product .Info .PriceBox[DiscountRate="0"] .SalePrice .Info>.DiscountRate.show,
.PopContent[fr=AddBagSuccess] .TabView[T=Add] .Product .Info .PriceBox[OldPrice="0"] .OldPrice,
.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .Addition .Items .Item[V="0"]{
   display: none
}

.PopContent[fr=AddBagSuccess] {
   width: 425px;
   padding: 60px 24px 0;
   overflow: auto;
   height: 100vh
}

.PopContent[fr=AddBagSuccess]::-webkit-scrollbar {
   width: 4px;
   background: #000
}

.PopContent[fr=AddBagSuccess]:hover::-webkit-scrollbar-thumb {
   background: #000;
   border-radius: 2px
}

.PopContent[fr=AddBagSuccess]::-webkit-scrollbar-thumb:hover {
   background: #555
}

.PopContent[fr=AddBagSuccess] .TabList {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 40px
}

.PopContent[fr=AddBagSuccess] .TabList .TabItem {
   width: 33.33%;
   cursor: pointer;
   position: relative;
   text-align: center;
   padding-bottom: 7px
}

.PopContent[fr=AddBagSuccess] .TabList .TabItem:hover {
   opacity: .5
}


.PopContent[fr=AddBagSuccess] .TabList .TabItem.active::before{
   content: "";
   width: 4px;
   height: 4px;
   background: #000;
   display: block;
   position: absolute;
   bottom: 0;
   left: 50%;
   margin-left: -2.5px
}

.PopContent[fr=AddBagSuccess] .TabList .TabItem:hover::before{
   content: "";
   width: 5px;
   height: 5px;
   margin-left: -2.5px;
   background: #d5d5d5;
   display: block;
   position: absolute;
   bottom: 0;
   left: 50%
}

.PopContent[fr=AddBagSuccess] .TabView {
   width: 100%;
   height: 100%;
   display: none
}
.PopContent[fr=AddBagSuccess] .TabView.active{
   display: flex;
   flex-direction: column
}


.PopContent[fr=AddBagSuccess] .TabView .Empty {
   width: 100%;
   margin: 75px 0 20px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center
}

.PopContent[fr=AddBagSuccess] .TabView .Empty .Title {
   display: flex;
   line-height: 17px;
   margin-bottom: 17px
}

.PopContent[fr=AddBagSuccess] .TabView .Empty .Text {
   width: 100%;
   display: flex;
   margin-bottom: 42px;
   justify-content: center
}

.PopContent[fr=AddBagSuccess] .TabView .Empty .Btn {
   width: 100%;
   margin: 0;
   display: flex;
   text-align: center;
   align-items: center;
   justify-content: center
}

.PopContent[fr=AddBagSuccess] .TabView .Preview .List .Product,.PopContent[fr=AddBagSuccess] .TabView[T=Add] .Product {
   width: 100%;
   margin: 40px 0 20px;
   display: flex
}

.PopContent[fr=AddBagSuccess] .TabView[T=Add] .Product .Photo {
   width: 74px;
   flex: none;
   margin-right: 10px;
   display: block
}
.PopContent[fr=AddBagSuccess] .TabView[T=Add] .Product>.Info {
   width: 100%;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
}
.PopContent[fr=AddBagSuccess] .TabView[T=Add] .Product>.Info .Name {
   width: 100%;
   font-weight: 400;
   margin-bottom: 6px;
}



.PopContent[fr=AddBagSuccess] .TabView .Preview .List .Product .Info .PriceBox .SalePrice .Info>.Price>span,
.PopContent[fr=AddBagSuccess] .TabView[T=Add] .Product .Info .PriceBox .SalePrice .Info>.Price>span {
   margin-left: 3px
}

.PopContent[fr=AddBagSuccess] .TabView .Preview .List .Product .Info .PriceBox .SalePrice .SpecialText,
.PopContent[fr=AddBagSuccess] .TabView[T=Add] .Product .Info .PriceBox .SalePrice .SpecialText {
   width: fit-content;
   border: 1px solid #000;
   line-height: 20px;
   padding: 2px 5px 0
}



.PopContent[fr=AddBagSuccess] .TabView .Preview .List .Product .Info .PriceBox .Campaigns,
.PopContent[fr=AddBagSuccess] .TabView .Preview .List .Product .Info .PriceBox .SpecialText,
.PopContent[fr=AddBagSuccess] .TabView[T=Add] .Product .Info .PriceBox .SpecialText {
   width: fit-content;
   border: 1px solid #000;
   line-height: 16px;
   padding: 2px 5px 0;
   font-size: 12px;
   opacity: 0
}

.PopContent[fr=AddBagSuccess] .TabView .Preview .List .Product .Info .PriceBox .SpecialText:not(:empty),
.PopContent[fr=AddBagSuccess] .TabView[T=Add] .Product .Info .PriceBox .SpecialText:not(:empty) {
   display: block;
   opacity: 1
}

.PopContent[fr=AddBagSuccess] .TabView .Preview .List .Product .Info .Variation,
.PopContent[fr=AddBagSuccess] .TabView[T=Add] .Product .Info .Variation {
   display: block;
   opacity: 1;
   margin-top: auto;
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .CargoStatus {
   width: 100%;
   margin-top: 10px;
   background: #f0f0f0;
   display: flex;
   padding: 9px;
   align-items: center;
   margin-bottom: 12px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .CargoStatus>svg {
   width: 30px;
   margin-right: 5px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .CargoStatus>span {
   width: 100%;
   font-weight: 100
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .CargoStatus>span>strong{
   font-weight: 100
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .Addition {
   width: 100%;
   margin-top: auto;
   position: sticky;
   bottom: 0;
   background: #fff;
   padding: 10px 0 16px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .Addition .Items {
   width: 100%;
   margin-bottom: 5px;
   color: #262626
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .Addition .Items .Item {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   line-height: 17px;
   margin-bottom: 3px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .Addition .Items .Item[PageLoad="1"] {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 17px;
   margin-bottom: 5px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .Addition .Items .Item>span:nth-child(2) {
   line-height: 17px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .Addition .Items .Item.Grand {
   width: 100%;
   margin-top: 10px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .Addition .Items .Item.Grand>span:first-child {
   text-transform: math-auto
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .Addition .Btn{
   display: block;
   width: 100%
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts,.PopContent[fr=AddBagSuccess] .TabView[T=Favorite] .ProductList {
   display: flex;
   flex-direction: column;
   width: 100%;
   padding-right: 5px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts::-webkit-scrollbar {
   width: 2px;
   background: #fff
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts:hover::-webkit-scrollbar-thumb {
   background: #000;
   border-radius: 2px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts::-webkit-scrollbar-thumb:hover {
   background: #555
}

.PopContent[fr=AddBagSuccess] .TabView[T=Favorite] .ProductList::-webkit-scrollbar {
   width: 2px;
   background: #fff
}

.PopContent[fr=AddBagSuccess] .TabView[T=Favorite] .ProductList:hover::-webkit-scrollbar-thumb {
   background: #000;
   border-radius: 2px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Favorite] .ProductList::-webkit-scrollbar-thumb:hover {
   background: #555
}

.PopContent[fr=AddBagSuccess] .TabView .Preview .List .Product .Photo {
   width: 74px;
   flex: none;
   margin-right: 10px
}

.PopContent[fr=AddBagSuccess] .TabView .Preview .List .Product .Info .PriceBox[DiscountRate="1"] .SalePrice .Info {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   background: #ffeb3b;
   margin-right: 10px;
   width: auto
}

.PopContent[fr=AddBagSuccess] .Preview{
   width: 100%;
   margin-top: 20px
}

.PopContent[fr=AddBagSuccess] .Preview .Title {
   width: 100%;
   margin: 20px 0
}

.PopContent[fr=AddBagSuccess] .List {
   width: 100%;
   display: block;
   padding-right: 5px;
   flex-wrap: wrap;
   gap: 8px;
}

.PopContent[fr=AddBagSuccess] .List::-webkit-scrollbar {
   width: 2px;
   background: #b2b2b2
}

.PopContent[fr=AddBagSuccess] .List::-webkit-scrollbar-thumb {
   background: #000;
   border-radius: 2px
}

.PopContent[fr=AddBagSuccess] .List::-webkit-scrollbar-thumb:hover {
   background: #555
}


.PopContent[fr=AddBagSuccess] .List .ProductItem{
   width: calc(50% - 10px);
   height: initial;
   display: inline-block;
   margin: 4px 4px;
}

.PopContent[fr=AddBagSuccess] .List .ProductItem{
   width: calc(50% - 10px);
   height: initial;
   display: inline-block;
   margin: 4px 4px;
}




.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Properties .Social .Favorite,
.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Properties .Social .RemoveBag{
   cursor: pointer;
   display: block
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Properties .Social .Favorite:before{
   content: "";
   display: flex;
   background: url(/NewWebSites/img/icon_favorite.svg);
   width: 10px;
   height: 14px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Properties .Social .Favorite.active:before{
   content: "";
   display: flex;
   background: url(/NewWebSites/img/icon_favorite_activ.svg) 0 0/11px;
   width: 10px;
   height: 14px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Properties .Social .RemoveBag:before{
   content: "";
   display: flex;
   background: url(/NewWebSites/img/icon_trash.svg);
   width: 15px;
   height: 15px
}


.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Product>.Code[pageload="1"]{
   height: 15px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Properties .QuantityBar .Quantity>div[pageload="1"],
.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Properties .QuantityBar .Variation[pageload="1"]{
   height: 14px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Product>.Name[pageload="1"]{
   height: 17px
}
.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Product>.Color{
   width: 100%;
   font-size: 11px;
   color: #262626;
   display: flex;
   gap: 7px;
   align-items: center
}


.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Properties .QuantityBar{
   display: flex;
   align-items: center;
   width: max-content
}
.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Properties .QuantityBar .Quantity>div:nth-child(2)[pageload="1"]{
   height: 24px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Product>.Name{
   width: 100%;
   margin-bottom: 2px;
   font-size: 12px;
   line-height: 17px
}
.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Product>.Code {
   font-size: 11px;
   width: 100%;
   color: #888;
   margin-bottom: 10px;
   line-height: 15px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Properties {
   width: 100%;
   display: flex;
   margin-top: auto;
   align-items: center;
   justify-content: flex-start
}
.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Properties .QuantityBar .Quantity>select {
   width: 100%;
   border: 1px solid #000;
   padding: 4px 9px;
   outline: 0;
   font-size: 11px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem {
   width: 100%;
   display: flex;
   border-bottom: 1px solid #b2b2b2;
   padding-bottom: 24px;
   margin-bottom: 24px;
   position: relative;
   padding-left: 1px;
   padding-top: 1px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Gallery {
   width: 100%;
   max-width: 52px;
   margin-right: 12px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Gallery:hover,.ProductItem.Favorite .Gallery:hover {
   box-shadow: 0 0 0 1px #000
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem>.Info {
   width: 100%;
   display: flex;
   position: relative;
   height: inherit;
   padding: 0;
   margin: 0
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Product {
   width: 55%
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .PriceBox {
    position: absolute;
    right: 0;
    top: 0;
    min-width: 100px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: auto;
    text-align: right;
    flex-direction: column;
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .PriceBox .SalePrice .Info {
   display: flex;
   margin-right: 0;
   justify-content: flex-end;
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Properties .QuantityBar .Quantity {
   display: flex;
   align-items: center;
   font-size: 11px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Properties .QuantityBar .Quantity>div {
   margin-right: 8px;
   font-size: 11px;
   color: #262626;
   min-width: 38px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Properties .QuantityBar .Variation {
   display: flex;
   align-items: center;
   font-size: 11px;
   min-width: 65px;
   margin-left: 8px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Properties .QuantityBar .Variation::before {
   content: "";
   height: 14px;
   border-left: 1px solid #a2a2a2;
   padding-left: 6px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Properties .Social {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   gap: 22px;
   width: 48px;
   margin-left: auto
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Properties .Social .RemoveBag[pageload="1"] {
   width: var(--plw)!important;
   flex: none;
   height: 14px;
   width: var(--plw)!important;
   flex: none
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Gallery[pageload="1"]{
   height: 121px
}
.PopContent[fr=AddBagSuccess] .TabView[T=Add] .Product .Photo>img{
   width: 100%;
   display: block
}
.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Product>.Name:hover{
   text-decoration: underline;
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Product>.Color .Text{
   font-size: 11px
}
.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Properties .QuantityBar .Quantity>span,
.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Properties .QuantityBar .Variation>span{
   margin-left: 4px
}
.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .PriceBox .SalePrice{
   display: flex;
   justify-content: flex-end;
   align-items: flex-end;
}
.PopContent[fr=AddBagSuccess] .Closed:hover{
   opacity: .8
}
@media(max-width: 1140px) {
    .PopContent[fr=AddBagSuccess] .TabList .TabItem:not(.active):hover::before{
        display: none;
    }
    .PopContent[fr=AddBagSuccess] {
       width: 100%;
       height: 100vh
   }
     .PopContent[fr=AddBagSuccess] .TabList .TabItem:hover {
       opacity: 1
   }

   .PopContent[fr=AddBagSuccess] .TabList .TabItem.active:hover::before {
       background: #000
   }
    .PopContent[fr=AddBagSuccess] .TabView[T=Bag] .Addition {
       width: 100%;
       /* position: fixed; */
   }
}


@media(max-width: 991px) {
    
    .PopupBox.Mobil .PopContent[fr="AddBagSuccess"] .TabView.active[t="Bag"]{margin-bottom:env(safe-area-inset-bottom, 25px);}
    .PopContent[fr=AddBagSuccess] .TabView {
        height: calc(100% - 60px)!important;
    }
    .PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts{
        padding-bottom:200px!important
    }
    .PopContent[fr=AddBagSuccess] .TabView[T=Bag] .Addition {
        position:fixed!important;
        bottom:0!important;
        left:0!important;
        right: 0!important;
        padding-left:25px!important;
        padding-right:25px!important;
    }
}
.PopContent[fr=BagDelete]{
   width: 100%;
   display: flex;
   flex-direction: column;
   padding-top: 14px
}

.PopContent[fr=BagDelete]>.Title{
   width: 100%;
   margin-bottom: 17px;
   text-align: center
}

.PopContent[fr=BagDelete]>.Text {
   width: 100%;
   margin-bottom: 21px;
   text-align: center;
   line-height: 17px
}
 
.PopContent[fr=BagDelete]>.BtnList {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 16px
}
.PopContent[fr=AddBag]>.Footer>.Btn.SizeTable[data-id="0"],
.PopContent[fr=AddBag]>.Note:empty,.PopContent[fr=AddBag]>.PriceBox .SalePrice .SpecialText:empty,
.PopContent[fr=AddBag]>.Variations .SizeItem:not([qty="0"]) .Notification, 
.PopContent[fr=AddBag]>.Variations .SizeItem[Notification="0"] .Notification{
   display: none
}

.PopContent[fr=AddBag]>.PriceBox .SalePrice .SpecialText:hover{
   background: #000;
   color: #fff
}
.PopContent[fr=AddBag]>.PriceBox:not([OldPrice="0"]) .OldPrice{
   display: block
}

.PopContent[fr=AddBag]>.Name,.PopContent[fr=AddBag]>.Price {
   text-align: left;
   padding-left: 20px;
   line-height: 17px;
   width: 100%
}

.PopContent[fr=AddBag] {
   width: 100%;
   padding: 10px 0 0!important
}

.PopContent[fr=AddBag]>.Name {
   font-size: 11px
}
.PopContent[fr=AddBag]>.Name {
    font-size: 11px;
    font-weight: 700;
    padding-top: 12px;
}

.PopContent[fr=AddBag]>.PriceBox {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 4px;
   position: inherit;
   padding: 0 20px;
   margin-bottom: 14px
}

.PopContent[fr=AddBag]>.PriceBox .OldPrice{
   width: fit-content;
   font-size: 12px;
   line-height: 17px;
   position: relative;
   display: none
}
.PopContent[fr=AddBag]>.PriceBox .OldPrice:before,
.PopContent[fr=AddBag]>.PriceBox .SalePrice .Info{
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex-direction: row;
   width: initial;
   padding: 0;
   height: inherit
}


.PopContent[fr=AddBag]>.PriceBox:not([OldPrice="0"]) .SalePrice .Info{
   display: flex;
   justify-content: flex-start;
   align-items: center;
   background: #ffeb3b;
   margin-right: 10px;
   flex-direction: row;
   width: fit-content;
   padding: 0;
   height: inherit
}

.PopContent[fr=AddBag]>.PriceBox .SalePrice .Info>.Price {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   padding: 0x;
   line-height: 15px
}




.PopContent[fr=AddBag]>.PriceBox .Campaigns:empty{
   opacity: 0
}

.PopContent[fr=AddBag] .PriceBox[Campaing="1"][CampaingType="true"] .SalePrice .Info>.Price:before{
   top:9px
}

.PopContent[fr=AddBag]>.Gallery {
   width: 100%;
   display: grid;
}

.PopContent[fr=AddBag]>.Gallery .List {
   overflow: hidden;
   overflow-x: scroll;
   width: 100%;
   display: flex
}

.PopContent[fr=AddBag]>.Gallery .List::-webkit-scrollbar {
   height: 2px;
   background: #fff
}

.PopContent[fr=AddBag]>.Gallery .List:hover::-webkit-scrollbar-thumb {
   background: #000;
   border-radius: 2px
}

.PopContent[fr=AddBag]>.Gallery .List::-webkit-scrollbar-thumb:hover {
   background: #555
}

.PopContent[fr=AddBag]>.Gallery .List .Item {
   height: 100%;
   display: inline-block
}

.PopContent[fr=AddBag]>.Gallery .List .Item>img {
   width: 90px;
   display: block
}

.PopContent[fr=AddBag]>.Title {
   font-size: 10px;
   line-height: 14px;
   width: 100%;
   margin-top: 20px;
   margin-bottom: 18px;
   text-align: center
}

.PopContent[fr=AddBag]>.Note,
.PopContent[fr=AddBag]>.Variations {
   max-width: 72%;
   margin: 0 auto 35px;
   flex-direction: row;
   gap: 2px 34px;
   width: 100%;
   display: flex
}

.PopContent[fr=AddBag]>.Variations {
   align-items: center;
   justify-content: center;
   flex-wrap: wrap
}

.PopContent[fr=AddBag]>.Note {
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   color: #727272
}

.PopContent[fr=AddBag]>.Variations .SizeItem {
   display: flex;
   flex-direction: row;
   cursor: pointer
}


.PopContent[fr=AddBag]>.Variations .SizeItem .Size.active,
.PopContent[fr=AddBag]>.Variations .SizeItem .Size:hover {
   font-weight: 900
}

.PopContent[fr=AddBag]>.Variations .SizeItem .Size:hover::before {
   content: "";
   display: flex;
   height: 1px;
   background: #000;
   position: absolute;
   bottom: -5px;
   width: 60%;
   display: none;
}

.PopContent[fr=AddBag]>.Variations .SizeItem .Size.active::before {
   content: "";
   display: flex;
   background: #000;
   position: absolute;
   bottom: -5px;
   width: 4px;
   height: 4px
}

.PopContent[fr=AddBag]>.Variations .SizeItem .Size {
   width: fit-content;
   display: flex;
   margin: 10px 0;
   position: relative
}

.PopContent[fr=AddBag]>.Variations .SizeItem[qty="0"] .Size {
   pointer-events: none;
   color: #838383;
   text-decoration:line-through
}

.PopContent[fr=AddBag]>.Variations .SizeItem .Notification {
   width: 100%;
   display: none;
   margin-left: 10px;
   font-size:0
}
.PopContent[fr=AddBag]>.Variations .SizeItem[qty="0"][Notification="1"] .Notification {
   display: flex;
   align-items: center;
}
.PopContent[fr=AddBag]>.Variations .SizeItem .ReamingStock {
   display: none;
}
.PopContent[fr=AddBag]>.Footer {
   width: 100%;
   border-top: 1px solid;
   display: flex;
   align-items: center;
   justify-content: center;
   order: 9;
}

.PopContent[fr=AddBag]>.Footer>.Btn {
   width: 50%;
   line-height: 56px;
   font-size: 12px
}


.PopupBox.mod2 .PopContent[fr=AddBag]{
   width: 100%;
   padding: 0 !important;
   display: flex;
   flex-direction: column;
}
.PopupBox.mod2 .PopContent[fr=AddBag]>.Title {
   background: #efefef;
   line-height: 32px;
   display: flex;
   padding: 0 16px;
   border-radius: 0px;
   text-align: left;
   margin: 0;
   font-weight: 600;
}

.PopupBox.mod2 .PopContent[fr=AddBag]>.Note,
.PopupBox.mod2 .PopContent[fr=AddBag]>.Variations {
   max-width: 72%;
   margin: 0 auto 35px;
   flex-direction: row;
   gap: 2px 34px;
   width: 100%;
   display: flex
}

.PopupBox.mod2 .PopContent[fr=AddBag]>.Variations {
   max-width: 100%;
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   order: 2;
}

.PopupBox.mod2 .PopContent[fr=AddBag]>.Note {
   background: #fff;
   border-bottom: 1px solid #eee;
   width: 100%;
   max-width: 100%;
   line-height: 35px;
   display: flex;
   justify-content: flex-start;
   padding: 0 14px;
   color: #323232;
   font-size: 12px;
   order: 1;
   margin: 0;
}

.PopupBox.mod2 .PopContent[fr=AddBag]>.Variations .SizeItem {
   display: flex;
   flex-direction: row;
   cursor: pointer;
   padding: 0 14px;
   border-bottom: 1px solid #EEEEEE;
   width: 100%;
   font-size: 14px;
   font-weight: 500;
   color: #000;
   line-height: 26px;
}
.PopupBox.mod2 .PopContent[fr=AddBag]>.Variations .SizeItem[qty="0"]>.Size {
    color: #838383;
    text-decoration: line-through;
}
.PopupBox.mod2 .PopContent[fr=AddBag]>.Variations .SizeItem>.Notification {
    width: 100%;
    display: none;
    line-height: initial;
}
.PopupBox.mod2 .PopContent[fr=AddBag]>.Variations .SizeItem>.Notification>svg {
    display: block;
    height: 11px;
}
.PopupBox.mod2 .PopContent[fr=AddBag]>.Variations .SizeItem[qty="0"][Notification="1"]>.Notification {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    font-size: 12px;
    font-weight: 400;
}
.PopupBox.mod2 .PopContent[fr=AddBag]>.Variations .SizeItem>.ReamingStock {
    width: 100%;
    display: none;
    line-height: initial;
    color: #f00;
}
.PopupBox.mod2 .PopContent[fr=AddBag]>.Variations .SizeItem>.ReamingStock>svg {
    display: block;
    height: 11px;
}
.PopupBox.mod2 .PopContent[fr=AddBag]>.Variations .SizeItem[qty="1"]>.ReamingStock,
.PopupBox.mod2 .PopContent[fr=AddBag]>.Variations .SizeItem[qty="2"]>.ReamingStock {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    font-size: 12px;
    font-weight: 400;
}


@media(max-width: 1140px) {

    .PopupBox .PopContent[fr=AddBag] .Closed{
       display: none;
   }
    
}
[fr=PhoneChange] .Text,
[fr=PhoneChange] .Title {
   margin-bottom: 16px;
   text-align: center 
}
[fr=PhoneChange] {
   padding: 20px
}

[fr=PhoneChange] .Title {
   font-weight: 500
}

[fr=PhoneChange] .BtnList {
   display: flex;
   gap: 16px;
   margin-top: 20px;
   flex-direction: column
}
.PopContent[fr=SizeTable] .Viewer .Info,
.PopContent[fr=SizeTable] .Viewer .Info>.Img,
.PopContent[fr=SizeTable] .Viewer .Info>.Text{
   width: 100%
}
.PopContent[fr=SizeTable] .Viewer .Table .TableRow>div:empty{
   display: none
}
.PopContent[fr=SizeTable] .Viewer .Tab>.TabItem.active,
.PopContent[fr=SizeTable] .Viewer .Table .TableRow>div.active{
   color: #000;
   font-size: 13px;
}

.PopContent[fr=SizeTable] {
   width: 100%;
   padding: 120px 40px 40px
}
.PopContent[fr=SizeTable] .Title {
   width: 100%;
   margin-bottom: 40px;
   text-align: left
}
.PopContent[fr=OrderContract] .Viewer,
.PopContent[fr=SizeTable] .Viewer{
   width: 100%;
   margin-bottom: 32px
}

.mod2 .PopContent[fr=SizeTable] {
   padding: 0;
}
.mod2 .PopContent[fr=SizeTable]>.Title {
    border-bottom: 1px solid #ccc;
    line-height: 55px;
    font-weight: 600;
    margin-bottom: 0;
    padding: 0 18px;
}
.mod2 .PopContent[fr=SizeTable] .Viewer{
   padding: 0 18px;
}


.PopContent[fr=SizeTable] .Viewer .Tab {
   width: 100%;
   display: flex;
   justify-content: flex-end;
   gap: 20px;
   align-items: center;
   margin-bottom: 30px
}

.mod2 .PopContent[fr=SizeTable] .Viewer .Tab {
   margin-top: 32px;
}

.PopContent[fr=SizeTable] .Viewer .Tab>.Title {
   width: inherit;
   margin: 0
}

.PopContent[fr=SizeTable] .Viewer .Tab>.TabItem {
   color: #909090;
   cursor: pointer;
   position: relative
}

.PopContent[fr=SizeTable] .Viewer .Tab>.TabItem.active::before {
   content: "";
   background: #000;
   display: block;
   width: 2px;
   height: 2px;
   position: absolute;
   left: 50%;
   bottom: -2px
}

.PopContent[fr=SizeTable] .Viewer .Sizes {
   display: flex;
   justify-content: flex-start
}
.mod2 .PopContent[fr=SizeTable] .Viewer .Sizes {
   gap:6px
}

.PopContent[fr=SizeTable] .Viewer .Sizes>.Item {
   min-width: 50px;
   height: 50px;
   padding: 0 5px;
   border: 1px solid #909090;
   margin-right: -1px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #909090;
   cursor: pointer
}

.PopContent[fr=SizeTable] .Viewer .Sizes>.Item.active {
   border-color: #000;
   color: #000;
   z-index: 1
}

.PopContent[fr=SizeTable] .Viewer .Table {
   width: 100%;
   overflow: hidden;
   overflow-x: scroll;
   scrollbar-width: none;
   margin: 20px 0 50px
}

.PopContent[fr=SizeTable] .Viewer .Table .TableRow {
   width: 100%;
   display: flex;
   position: relative
}

.PopContent[fr=SizeTable] .Viewer .Table .TableRow>div {
   display: none;
   color: #909090;
   width: 91px;
   height: 32px;
   flex: none;
   text-align: center
}

.PopContent[fr=SizeTable] .Viewer .Table .TableRow>div select {
   border: 0;
   font-size: 12px;
   padding: 0;
   text-align: left;
   outline: 0
}

.PopContent[fr=SizeTable] .Viewer .Table .TableRow>div:first-child {
   display: flex;
   color: #000;
   position: fixed;
   background: #fff;
   align-items: center;
   justify-content: flex-start
}

.PopContent[fr=SizeTable] .Viewer .Table .TableRow>div.show {
   margin-left: 81px;
   display: flex;
   align-items: center;
   justify-content: center
}

.PopContent[fr=SizeTable] .Viewer .Table .TableRow>div.show+.show {
   margin-left: 0
}
.PopContent[fr=SizeTable] .Viewer .Table .TableRow>div>span:nth-child(2){
   margin-left: 4px
}
.PopContent[fr=SizeTable] .Viewer .Info>.Title {
   width: 100%;
   margin-bottom: 12px
}
.PopContent[fr=SizeTable] .Viewer .Info>.Text >p{
   margin-bottom: 7px
}
.PopContent[fr=OrderCancel] .List .Check.active::after{
   content: "";
   width: 6px;
   height: 6px;
   background: #000;
   position: absolute;
   left: 4px;
   top: 4px;
   flex: none
}

.PopContent[fr=OrderCancel] .List .Check::before{
   content: "";
   width: 12px;
   height: 12px;
   border: 1px solid #000;
   flex: none;
   position: absolute;
   left: 0
}

.PopContent[fr=OrderCancel] {
   width: 100%;
   padding: 20px 0 0
}

.PopContent[fr=OrderCancel] .Title {
   width: 100%;
   margin-bottom: 5px;
   text-align: left
}

.PopContent[fr=OrderCancel] .List,
.PopContent[fr=OrderCancel] .Text {
   width: 100%;
   margin-bottom: 20px;
   text-align: left
}

.PopContent[fr=OrderCancel] .SelectedItem {
   cursor: pointer;
   width: 100%;
   display: flex;
   text-align: left;
   align-items: center;
   line-height: 26px
}

.PopContent[fr=OrderCancel] .SelectedItem>.Text{
   margin-bottom: 0
}

.PopContent[fr=OrderCancel] .List .Check{
   display: flex;
   height: 14px;
   justify-content: flex-start;
   position: relative;
   align-items: center;
   margin-right: 10px;
   padding-left: 24px;
   gap: 6px
}

.PopContent[fr=OrderCancel] .BtnList {
   display: flex;
   gap: 16px;
   flex-direction: column
}
.PopContent[fr=SaveMember]>.Form .Contract .Text>span:hover{
   text-decoration: underline;
}


.PopContent[fr=SaveMember] {
   width: 100%;
   padding: 70px 40px 36px
}

.PopContent[fr=SaveMember]>.Title{
   width: 100%;
   margin-bottom: 16px
}

.PopContent[fr=SaveMember]>.Form {
   width: 100%;
   display: flex;
   flex-direction: column;
   overflow: auto;
   padding: 0 15px 0 1px
}

.PopContent[fr=SaveMember]>.Form::-webkit-scrollbar {
   height: 1px;
   background: #000;
   width: 1px;
   background: #0000001f
}

.PopContent[fr=SaveMember]>.Form::-webkit-scrollbar-thumb {
   height: 1px;
   border-radius: 2px;
   background: #000
}

.PopContent[fr=SaveMember]>.Form .BtnList{
   width: 100%;
   display: flex;
   margin: 40px 0 30px
}

.PopContent[fr=SaveMember]>.Form .Contract {
   display: flex;
   margin-top: 20px;
   align-content: flex-start;
   align-items: flex-start;
   cursor: pointer
}

.PopContent[fr=SaveMember]>.Form .Contract .Text {
   display: flex;
   margin: -1px 0 0;
   padding: 0
}

.PopContent[fr=SaveMember]>.Form .Contract .Text>span{
   font-weight: 500;
   cursor: pointer
}

.PopContent[fr=SaveMember]>.Form .Check{
   display: flex;
   width: 11px;
   height: 11px;
   justify-content: center;
   position: relative;
   align-items: center;
   margin-right: 8px;
   flex: none
}

.PopContent[fr=SaveMember]>.Form .Check+div {
   margin-top: 3px;
   margin-bottom: -1px
}

.PopContent[fr=SaveMember]>.Form .Check::before{
   content: "";
   width: 11px;
   height: 11px;
   border: 1px solid #000;
   flex: none
}

.PopContent[fr=SaveMember]>.Form .Check.active::after{
   content: "";
   width: 5px;
   height: 5px;
   background: #000;
   position: absolute;
   left: 3px;
   top: 3px;
   flex: none
}
.PopContent[fr=SaveMemberNotification] {
   width: 100%;
   display: flex;
   flex-direction: column; 
   padding-top: 14px
}

.PopContent[fr=SaveMemberNotification]>.Title {
   width: 100%;
   margin-bottom: 17px;
   text-align: center
}

.PopContent[fr=SaveMemberNotification]>.Text {
   width: 100%;
   margin-bottom: 2px;
   text-align: center;
   line-height: 18px
}

.PopContent[fr=SaveMemberNotification]>.BtnList {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 16px;
   margin-top: 25px
}
.PopContent[fr=FeaturesTab]{
   width: 100%;
   padding: 120px 40px 40px
}
.PopContent[fr=FeaturesTab] .Title{
   width: 100%;
   margin-bottom: 40px;
   text-align: left
}


.mod2 .PopContent[fr=FeaturesTab]{
   padding: 0;
}
.mod2 .PopContent[fr=FeaturesTab]>.Title{
    border-bottom: 1px solid #ccc;
    line-height: 55px;
    font-weight: 600;
    margin-bottom: 0;
    padding: 0 18px;
}
.PopContent[fr=FeaturesTab] .Viewer {
    width: 100%;
    overflow: auto;
    padding: 20px 18px;
}

.PopContent[fr=FeaturesTab] .Viewer::-webkit-scrollbar {
   width: 2px;
   background: #fff;
   display: block
}

.PopContent[fr=FeaturesTab] .Viewer:hover::-webkit-scrollbar-thumb {
   background: #000;
   border-radius: 2px
}

.PopContent[fr=FeaturesTab] .Viewer::-webkit-scrollbar-thumb {
   background: #555
}
.PopContent[fr=mod100Preview] {
   width: 100%;
   padding: 70px 40px 40px;
   display: flex;
   flex-direction: column
}

.PopContent[fr=mod100Preview] .Title {
   width: 100%;
   line-height: 17px;
   margin-bottom: 12px
}

.PopContent[fr=mod100Preview] .Text {
   width: 100%;
   font-size: 11px;
   margin-bottom: 40px
}

.PopContent[fr=mod100Preview] .Products::-webkit-scrollbar {
   width: 2px;
   background: #b2b2b2
}

.PopContent[fr=mod100Preview] .Products::-webkit-scrollbar-thumb {
   background: #000;
   border-radius: 2px
}

.PopContent[fr=mod100Preview] .Products::-webkit-scrollbar-thumb:hover {
   background: #555
}

.PopContent[fr=mod100Preview] .Products .ProductItem {
   width: 100%;
   margin-bottom: 45px
}

.PopContent[fr=mod100Preview] .Products .ProductItem>div .Gallery {
   width: 97px;
   margin-right: 7px;
   flex: none
}

.PopContent[fr=mod100Preview] .Products .ProductItem>div .Info {
   width: 100%;
   display: flex;
   flex-direction: column;
   height: inherit;
   padding: 0 10px
}

.PopContent[fr=mod100Preview] .Products .ProductItem>div .Info .Name {
   width: 100%;
   font-size: 11px;
   line-height: 15px;
   margin-bottom: 3px;
   text-wrap: auto
}

.PopContent[fr=mod100Preview] .Products .ProductItem>div .Info .Colors {
   width: 100%;
   display: flex;
   justify-content: flex-start;
   gap: 12px;
   margin-top: 10px
}

.PopContent[fr=mod100Preview] .Products .ProductItem>div .Info .Colors .ColorItem {
   cursor: pointer;
   position: relative
}

.PopContent[fr=mod100Preview] .Products .ProductItem>div .Info .Colors .ColorItem .Color {
   width: 16px;
   height: 16px
}

.PopContent[fr=mod100Preview] .Products .ProductItem>div .Info .Variations>select {
   width: 100%;
   border: 0;
   border-bottom: 1px solid #000;
   line-height: 24px;
   padding: 5px 0;
   font-size: 12px;
   outline: 0
}

.PopContent[fr=mod100Preview] .Products .ProductItem>div .Info .Variations>select>option[value="0"] {
   color: #707070
}

.PopContent[fr=mod100Preview] .Addition {
   width: 100%;
   margin-top: auto;
   margin-bottom: 14px;
   display: flex;
   align-items: center;
   justify-content: space-between
}

.PopContent[fr=mod100Preview] .Addition>div:first-child {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-start
}

.PopContent[fr=mod100Preview] .Addition>div:first-child>span:first-child,
.PopContent[fr=mod100Preview] .Addition>div:first-child>span:nth-child(2),
.PopContent[fr=mod100Preview] .Addition>div:nth-child(2)>span:first-child,
.PopContent[fr=mod100Preview] .Addition>div:nth-child(2)>span:nth-child(2) {
   font-size: 12px;
   line-height: 17px
}

.PopContent[fr=mod100Preview] .Addition>div:nth-child(2) {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-end
}

.PopContent[fr=mod100Preview] .Btn,
.PopContent[fr=mod100Preview] .Products .ProductItem>div .Gallery img{
   width: 100%
}
.PopContent[fr=mod100Preview] .Products .ProductItem>div .Info .Variations {
   width: 100%;
   margin-top: auto
}
.PopContent[fr=mod100Preview] .Products .ProductItem .Info .PriceBox .SalePrice .Info {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex-direction: row;
   width: initial;
   padding: 0;
   height: inherit
}

.PopContent[fr=mod100Preview] .Products .ProductItem>div .Info .Colors .ColorItem.active{
   cursor: pointer
}
.PopContent[fr=mod100Preview] .Products .ProductItem>div{
   width: 100%;
   display: flex;
}
.PopContent[fr=mod100Preview] .Products .ProductItem>div .Info .Colors .ColorItem .Name{
   width: 100%;
   display: none
}

.PopContent[fr=mod100Preview] .Products .ProductItem>div .Info .Colors .ColorItem.active:before {
   content: "";
   display: flex;
   height: 1px;
   background: #000;
   position: absolute;
   bottom: -5px;
   width: 100%
}

.PopContent[fr=mod100Preview] .Products .ProductItem>div .Info .Colors .ColorItem.active:not(:empty):hover:before {
   content: "";
   display: flex;
   height: 1px;
   background: grey;
   position: absolute;
   bottom: -5px;
   width: 100%
}
.PopContent[fr=OrderContract],
.PopContent[fr=OrderContract] .Viewer .ContractTab{
   width: 100%
}

.PopContent[fr=OrderContract] .Viewer .ContractTab .ContractTabTitle>svg[fr=accordionOpen],
.PopContent[fr=OrderContract] .Viewer .ContractTab.Open .ContractTabTitle>svg[fr=accordioClose]{
   display: none
}

.PopContent[fr=OrderContract] .Viewer{
   width: 100%;
   margin-bottom: 32px
}

.mod2 .PopContent[fr=OrderContract] .Viewer{
   padding: 0 18px;
}
.PopContent[fr=OrderContract] .Title {
   width: 100%;
   font-weight: 500;
   text-transform: uppercase;
   margin-bottom: 10px
}

.PopContent[fr=OrderContract] .Viewer .ContractTab .ContractTabTitle {
   width: 100%;
   border: 1px solid #a3a3a3;
   padding: 15px;
   margin-bottom: -1px;
   display: flex;
   align-items: center;
   justify-content: space-between
}


.PopContent[fr=OrderContract] .Viewer .ContractTab .ContractTabTitle>svg{
   display: block
}
.PopContent[fr=OrderContract] .Viewer .ContractTab.Open .ContractTabTitle>svg[fr=accordionOpen]{
   display: block
}

.PopContent[fr=OrderContract] .Viewer .ContractTab .ContractTabView {
   width: 100%;
   overflow: auto;
   overflow-y: scroll;
   padding: 24px 24px 40px;
   border: 1px solid #a3a3a3;
   border-bottom: 0;
   display: none
}

.PopContent[fr=OrderContract] .Viewer .ContractTab:last-child .ContractTabView {
   border-bottom: 1px solid #a3a3a3
}

.PopContent[fr=OrderContract] .Viewer .ContractTab .ContractTabView::-webkit-scrollbar {
   height: 0;
   width: 2px;
   background: #fff;
   display: block
}

.PopContent[fr=OrderContract] .Viewer .ContractTab .ContractTabView::-webkit-scrollbar-thumb {
   background: #555;
   border-radius: 2px
}

.PopContent[fr=OrderContract] .Btn {
   width: 100%;
   margin-top: auto;
   position: absolute; 
   left: 0;
   bottom: 0
}

@media(max-width: 1140px) {
    .PopContent[fr=OrderContract] .Btn {
       position: inherit;
       left: 0;
       bottom: 0;
       z-index: 11
    }
}
.PopupBox.Loading>.OverFlow {
   background: #ffffff78
}

.PopupBox.Loading {
   display: flex;
   align-items: flex-start
}

.PopupBox.Loading>.Document {
   border: 1px solid #ccc;
   margin-top: 15%
}


.PopContent[fr=Loading] {
   padding: 30px;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center
}

.PopContent[fr=Loading]:before {
   content: "";
   display: flex;
   background-image: url('/NewWebSites/img/body_loading.svg?v45');
   width: 32px;
   height: 22px;
   position: absolute;
   top: 46px;
   background-size: 32px;
   z-index: 20
}

.PopContent[fr=Loading] .Title {
   text-transform: uppercase;
   text-align: center
}
.PopContent[fr=AddBankAccount] .Closed:hover{
   opacity: .8
}

.PopContent[fr=AddBankAccount] .Closed{
   position: absolute;
   right: 20px;
   top: 20px;
   cursor: pointer
}

.PopContent[fr=AddBankAccount]{
   width: 100%;
   padding: 30px 0 0
}

.PopContent[fr=AddBankAccount] .Title
   width: 100%;
   text-align: center;
   font-weight: 500;
   margin-bottom: 18px
}

.PopContent[fr=AddBankAccount] .Text{
   width: 100%;
   text-align: center;
   margin-bottom: 20px
}

.PopContent[fr=AddBankAccount] .Form {
   width: 100%;
   margin: 15px 0;
   display: block
}

.PopContent[fr=AddBankAccount] .BtnList {
   width: 100%;
   display: flex;
   gap: 12px;
   flex-direction: column
}
.PopContent[fr=BalancePayment] .BankList [fr=selectedAccount]:hover,
.PopContent[fr=BalancePayment] .Closed:hover{
   opacity: .8
}
.PopContent[fr=BalancePayment] .Closed{
   position: absolute;
   right: 20px;
   top: 20px;
   cursor: pointer
}
.PopContent[fr=BalancePayment] .BankList [fr=selectedAccount]>div:nth-child(2) span:first-child,
.PopContent[fr=BalancePayment] .BankList [fr=selectedAccount]>div:nth-child(2) span:nth-child(2){
   font-size: 11px
}

.PopContent[fr=BalancePayment] {
   width: 100%;
   padding: 30px 0 0
}

.PopContent[fr=BalancePayment] .Title {
   width: 100%;
   text-align: center;
   font-weight: 500;
   margin-bottom: 18px
}

.PopContent[fr=BalancePayment] .Text {
   width: 100%;
   text-align: center;
   margin-bottom: 20px
}


.PopContent[fr=BalancePayment] .Info {
   width: 100%;
   background: #fff7f7;
   color: #ef0000;
   padding: 20px 0;
   text-align: center;
   display: none
}

.PopContent[fr=BalancePayment] .Form {
   width: 100%;
   margin: 15px 0;
   display: none
}

.PopContent[fr=BalancePayment] .BtnList {
   width: 100%;
   gap: 12px;
   flex-direction: column;
   display: none
}

.PopContent[fr=BalancePayment] .BankList {
   width: 100%;
   display: flex;
   flex-direction: column;
   overflow: auto;
   max-height: 300px;
   padding-right: 7px
}

.PopContent[fr=BalancePayment] .BankList::-webkit-scrollbar {
   width: 2px;
   background: #b2b2b2
}

.PopContent[fr=BalancePayment] .BankList::-webkit-scrollbar-thumb {
   background: #000;
   border-radius: 2px
}

.PopContent[fr=BalancePayment] .BankList::-webkit-scrollbar-thumb:hover {
   background: #555
}

.PopContent[fr=BalancePayment] .Btn[fr=accountList],.PopContent[fr=BalancePayment] .Btn[fr=newAccount] {
   width: 100%;
   text-align: left;
   text-decoration: underline
}

.PopContent[fr=BalancePayment] .BankList [fr=selectedAccount] {
   width: 100%;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   border: 1px solid #ccc;
   border-left: 0;
   border-right: 0;
   padding: 16px 0;
   margin-bottom: -1px;
   cursor: pointer
}

.PopContent[fr=BalancePayment] .BankList [fr=selectedAccount]>div:first-child {
   font-size: 10px;
   text-transform: uppercase;
   max-width: 30%
}

.PopContent[fr=BalancePayment] .BankList [fr=selectedAccount]>div:nth-child(2) {
   display: flex;
   flex-direction: column;
   align-items: flex-end
}
.PopContent[fr=Sms] .otc label{
   border: 0;
   clip: rect(1px,1px,1px,1px);
   -webkit-clip-path: inset(50%);
   clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   width: 1px;
   white-space: nowrap
}

.PopContent[fr=Sms] .top-area {
   position: relative;
   text-align: center;
   display: flex;
   flex-direction: column
}

.PopContent[fr=Sms] .title {
   position: relative;
   margin: 0 0 17px
}

.PopContent[fr=Sms] .text {
   position: relative;
   margin: 0 auto;
   max-width: 62%
}

.PopContent[fr=Sms] .otc {
   position: relative;
   margin-top: 22px
}

.PopContent[fr=Sms] .otc .fieldset-sms{
   border: 0;
   padding: 0;
   margin: 0
}

.PopContent[fr=Sms] .otc .input-group{
   display: flex;
   align-items: center;
   justify-content: space-between
}

.PopContent[fr=Sms] .otc legend.label {
   font-size: 12px;
   color: #000;
   text-align: center;
   text-transform: uppercase
}

.PopContent[fr=Sms] .otc.error legend.label {
   color: red
}

.PopContent[fr=Sms] .otc .fieldset-sms .input-group>input {
   width: 41px;
   height: 46px;
   line-height: 1;
   margin-top: 10px;
   padding: 15px 0 0;
   font-size: 18px;
   appearance: textfield;
   -webkit-appearance: textfield;
   border: 0;
   border-bottom: 1px solid #000;
   color: #000;
   outline: 0;
   text-align: center
}

.PopContent[fr=Sms] .otc .fieldset-sms .input-group>input[type=number].input-code.full {
   border-color: #000;
   background-color: #fff
}

.PopContent[fr=Sms] .otc.error .fieldset-sms .input-group>input[type=number].input-code.full {
   border-color: red;
   color: red
}

.PopContent[fr=Sms] .otc .left-time {
   margin-top: 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-direction: column-reverse
}

.PopContent[fr=Sms] .otc .left-time .timekeeper {
   font-size: 12px;
   color: #000;
   cursor: pointer;
   line-height: 16px;
   margin: 4px 0
}

.PopContent[fr=Sms] .otc .left-time .time-text {
   font-size: 11px;
   color: #8b8b8b;
   line-height: 16px
}

.PopContent[fr=Sms] .otc .verify-area{
   margin-top: 8px
}

.PopContent[fr=Sms] .otc .verify-area .btn-verify {
   background-color: #efefef;
   border: 1px solid #e5e5e5;
   cursor: pointer;
   display: block;
   width: 100%;
   height: 39px;
   font-size: 12px;
   text-transform: uppercase;
   color: #939393;
   transition: .3s linear
}

.PopContent[fr=Sms] .otc .verify-area .btn-verify.success {
   background-color: #000;
   color: #fff
}


.PopContent[fr=ProductInstallment] .InstallmentBox .PosView{
   display: none
}

.PopContent[fr=ProductInstallment] .InstallmentBox .PosList .PosItem.active img{
   filter: none
}


.PopContent[fr=ProductInstallment] .InstallmentBox .PosView table tbody,
.PopContent[fr=ProductInstallment] .InstallmentBox .PosView table thead,
.PopContent[fr=ProductInstallment] .InstallmentBox .PosView table thead tr,
.PopContent[fr=ProductInstallment] .Pay .Tab .Text{
   width: 100%
}
.PopContent[fr=ProductInstallment] .InstallmentBox .PosView{
   display: none
}
.PopContent[fr=ProductInstallment] .InstallmentBox .PosView.active{
   display: block
}
.PopContent[fr=ProductInstallment] .InstallmentBox .PosView table tbody tr .Check.active::after{
   content: "";
   width: 6px;
   height: 6px;
   background: #000;
   position: absolute;
   left: 4px;
   top: 4px;
   flex: none
}
.PopContent[fr=ProductInstallment] .InstallmentArea{
   display: flex;
   align-items: center
}
.PopContent[fr=ProductInstallment] .InstallmentBox .PosView table tbody tr .Check::before{
   content: "";
   width: 12px;
   height: 12px;
   border: 1px solid #000;
   flex: none;
   position: absolute;
   left: 0
}
.PopContent[fr=ProductInstallment] .InstallmentBox .PosView table tbody tr .Check{
   display: flex;
   height: 14px;
   justify-content: flex-start;
   position: relative;
   align-items: center;
   margin-right: 10px;
   padding-left: 24px;
   gap: 6px
}

.PopContent[fr=ProductInstallment]{
   width: 100%;
   padding: 120px 40px 40px
}
.PopContent[fr=ProductInstallment] .Title{
   width: 100%;
   margin-bottom: 40px;
   text-align: left
}

.mod2 .PopContent[fr=ProductInstallment]{
   padding: 0;
}
.mod2 .PopContent[fr=ProductInstallment]>.Title{
    border-bottom: 1px solid #ccc;
    line-height: 55px;
    font-weight: 600;
    margin-bottom: 0;
    padding: 0 18px;
}

.PopContent[fr=ProductInstallment] .Pay {
   width: 100%;
   display: flex;
   align-items: stretch;
   margin-bottom: 30px;
   gap: 8px;
   flex-wrap: wrap
}
.mod2 .PopContent[fr=ProductInstallment] .Pay {
   padding:0 18px;
   margin-top:18px
}
.PopContent[fr=ProductInstallment] .InstallmentArea{padding:0 18px}

.PopContent[fr=ProductInstallment] .Pay .Tab {
   width: calc(50% - 4px);
   display: flex;
   flex-direction: column;
   border: 1px solid #000;
   padding: 10px
}

.PopContent[fr=ProductInstallment] .Pay .Tab .Title {
   width: 100%;
   font-weight: 100;
   font-size: 11px;
   color: #2b2b2b;
   margin: 0
}

.PopContent[fr=ProductInstallment] .InstallmentArea .Title {
   display: flex;
   align-items: center;
   margin-bottom: 20px
}

.PopContent[fr=ProductInstallment] .InstallmentBox {
   display: flex;
   flex-direction: column;
   max-width: 450px
}
.mod2 .PopContent[fr=ProductInstallment] .InstallmentBox {
   padding:0 18px
}

.PopContent[fr=ProductInstallment] .InstallmentBox .PosList {
   display: flex;
   gap: 12px;
   overflow: hidden;
   flex-direction: row;
   position: relative;
   align-content: space-around;
   margin-bottom: 23px
}

.PopContent[fr=ProductInstallment] .InstallmentBox .PosList>.Arrow:first-child{
   background: #fff;
   flex: none;
   position: absolute;
   left: 0;
   top: 0;
   z-index: 1;
   height: 95%;
   width: 20px;
   flex: none;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   display: none
}

.PopContent[fr=ProductInstallment] .InstallmentBox .PosList>.Arrow:nth-child(3){
   background: #fff;
   flex: none;
   position: absolute;
   right: 0;
   top: 0;
   z-index: 1;
   height: 95%;
   width: 20px;
   flex: none;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   display: none
}

.PopContent[fr=ProductInstallment] .InstallmentBox .PosList>.Arrow>svg[fr=scrollLeft]{
   display: flex;
   height: 6px;
   transform: rotate(270deg);
   flex: none
}

.PopContent[fr=ProductInstallment] .InstallmentBox .PosList>.Arrow>svg[fr=scrollRight]{
   width: 27px;
   background: #fff;
   transform: rotate(90deg);
   flex: none
}

.PopContent[fr=ProductInstallment] .InstallmentBox .PosList>.List {
   display: flex;
   align-items: center;
   gap: 12px;
   overflow-y: auto;
   border-top: 1px solid;
   padding: 12px 0
}

.PopContent[fr=ProductInstallment] .InstallmentBox .PosList>.List::-webkit-scrollbar {
   height: 1px;
   background: #000;
   width: 1px;
   background: #0000001f
}

.PopContent[fr=ProductInstallment] .InstallmentBox .PosList>.List::-webkit-scrollbar-thumb {
   height: 1px;
   border-radius: 2px;
   background: #000
}

.PopContent[fr=ProductInstallment] .InstallmentBox .PosList .PosItem {
   width: 100%;
   display: flex;
   cursor: pointer;
   padding: 0 10px 0 0;
   justify-content: space-between;
   align-items: flex-end;
   border-right: 1px solid #000
}

.PopContent[fr=ProductInstallment] .InstallmentBox .PosList .PosItem img {
   display: flex;
   filter: grayscale(1);
   height: 13px
}

.PopContent[fr=ProductInstallment] .InstallmentBox .PosList .PosItem span {
   margin-left: auto;
   font-size: 11px
}

.PopContent[fr=ProductInstallment] .InstallmentBox .PosView table{
   width: 100%;
   border-collapse: collapse
}

.PopContent[fr=ProductInstallment] .InstallmentBox .PosView table thead tr th{
   font-weight: 500;
   line-height: 40px;
   padding: 0 12px;
   font-size: 11px
}
.PopContent[fr=ProductInstallment] .InstallmentBox .PosView table tbody tr td:first-child,
.PopContent[fr=ProductInstallment] .InstallmentBox .PosView table thead tr th:first-child{
   text-align: left
}

.PopContent[fr=ProductInstallment] .InstallmentBox .PosView table tbody tr td:nth-child(3),
.PopContent[fr=ProductInstallment] .InstallmentBox .PosView table thead tr th:nth-child(3){
   text-align: right
}

.PopContent[fr=ProductInstallment] .InstallmentBox .PosView table tbody tr{
   width: 100%;
   cursor: pointer
}
.PopContent[fr=ProductInstallment] .InstallmentBox .PosView table tbody tr:hover td{
   background: #f5f5f5
}

.PopContent[fr=ProductInstallment] .InstallmentBox .PosView table tbody tr td{
   font-size: 11px;
   border-bottom: 1px solid #ededed;
   line-height: 11px;
   text-align: center;
   padding: 15px 12px;
   width: 33.33%;
   position: relative
}