.d-none{display:none !important}


.Popup ::-webkit-scrollbar {
    width: 6px!important;
    height: 6px!important
}


.Popup *::-webkit-scrollbar-thumb {
    background-color: #bfbfbf
}

.Popup *::-webkit-scrollbar-track {
    background: rgb(232 232 232 / 87%)
}

.TabList{width:100%;display: flex;align-items: center;justify-content: flex-start;padding: 0px 14px;gap: 8px;}
.TabList .TabItem{border: 1px solid #ccc;border-radius: 4px;line-height: 34px;font-size: 13px;font-weight: 600;padding: 0 8px;cursor: pointer;}
.TabList .TabItem[T="0"]{display:none}
.TabList .TabItem.active{background: #03a9f400;border-color: #03A9F4;color: #03A9F4;}

.Search{width:100%;position: relative;margin-bottom: 10px;}
.Search>svg{height: 20px;position: absolute;left: 10px;top: 10px;}
.Search>input{border: 1px solid #ccc;width:100%;border-radius: 11px;line-height: 36px;text-indent: 36px;font-size: 14px;font-weight: 700;background: #efefef38;outline: none;}

[x='NaviList']{overflow: auto;height: 719px;display: flex;flex-direction: column;}
.SectionItem{width:100%;line-height: 16px;}
.SectionItem .Section{width:100%;display: flex;background: #fff;border: 1px solid #e9e9e9;border-radius: 6px;font-size: 13px;padding: 6px;align-items: center;box-shadow: 0px 4px 9px -10px #000;cursor: pointer;margin-bottom: 5px;}
.SectionItem .Section:hover{background: #f7f7f785;border-color: #e9e9e9;}
.SectionItem.active .Section{background: #f7f7f785;border-color: #e9e9e9;border-bottom: 2px solid #0bb1fe;}
.SectionItem.active .Section>.Content .Name{color: #0bb1fe;}
.SectionItem .Section>.Content{width:100%}
.SectionItem .Section>.Content .Name{width:100%;font-weight: bold;font-size: 12px;}
.SectionItem .Section>.Content .Info{width:100%;display: flex;gap: 3px;font-size: 11px;}
.SectionItem .Section>.Content .Info .Counter{width: 30px;flex: none;}
.SectionItem .Section>.Content .Info .Counter>span:nth-child(1){width:100%}
.SectionItem .Section>.Content .Info .Counter>span:nth-child(2){width:100%}
.SectionItem .Section>.Content .Info .Timer{width:100%}
.SectionItem .Section>.Icon{width: 16px;flex: none;margin-left: auto;}
.SectionItem .Section>.Icon:before {
    content: "\ec0f";
}
.SectionItem.active .Section>.Icon:before {
    content: "\ebbd";
}
.SectionItem .Units{width:100%;display: flex;flex-direction: column;gap: 0px;display: none;}
.SectionItem.active .Units{display: flex;}
.SectionItem .Units .UnitItem{width:100%;background: #efefef;padding: 6px;border-radius: 4px;cursor: pointer;margin: 5px 0px 0px 0px;}
.SectionItem .Units .UnitItem:last-child{
    margin-bottom: 12px;
}
.SectionItem .Units .UnitItem:first-child{
    margin-top: 12px;
}
.SectionItem .Units .UnitItem:hover{width:100%;background: #2196f305;box-shadow: inset 0px 0px 0px 1px #0bb1fe;}
.SectionItem .Units .UnitItem.play{width:100%;background: #2196f305;box-shadow: inset 0px 0px 0px 1px #0bb1fe;}
.SectionItem .Units .UnitItem .Unit{width:100%;display: flex;flex-direction: column;font-size: 12px;}
.SectionItem .Units .UnitItem .Unit .Content{width:100%;display: flex;align-items: flex-start;}
.SectionItem .Units .UnitItem .Unit .Content>.Player{width: 20px;flex: none;}
.SectionItem .Units .UnitItem .Unit .Content>.Player>svg{width: inherit;height: 16px;fill: #ffffff;}
.SectionItem .Units .UnitItem.play .Unit .Content>.Player>svg{fill: #08b1fe;}
.SectionItem .Units .UnitItem.play .Unit .Content>.Name{color: #08b1fe;}
.SectionItem .Units .UnitItem .Unit .Content>.Name{width:100%}
.SectionItem .Units .UnitItem .Unit .Content>.Timer{width: 50px;flex: none;font-size: 9px;font-weight: bold;text-align: right;}
.SectionItem .Units .UnitItem .Unit .Content>.Status{width: 28px;flex: none;display: flex;align-items: center;justify-content: flex-end;margin-top: 2px;}
.SectionItem .Units .UnitItem:not(.completed) .Unit .Content>.Status:before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius:100%;
    background: #d8d8d8;
}
.SectionItem .Units .UnitItem.play:not(.completed) .Unit .Content>.Status:before {
    content: "";
    background: transparent;
    box-shadow: inset 0px 0px 0px 3px #0bb1fe;
}
.SectionItem .Units .UnitItem.completed .Unit .Content>.Status:before {
    content: "\e99c";
    color: #0bb1fe;
    font-size: 13px;
}
.SectionItem .Units .UnitItem .Unit .Progress{width:100%;display: flex;gap: 10px;align-items: center;margin-top: 4px;}
.SectionItem .Units .UnitItem .Unit .Progress .WatchTime{width: 50px;flex: none;font-size: 10px;font-weight: bold;line-height: 12px;margin-top: 6px;}
.SectionItem .Units .UnitItem .Unit .Progress .RateBar{width:100%;height: 6px;border-radius: 4px;overflow: hidden;background: #ccccccab;margin-top: 7px;}
.SectionItem .Units .UnitItem .Unit .Progress .RateBar>span{background: #2ad131;display: block;height: 10px;width: 0;}
.SectionItem .Units .UnitItem .Unit .Progress .Documents{/* width: 140px; */flex: none;display: flex;align-items: center;justify-content: space-between;gap: 5px;}
.SectionItem .Units .UnitItem .Unit .Progress .Documents>div{background: #cccccc4f;border: 1px solid #0000002b;border-radius: 2px;display: flex;align-items: center;justify-content: center;padding: 2px 3px;font-size: 10px;gap: 3px;}
.SectionItem .Units .UnitItem .Unit .Progress .Documents[note="0"]>div.note{display:none}
.SectionItem .Units .UnitItem .Unit .Progress .Documents[document="0"]>div.document{display:none}



.NotificationBar {
    position: fixed;
    right: 10px;
    top: 10px;
    display: flex;
    flex-direction: column;
    z-index: 1111111111111;
    max-width: 300px;
    gap: 10px;
}

.mb15{margin-bottom:15px !important}

.NotificationBar .Notification {
    width: 100%;
    background: #fff;
    border-right: 8px solid #f3f3f3;
    padding: 14px;
    margin-top: -1px;
    margin-left: -100%;
    transition: all .3s;
    border-radius: 10px;
}

.NotificationBar .Notification.DarkInfo {
    background: #000;
    color: #fff;
    border-left-color: #000
}

.NotificationBar .Notification.Error {
    border-color: red;
    background: #ffe0e0;
}

.NotificationBar .Notification.Success {
    border-color: #4caf50;
    background: #e4ffca;
}

.NotificationBar .Notification.Show {
    height: auto;
    margin-left: 0;
    transition: all .3s
}

.NotificationBar .Notification .Title {
    width: 100%;
    display: flex;
    align-items: center;
}

.NotificationBar .Notification .Title>span {
    width: 100%;
    font-weight: 500;
    font-size: 14px;
}

.NotificationBar .Notification.Error .Title>span {
    color: #310808;
}

.NotificationBar .Notification.Success .Title>span {
    color: #247927
}

.NotificationBar .Notification .Text {
    width: 100%;
    font-size: 14px;
    color: #000;
}












.Popup{width:100%;height: 100%;position: fixed;left: 0;top: 0;display: flex;background: #041f3557; align-items: center;justify-content: center;z-index: 11111;}
.Popup .Overflow{width:100%;height: 100%;position: fixed;left: 0;top: 0;display: flex;background: #041f3557;backdrop-filter: blur(5px);align-items: center;justify-content: center;z-index: 1;}
.Popup:not(.Right) .Document{width: 520px;background: #fff;border-radius: 3px;flex: none;border: 1px solid #f0f0f0;box-shadow: 0px 6px 17px -16px #000;transition: all 0.2s;position: relative;top: -100%;filter: blur(10px);z-index: 2;}
.Popup:not(.Right).Show .Document{transition: all 0.2s;top:0%;filter: blur(0px);}
.Popup .Document>.Title{width:100%;display: flex;flex-direction: column;padding: 24px 24px 8px 24px;line-height: 22px;position: relative;}
.Popup .Document>.Title .Closed{position: absolute;right: 0;top: 0;cursor: pointer;padding: 24px 24px 0px 24px;}
.Popup .Document>.Title .Closed svg{height: 14px;}
.Popup .Document>.Title>span:nth-child(1){width:100%;font-weight: 600;font-size: 18px;margin-bottom: 14px;}
.Popup .Document .Center{width:100%;height: 100%;padding: 24px;overflow: auto;}


.Popup .Document .Center .ProjectList{width:100%;margin-top: 10px;display: flex;gap: 3px;padding-right: 10px;overflow: auto;}
.Popup .Document .Center .ProjectList .ProjectItem{width:100%;display: flex;background: #efefef;padding: 4px 12px;border-radius: 3px;border: 1px solid #ccc;cursor: pointer;flex-direction: column;}
.Popup .Document .Center .ProjectList .ProjectItem.Selected{background: #03a9f41a;border: 1px solid #03a9f496;}
.Popup .Document .Center .ProjectList .ProjectItem span:nth-child(1){width:100%;font-weight: 600;font-size: 13px;}
.Popup .Document .Center .ProjectList .ProjectItem span:nth-child(2){width:100%;font-size: 11px;}
.Popup .Document .Center .ProjectList::-webkit-scrollbar {
    width: 3px!important;
    height: 3px!important
}

.Popup .Document .Center .ProjectList::-webkit-scrollbar {
    width: 3px!important;
    height: 2px!important
}

.Popup .Document .Center .ProjectList::-webkit-scrollbar-thumb {
    background-color: #344685
}

.Popup .Document .Center .ProjectList::-webkit-scrollbar-track {
    background: rgba(255,255,255,.41)
}


.Popup .DaysTab{margin-left: auto;border: 2px solid #efefef;padding: 2px;border-radius: 2px;}
.Popup .DaysTab .TabItem{border-radius: 2px;padding: 2px 8px;font-weight: 600;font-size: 12px;cursor: pointer;}
.Popup .DaysTab .TabItem:hover{background: #efefefad;}
.Popup .DaysTab .TabItem.active{background: #2196f317;color: #1564a3;}

.Popup .Document .Center .Counter{width:100%}
.Popup .Document .Center .Counter .Proggress{width:100%;position: relative;}
.Popup .Document .Center .Counter .Proggress .Rate{width:100%;height: 18px;background: #ccc;border-radius: 4px;margin-top: 6px;overflow: hidden;}
.Popup .Document .Center .Counter .Proggress .Rate>span:nth-child(1){width: 0;display: block;position: absolute;height: 100%;background: #FF5722;border-radius: 4px;}
.Popup .Document .Center .Counter .Proggress .Rate>span:nth-child(2){display: block;position: absolute;color: #000;right: 8px;line-height: 18px;}


.Popup .Document .Center .TabList{width:100%;display: flex;justify-content: flex-start;align-items: center;margin-bottom: 5px;border-bottom: 2px solid #ebebeb;margin-top: 20px;}
.Popup .Document .Center .TabList>.TabItem{position: relative;border-bottom: 2px solid transparent;padding: 10px 9px 5px 9px;cursor: pointer;font-weight: 500;font-size: 12px;margin-bottom: -2px;}
.Popup .Document .Center .TabList>.TabItem.active{border-color: #3fa8fa;font-weight: 600;color: #3fa8fa;}
.Popup .Document .Center .TabView{width:100%;display: none;}
.Popup .Document .Center .TabView.Active{display: block;}
.Popup .Document .Center .TabView.active{display: block;}

.Popup .Document .Center .TabView .BlogList{width:100%;display: flex;flex-wrap: wrap;gap: 24px;}
.Popup .Document .Center .TabView .BlogList .BlogItem{width: calc(50% - 12px);border: 1px solid #e6e6e6;padding: 0px;border-radius: 3px;}
.Popup .Document .Center .TabView .BlogList .BlogItem .Image{width:100%;padding: 6px 12px;}
.Popup .Document .Center .TabView .BlogList .BlogItem:not(.Empty) .Image>img{width:100%}
.Popup .Document .Center .TabView .BlogList .BlogItem:not(.Empty) .Info{width:100%;display: flex;flex-direction: column;}
.Popup .Document .Center .TabView .BlogList .BlogItem:not(.Empty) .Info>.Title{width:100%;font-weight: 600;margin-bottom: 0px;margin-top: 0px;color: #2573bb;padding: 6px 12px;}
.Popup .Document .Center .TabView .BlogList .BlogItem:not(.Empty) .Info>.Desc{width:100%;max-height: 85px;overflow: hidden;padding: 6px 12px;margin-bottom: 5px;border: 1px dashed transparent;cursor: pointer;}
.Popup .Document .Center .TabView .BlogList .BlogItem:not(.Empty) .Info>.Desc:hover{background: #1aadef30;border-color: #1aadef;}

.Popup .Document .Center .TabView .SearchList{width:100%;display: flex;flex-wrap: wrap;gap: 24px;}
.Popup .Document .Center .TabView .SearchList .SearchItem{width: 100%;border: 1px solid #e6e6e6;padding: 8px;border-radius: 3px;}
.Popup .Document .Center .TabView .SearchList .SearchItem:not(.Empty) .Title{width:100%;font-weight: 600;margin-bottom: 0px;margin-top: 0px;color: #282828;padding: 6px 12px;border: 1px dashed transparent;cursor: pointer;}
.Popup .Document .Center .TabView .SearchList .SearchItem:not(.Empty) .Desc{width:100%;font-weight: 300;margin-bottom: 0px;margin-top: 0px;font-size: 11px;padding: 6px 12px;border: 1px dashed transparent;cursor: pointer;}
.Popup .Document .Center .TabView .SearchList .SearchItem:not(.Empty) .Url{width:100%;font-weight: 400;font-size: 11px;margin-bottom: 0px;margin-top: 0px;color: #2573bb;padding: 6px 12px;border: 1px dashed transparent;cursor: pointer;}
.Popup .Document .Center .TabView .SearchList .SearchItem:not(.Empty) .Title:hover{background: #1aadef30;border-color: #1aadef;}
.Popup .Document .Center .TabView .SearchList .SearchItem:not(.Empty) .Desc:hover{background: #1aadef30;border-color: #1aadef;}
.Popup .Document .Center .TabView .SearchList .SearchItem:not(.Empty) .Url:hover{background: #1aadef30;border-color: #1aadef;}

.Popup .Document .Footer{width:100%;display: flex;align-items: center;gap: 12px;padding: 12px 24px 24px 24px;justify-content: flex-end;padding-top: 28px;}
.Popup .Document .Footer>.Btn{border: 0;font-size: 14px;line-height: 28px;}

.Popup .Document .Footer{/* width:100%; *//* display: flex; *//* justify-content: flex-end; *//* align-items: center; */}
.Popup .Document .Footer>.Btn[T='Closed']{}
.Popup .Document .Footer>.Btn[T='AiCreate']{}
.Popup .Document .Footer>.Btn[T='AiCreateStop']{display:none}
.Popup .Document .Footer>.Btn[T='AiReply']{}
.Popup .Document .Footer>.Btn[T='AiErrorReply']{display:none}
.Popup .Document .Footer>.Btn[T='AiComplete']{display:none}
.Popup .Document .Footer[Q="Wait"]>.Btn[T='AiCreate']{display:block}
.Popup .Document .Footer[Q="Wait"]>.Btn[T='AiCreateStop']{display:none}
.Popup .Document .Footer[Q="Wait"]>.Btn[T='AiReply']{display:none}
.Popup .Document .Footer[Q="Wait"]>.Btn[T='AiErrorReply']{display:none}
.Popup .Document .Footer[Q="Wait"]>.Btn[T='AiComplete']{display:none}
.Popup .Document .Footer[Q="Query"]>.Btn[T='AiCreate']{display:none}
.Popup .Document .Footer[Q="Query"]>.Btn[T='AiCreateStop']{display:block}
.Popup .Document .Footer[Q="Query"]>.Btn[T='AiReply']{display:none}
.Popup .Document .Footer[Q="Query"]>.Btn[T='AiErrorReply']{display:none}
.Popup .Document .Footer[Q="Query"]>.Btn[T='AiComplete']{display:none}
.Popup .Document .Footer[Q="Error"]>.Btn[T='AiCreate']{display:none}
.Popup .Document .Footer[Q="Error"]>.Btn[T='AiCreateStop']{display:none}
.Popup .Document .Footer[Q="Error"]>.Btn[T='AiReply']{display:none;}
.Popup .Document .Footer[Q="Error"]>.Btn[T='AiErrorReply']{display:block}
.Popup .Document .Footer[Q="Error"]>.Btn[T='AiComplete']{display:none}
.Popup .Document .Footer[Q="Stop"]>.Btn[T='AiCreate']{display: none;}
.Popup .Document .Footer[Q="Stop"]>.Btn[T='AiCreateStop']{display:none}
.Popup .Document .Footer[Q="Stop"]>.Btn[T='AiReply']{display:block;}
.Popup .Document .Footer[Q="Stop"]>.Btn[T='AiErrorReply']{display:none}
.Popup .Document .Footer[Q="Stop"]>.Btn[T='AiComplete']{display:none}
.Popup .Document .Footer[Q="Complete"]>.Btn[T='AiCreate']{display:none}
.Popup .Document .Footer[Q="Complete"]>.Btn[T='AiCreateStop']{display:none}
.Popup .Document .Footer[Q="Complete"]>.Btn[T='AiReply']{display:block}
.Popup .Document .Footer[Q="Complete"]>.Btn[T='AiErrorReply']{display:none}
.Popup .Document .Footer[Q="Complete"]>.Btn[T='AiComplete']{display:block}


.Popup .Document .Center .ImportProduct{width:100%;padding: 24px;}
.Popup .Document .Center .ImportProduct .Title{width:100%;padding: 0;font-weight: 600;}
.Popup .Document .Center .ImportProduct .Info{width:100%;display: flex;flex-direction: column;align-items: flex-start;}
.Popup .Document .Center .ImportProduct .Info .Text{width:100%;}
.Popup .Document .Center .ImportProduct .Info .Rate{width:100%;margin-bottom: 16px;}
.Popup .Document .Center .ImportProduct .Progress{
   background: #ebebeb;
   position: relative;
   height: 10px;
   width: 100%;
   border-radius: 12px;
   overflow: hidden;
}
.Popup .Document .Center .ImportProduct .Progress>span{
   display: block;
   transition: all 0.3s ease 0s;
   background: rgb(3, 169, 244);
   height: 12px;
}


.Popup.Right{justify-content: flex-end;align-items: stretch;backdrop-filter: none;position: fixed;width: initial;left: initial;right: 0;border-left: 16px solid #f9fafc;}
.Popup.Right .Document{width: 600px;background: #fff;padding: 24px;border-radius: 0;flex: none;border: 1px solid #f0f0f0;box-shadow: 0px 6px 17px -16px #000;transition: all 0.2s;position: relative;right: -100%;filter: blur(10px);z-index: 2;}
.Popup.Right.Show .Document{transition: all 0.2s;right:0%;filter: blur(0px);display: flex;flex-direction: column;padding: 0;}
.Popup.Right .Overflow{display:none}

.Popup.productItemAiGenerate .Document{width: 770px;}
.Popup.productItemAiGenerate .Document .ColGroup{display:flex;height: 100%;}
.Popup.productItemAiGenerate .Document .ColGroup .Left{display:flex;width: 100%;padding-right: 14px;flex-direction: column;}
.Popup.productItemAiGenerate .Document .ColGroup .Right{display:flex;flex-direction: column;border-left: 1px solid #e9e9e9;padding-left: 16px;height: 100%;width: 340px;flex: none;}


.Popup.blogAiGenerate{display: none;}
.Popup.blogAiGenerate.Active{display: flex;}
.Popup.blogAiGenerate .Document{width: 770px;}


.Popup.productOzet .Document{width: 80%;}
.Popup.productOzet .Document .ColGroup{display:flex;height: 100%;}
.Popup.productOzet .Document .ColGroup .Left{display:flex;width: 100%;padding-right: 14px;flex-direction: column;border-left: 1px solid #e9e9e9;padding-left: 16px;}
.Popup.productOzet .Document .ColGroup .Left:first-child{border:0}
.Popup.productOzet .Document .ColGroup .Right{display:flex;flex-direction: column;border-left: 1px solid #e9e9e9;padding-left: 16px;height: 100%;width: 340px;flex: none;}
.Popup.productOzet .Document .Center .OrjinalContent>span:nth-child(1){font-size: 16px;}
.Popup.productOzet .Document .ColGroup .Left .ProductContentItem{border-bottom: 1px solid #dcdcdc;padding-bottom: 8px;margin-bottom: 7px;}
.Popup.productOzet .Document .ColGroup .Left .ProductContentItem>span{display: block;font-weight: 700;margin-bottom: 6px;}

.Popup.productOzet .Document .ColGroup .Left .ProductContentItem.Name>.Name{height: 34px;}
.Popup.productOzet .Document .ColGroup .Left .ProductContentItem.SeoUrl>.SeoUrl{height: 34px;}
.Popup.productOzet .Document .ColGroup .Left .ProductContentItem.SeoTitle>.SeoTitle{height: 34px;}
.Popup.productOzet .Document .ColGroup .Left .ProductContentItem.SeoDec>.SeoDec{height: 34px;}
.Popup.productOzet .Document .ColGroup .Left .ProductContentItem.Keywords>.Keywords{height: 120px;display: flex;gap: 4px;align-items: flex-start;}
.Popup.productOzet .Document .ColGroup .Left .ProductContentItem.Keywords>.Keywords>span{display: block;background: #efefef;padding: 2px 8px;border-radius: 4px;width: fit-content;}
.Popup.productOzet .Document .ColGroup .Left .ProductContentItem.Features{height: 280px;overflow: auto;padding-right: 10px;}


.Popup.Right .Document .Footer{margin-top: auto;border-top: 1px solid #e6e6e6;background: #f3f6f7;padding: 12px 18px;}
.Popup.Right.Show .SubContent{position: fixed;right: -100%;height: 100%;width: 360px;background: #d9e5e9;z-index: 1;transition: all 0.4s;display: flex;flex-direction: column;}
.Popup.Right.Show .SubContent .Loading{position: absolute;width: 40px;height: 40px;border-radius: 100px 0px 0px 100px;background: #d9e5e9;z-index: 1;left: 0px;top: 50%;display: none;}
.Popup.Right.Show .SubContent .Title{width:100%;display: flex;padding: 14px;flex-direction: column;}
.Popup.Right.Show .SubContent .Title>span:nth-child(1){width:100%;font-weight: 400;font-size: 16px;}
.Popup.Right.Show .SubContent .Title>span:nth-child(2){width:100%}
.Popup.Right.Show .SubContent .BtnList{width:100%;display: flex;gap: 14px;flex-direction: row-reverse;padding: 10px;margin-top: auto;}
.Popup.Right.Show .SubContent .Btn{width: calc( 100% - (150px));display: flex;flex-direction: column;margin-top: auto;line-height: 30px;background: linear-gradient(183deg, #b5e0ef, #8fcde3);font-weight: 500;}
.Popup.Right.Show .SubContent .Btn[T="AiNext"]{width: 130px;background: #fff;flex: none;}
.Popup.Right.Show .SubContent .Btn[T="AiGalleryCancel"]{width: 130px;background: #fff;flex: none;}
.Popup.Right.Show .SubContent .Btn:hover{background: #b5e0ef}
.Popup.Right.Show .SubContent .Btn.Disabled{background: #eaf0f1;color:#849297;pointer-events:none;}
.Popup.Right.Show .SubContent .Gallery{width:100%;display: block;flex-direction: row;overflow: auto;gap: 10px;padding: 16px;}
.Popup.Right.Show .SubContent .Gallery .GalleryItem{display: inline-block;width: calc(20% - 3px);height: 200px;position: relative;}
.Popup.Right.Show .SubContent .Gallery .GalleryItem.Selected::before{content:"";box-shadow: inset 0px 0px 0px 5px #FF5722;position: absolute;width: 100%;height: 100%;}
.Popup.Right.Show .SubContent .Gallery .GalleryItem>img{width:100%;height: 100%;}
.Popup.Right.Show .SubContent .Return{width:100%;display: flex;flex-direction: column;overflow: auto;}
.Popup.Right.Show .SubContent .Return>.Item{width:100%;padding: 9px 16px;border-bottom: 1px solid #aac3cb;cursor: pointer;}
.Popup.Right.Show .SubContent .Return>.Item:first-child{border-top: 1px solid #aac3cb;}
.Popup.Right.Show .SubContent .Return>.Item:hover{background: #fff;}
.Popup.Right.Show .SubContent .Return>.Item.Selected{background: #fff;}
.Popup.Right.Show .SubContent.Load .Loading{position: absolute;width: 40px;height: 40px;border-radius: 100px 0px 0px 100px;background: #d9e5e9;z-index: 1;left: -40px;top: 50%;display: block;}
.Popup.Right.Show .SubContent.Load .Loading:before{content:"";background: #fff0 url(/Library/Img/btnLoad_redblue.gif);background-size: 24px;width: 24px;height: 24px;position: absolute;left: 5px;top: 8px;display: block;z-index: 1;border-radius: 2px;}

.Popup.Right.Show .SubContent.Active{right: 770px;transition: all 0.4s;}
.Popup.Right.productItemAiGenerate .SubContent.Load{right: 414px;transition: all 0.4s;}


.Popup .Document .Center .OrjinalContent{width:100%;display: flex;flex-direction: column;}
.Popup .Document .Center .OrjinalContent>span:nth-child(1){width:100%;font-weight: 600;}
.Popup .Document .Center .OrjinalContent>span:nth-child(2){width:100%;font-size: 12px;}

.Popup .Document .Center .LogList{width:100%;display: flex;flex-direction: column;overflow: auto;}
.Popup .Document .Center .LogList .Item{width:100%;display: flex;flex-direction: column;background: #efefef;border-radius: 4px;padding: 12px;margin-bottom: 10px;cursor: pointer;}
.Popup .Document .Center .LogList .Item>.User{width:100%;display: flex;flex-direction: column;margin-bottom: 8px;}
.Popup .Document .Center .LogList .Item>.User>span:nth-child(1){width:100%;font-weight: 600;}
.Popup .Document .Center .LogList .Item>.User>span:nth-child(2){width:100%;font-size: 10px;}
.Popup .Document .Center .LogList .Item>.Text{width:100%;display: flex;flex-direction: column;font-weight: 400;}
.Popup .Document .Center .LogList .Item>.Content{width:100%;font-size: 11px;}
.Popup .Document .Center .LogList .Item:hover{background: #e4e4e4;}
.Popup .Document .Center .LogList .Item.Active{background: linear-gradient(45deg, #4CAF50, #aad9ac);color:#fff}

.Popup .Document .Center textarea,.Popup .Document .Center select,.Popup .Document .Center input{outline:none}
.Popup .Document .Center textarea::placeholder{font-size:12px;color:#3446859e}
.Popup .Document .Center textarea{font-size: 12px;color: inherit;padding: 12px;}
.form-control:focus{border:1px solid #344685;box-shadow:none;}
textarea,select,input{outline:none}



.Popup .Document .BtnView{display: flex;gap: 12px;margin-top: 8px;cursor: pointer;font-size: 12px;}
.Popup .Document .BtnView>i{display: block;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAB7ElEQVR4nO3WTYhOURgH8J93jMZHU5rdNGkUC7LBZhBRwoqFlSwoRVnayEJSokaNUtIo8pWFLGVnQ1nYjqSkfKRZqMH4JjM69UzdLu/r3ve970Lef52695zn/J/nPOc8H3TQQTmswnHcxWO8xyc8xX2MYBNmqxBd2ItnmC443uAw5rWqfC0eZYhf4Cy2YRl6Q8kSbMRJjGXkX2Nns8r341sQPY//WsG963AvY8ho2WsZwNvYfBrdTRxgFg7GISaxvCzBEHZpHckbGyrg6eA/wXysbiP/CvTXWxzEeGSxvjYonxPpO6Xu9fWE7kTs34o4rhLDwT3WKK8MZhLQ0QqV78YUvkd+aYjNIZiMOFKR8h/Bt6/IhlqU25k8fg0LmlDcHW6fCp6HRa61houx4TM+xPcr7ClYExLH9nhw03H6r/F9rpERXbgagh+jsViKBxlvpCg5gx3xXlLYzo3ilUr0iVzf8ARrsBVf/mbEoRCYzBWPJHysRDMyM87nPJY1InnzN/TgZjQhedyIjdczLdnLzP2OR/0fjtqf5m7/gWcLLoW3C2MgoiKNRbm1iVC2MDPXFyf9icUqwEgoSe9DAQMSrsT8qVaV9+JdkK0sYcBQpjlNV9s0enAAF+qs1zMg4XJ006kGtA0TDQzo4N/AL70bmChzgymIAAAAAElFTkSuQmCC);background-size: 14px;width: 14px;height: 18px;background-position: 50%;}
.Popup .Document .BtnView.Active>i{background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAC4ElEQVR4nO2Y32vPURjHX7NNC/ObFil3wxab/AGU4sLPC7mYH1vNDbnyIxeSwtWE/Cr5UdsKJYrSyG9S3Ci0UrJyqRjhAttMz3q+9ez0Mc9Z332/Ls6rTn07n/N+zvP5nOc85zlfSCQSiUQiwWxgE3ASuAu8A7qBXm3y+y1wBzgONACziv3dZgJ7gZdA/zDbC2APUFVIx2uAS/pl+/PUfgFtwJyRdHwacBboy3DgB3AL2AesAOYCk4BSoEx/y4uvAvZrKP3MsCMf5TQwOd/OrwU+Zkwo4dMEVA7D5gSgGejMsPsBWJkPx8t004UT3AeW5mMCoARYDjzOmOeIruKwqNSltgYlmzQyMpQAW4AvwZwdwJhYY+OBp4GhmwXKFjOA28Hcj4BxXgOjNZdbA2ecS1mq+0Uyyhvguzb53QqsAUY5Q/d84IMkiXLPC5wLhJJZPCwBXjtS5itgsTOkDgRayVBD0hAIWpzObwd6IvJ+j2o8HAu06/82UOL7c7BknrBpDCb4pLm+HhirrV77uoOxm53hZENabEzPGnjRDOrSw+dfVOshltPdA6YMMX6qjrEHYLVjHrH53uhkjw1iAfDbDJCN6OGa0TwDKhwaGfPc6K4651pnNFIN1NqHV8zDB06DVaaskBJgHn5qTC3VF5Ge7WF32ebd3AaUVVjoNNYcHDaxiCanF1seFgUF4MCL7zKdDyMcaDE6sRGLnfdwhM6uwg7peGI6YsqEVqPbGO8/G4y+PULXZHTyMgMnZS6OJUt4OWEMbYv3n61GLze5mLI+t3++ScdB4KueejHsNg5cIB7R5PRiK4ZD6nysz4OoCw4Xqe+9TAwOtTqKhL2MSEh5OWV0nRSR1UFpsDMy+/TrNbOotAcOXQfmZ4yT0/5GMLaN/4CKjJtbrp7q0NaV8Vw0ntKjIEjFeNT5V0uv3nVF899RoyFly3Kbqdoia6aiUa7V4jJttd7rYCKRSCQSiQSF4w/T2VWvRib4dQAAAABJRU5ErkJggg==) ;}
.Popup .Document  .Item{font-size: 12px;gap: 9px;display: flex;margin-top: 6px;align-items: center;}
.Popup .Document  .Item>i{background: #9b9b9b;width: 10px;height: 10px;border-radius: 100%;display: block;margin-right: 8px;}
.Popup .Document  .Item.Error{color: #f00;}
.Popup .Document  .Item.Success{color: #157a19;}


.Popup.Pricing .Document{width:100%;height: 100%;padding: 24px;}
.Popup.Pricing .Document{width:100%;/* overflow: auto; */}
.Popup.Pricing .Document .Center{width:100%;overflow: auto;padding-bottom: 110px;}
.Popup.Pricing .Document .Center::-webkit-scrollbar {
    width: 3px!important;
    height: 3px!important
}

.Popup.Pricing .Document .Center::-webkit-scrollbar {
    width: 3px!important;
    height: 2px!important
}

.Popup.Pricing .Document .Center::-webkit-scrollbar-thumb {
    background-color: #344685
}

.Popup.Pricing .Document .Center::-webkit-scrollbar-track {
    background: rgba(255,255,255,.41)
}

.Popup.Pricing .Document>.Title>span:nth-child(1){
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}
.Popup.Pricing .Document>.Title>span:nth-child(2){
    text-align: center;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.4px;
}
.Popup.Pricing .Document>.Title .Closed{
    right: 40px;
    background: #ccc;
    display: flex;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    flex: none;
    width: 50px;
    height: 50px;
    padding: 0;
}


.Popup.Pricing .Document .Center [XY="Plans"]{width:100%;display: flex;gap: 22px !important;!i;!;}
.Popup.Pricing .Document .Center [XY="Plans"] .PlanItem{width:100%;max-width: 340px;background: #fff;box-shadow: 0 1px 4px 0 rgba(0,0,0,.1),0 3px 20px 0 rgba(0,0,0,.05);border-radius: 6px;padding: 24px;}
.Popup.Pricing .Document .Center [XY="Plans"].Month .PlanItem{border: 2px solid #FF5722;}
.Popup.Pricing .Document .Center [XY="Plans"].Year .PlanItem{border: 2px solid #24ff00;}
.Popup.Pricing .Document .Center [XY="Plans"] .PlanItem .Title{width:100%;display: flex;flex-direction: column;align-content: center;align-items: center;}
.Popup.Pricing .Document .Center [XY="Plans"] .PlanItem .Title .Name{font-size: 22px;}
.Popup.Pricing .Document .Center [XY="Plans"] .PlanItem .Title .Text{text-align: center;font-size: 12px;}
.Popup.Pricing .Document .Center [XY="Plans"] .PlanItem .Title .OldPriceBox{width:100%;display: flex;justify-content: center;margin-top: 2px;font-size: 17px;font-weight: 300;margin-bottom: -20px;text-decoration: line-through;color: #888888;}
.Popup.Pricing .Document .Center [XY="Plans"] .PlanItem .Title .PriceBox{width:100%;display: flex;justify-content: center;margin-top: 14px;font-size: 22px;font-weight: bold;}

.Popup.Pricing .Document .Center [XY="Plans"] .PlanItem .Istatistic{width:100%;display: flex;flex-direction: row;gap: 4px;margin-top: 40px;justify-content: center;}
.Popup.Pricing .Document .Center [XY="Plans"] .PlanItem .Istatistic .Item{display: flex;flex-direction: column;gap: 4px;align-content: center;align-items: center;justify-content: center;padding: 0 14px;}
.Popup.Pricing .Document .Center [XY="Plans"] .PlanItem .Istatistic .Item .Limit{width: 100%;font-size: 14px;text-align: center;font-weight: 600;font-size: 18px;}
.Popup.Pricing .Document .Center [XY="Plans"] .PlanItem .Istatistic .Item .Text{font-size: 12px;text-align: center;}
.Popup.Pricing .Document .Center [XY="Plans"] .PlanItem .Istatistic .Item .Icon{display:flex;background: #2196f330;padding: 4px;border-radius: 20px;flex: none;width: 42px;height: 42px;align-items: center;justify-content: center;}



.Popup.Pricing .Document .Center [XY="Plans"] .PlanItem .List{width:100%;display: flex;flex-direction: column;gap: 4px;margin-bottom: 30px;margin-top: 30px;}
.Popup.Pricing .Document .Center [XY="Plans"] .PlanItem .List .Item{width:100%;display: flex;flex-direction: row-reverse;align-items: center;align-content: center;margin-top: 7px;}
.Popup.Pricing .Document .Center [XY="Plans"] .PlanItem .List .Item .Text{width: 100%;font-size: 12px;}
.Popup.Pricing .Document .Center [XY="Plans"] .PlanItem .List .Item .Icon{width: 20px;height: 20px;flex: none;background: #ffbebe;border-radius: 100%;display: flex;align-items: center;justify-content: center;}
.Popup.Pricing .Document .Center [XY="Plans"] .PlanItem .List .Item.success .Icon{background: #4caf5047;}
.Popup.Pricing .Document .Center [XY="Plans"] .PlanItem .Btn{width:100%;text-align: center;display: flex;justify-content: center;line-height: 34px;}
.Popup.Pricing .Document .Center [XY="Plans"] .PlanItem .List .Icon svg{display:none}
.Popup.Pricing .Document .Center [XY="Plans"] .PlanItem .List .Item .Icon svg.NONE{display:block}
.Popup.Pricing .Document .Center [XY="Plans"] .PlanItem .List .Item.success .Icon svg.NONE{display:none}
.Popup.Pricing .Document .Center [XY="Plans"] .PlanItem .List .Item.success .Icon svg.SUCCESS{display:block}
.Popup.Pricing .Document .Center [XY="Plans"] .PlanItem .List .Item .Icon svg.NONE path{fill:#f00}
.Popup.Pricing .Document .Center [XY="Plans"] .PlanItem .List .Item .Icon svg.SUCCESS path{fill:#4CAF50}




.OtherArea{
    width: 100%;
    padding: 16px;
 }
 .OtherArea .TabView{
    width: 100%;
    display: none;
 }
 .OtherArea .TabView.active{
    display: block;
 }

 .OtherArea .TabView .ViewArea{
    padding:40px 90px 120px;
 }
 
.OtherArea .TabView .ViewArea>.Btn {
    width: 100%;
    border: 1px solid #000;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
 }
 
 .OtherArea .TabView .ViewArea .Btn.Hide {
    display: none
 }
 
 .OtherArea .TabView .ViewArea>.Btn>span {
    font-size: 16px;
    display: flex;
    align-items: center;
 }
 
 .OtherArea .TabView .ViewArea>.Btn>i {
    width: 30px;
    height: 30px;
    background: #000;
    color: #fff;
    border-radius: 20px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
 }
 
 .OtherArea .TabView .ViewArea .FilterArea {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 40px;
    flex-wrap: wrap;
 }
 
 .OtherArea .TabView .ViewArea .FilterArea>span:nth-child(1) {
    width: 100%
 }
 
 .OtherArea .TabView .ViewArea .FilterArea>span:nth-child(2) {
    width: 100%;
    display: flex;
    gap: 10px;
 }
 
 .OtherArea .TabView .ViewArea .FilterArea>span>input {
    width: 100%;
    border: 1px solid #000;
    border-radius: 2px;
    padding: 10px;
    outline: none;
 }
 
 .OtherArea .TabView .ViewArea .FilterArea>span>select {
    border: 1px solid #000;
    padding: 8px;
    border-radius: 2px;
    outline: none;
    font-size: 14px;
    height: 43px;
 }
 
 .OtherArea .TabView .ViewArea .Result {
    width: 100%;
    gap: 0;
    display: flex;
    flex-direction: column;
 }
 
 .OtherArea .TabView .ViewArea .Result>div {
    width: 100%;
    display: flex;
    flex-direction: column;
   margin-bottom:14px;
 }
 
 .OtherArea .TabView .ViewArea .Result>div>.Info {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 15px;
 }
 
 .OtherArea .TabView .ViewArea .Result>div>.Info>.Timer {
    cursor: pointer;
    background: #000;
    color: #fff;
    border-radius: 4px;
    text-align: center;
    width: 80px;
    flex: none;
    font-size: 13px;
    font-family: sans-serif;
 }
 
 .OtherArea .TabView .ViewArea .Result>div>.Info>.Info {
    width: 100%
 }
 
 .OtherArea .TabView .ViewArea .Result>div>.Info>.Info>.Head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 5px;
 }
 
 .OtherArea .TabView .ViewArea .Result>div>.Info>.Info>.Head .LessonName {
    font-size: 14px;
    font-weight: 700;
 }
 
 .OtherArea .TabView .ViewArea .Result>div>.Info>.Info>.Head .UnitName {
    flex: 1;
    font-size:13px
 }
 
 .OtherArea .TabView .ViewArea .Result>div>.Info>.Info>.Head>.BtnList {
    display: flex;
    gap: 2px;
    align-items: center;
   margin-bottom:5px
 }
 
 .OtherArea .TabView .ViewArea .Result>div>.Info>.Info>.Head>.BtnList>.Btn {
    width: 100%;
    margin-left: 10px;
    cursor: pointer;
 }
 
 .OtherArea .TabView .ViewArea .Result>div>.Info>.Info>.Note {
    width: 100%;
    background: #ececf55c;
    padding: 22px 14px;
    border-radius: 4px;
    text-align: left;
    font-size: 14px;
 }
 
 .OtherArea .TabView .ViewArea .newNote {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
    flex-direction: row;
    align-items: flex-start;
    display: none;
 }
 
 .OtherArea .TabView .ViewArea .newNote.Active {
    display: flex
 }
 
 .OtherArea .TabView .ViewArea .newNote>.Timer {
    width: 80px;
    background: #000;
    color: #fff;
    padding: 4px;
    border-radius: 6px;
    margin-right: 10px;
    text-align: center;
    font-family: sans-serif;
    font-size: 13px;
 }
 
 .OtherArea .TabView .ViewArea .newNote>.Input {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
 }
 
 .OtherArea .TabView .ViewArea .newNote>.Input>input {
    width: 100%;
    border: 1px solid #000;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    outline: none;
 }
 
 .OtherArea .TabView .ViewArea .newNote>.Input>.BtnList {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
    width: 100%;
    flex-direction: row;
 }
 
 .OtherArea .TabView .ViewArea .newNote>.Input>.BtnList>.Btn.Cnacel {
    color: #000;
    text-align: center;
    padding: 4px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
 }
 
 .OtherArea .TabView .ViewArea .newNote>.Input>.BtnList>.Btn.AddNote {
    width: max-content;
    border: 1px solid #000;
    padding: 10px;
    background: #000;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
 }
 
.OtherArea .InputItem{display: flex;justify-content: flex-start;flex-direction: column;align-items: flex-start;min-width: 220px;width: min-content;}
.OtherArea .InputItem span{height:24px;font-size: 12px;font-weight:bold;display: block;}
.OtherArea input{height:43px;font-size:13px;border: 1px solid #000;border-radius: 0;padding: 8px;outline: none;color: #000;width: 100%;}
.OtherArea select{height:43px;font-size:13px;border: 1px solid #000;border-radius: 0;padding: 8px;color: #000;width: 100%;}

.OtherArea .TabView .EditorBtnList {
    display: flex
;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
    width: 100%;
    flex-direction: row;
    margin-top: 14px;
}
.OtherArea .TabView .EditorBtnList>.Btn.EditNote {
    width: max-content;
    border: 1px solid #000;
    padding: 10px;
    background: #000;
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
}
.OtherArea  .TabView .ViewArea>.Result {
   width: 100%;
   gap: 0;
   display: flex;
   flex-direction: column;
}

.OtherArea  .TabView .ViewArea>.Result>div {
   width: 100%;
   display: flex;
   flex-direction: column;
  margin-bottom:14px;
}

.OtherArea  .TabView .ViewArea>.Result>div>.Info {
   width: 100%;
   display: flex;
   align-items: flex-start;
   gap: 15px;
}

.OtherArea  .TabView .ViewArea>.Result>div>.Info>.Timer {
   cursor: pointer;
   background: #000;
   color: #fff;
   border-radius: 4px;
   text-align: center;
   width: 80px;
   flex: none;
   font-size: 13px;
   font-family: sans-serif;
}

.OtherArea  .TabView .ViewArea>.Result>div>.Info>.Info {
   width: 100%
}

.OtherArea  .TabView .ViewArea>.Result>div>.Info>.Info>.Head {
   width: 100%;
   display: flex;
   justify-content: space-between;
   gap: 10px;
   align-items: flex-end;
   margin-bottom: 5px;
}

.OtherArea  .TabView .ViewArea>.Result>div>.Info>.Info>.Head .LessonName {
   font-size: 14px;
   font-weight: 700;
}

.OtherArea  .TabView .ViewArea>.Result>div>.Info>.Info>.Head .UnitName {
   flex: 1;
   font-size:13px
}

.OtherArea  .TabView .ViewArea>.Result>div>.Info>.Info>.Head>.BtnList {
   display: flex;
   gap: 2px;
   align-items: center;
  margin-bottom:5px
}

.OtherArea  .TabView .ViewArea>.Result>div>.Info>.Info>.Head>.BtnList>.Btn {
   width: 100%;
   margin-left: 4px;
   cursor: pointer;
   padding: 0px 4px;
   border-radius: 4px;
}
.OtherArea  .TabView .ViewArea>.Result>div>.Info>.Info>.Head>.BtnList>.Btn:hover{
   background: #efefef;
}

.OtherArea  .TabView .ViewArea>.Result>div>.Info>.Info>.Note {
   width: 100%;
   background: #ececf55c;
   padding: 22px 14px;
   border-radius: 4px;
   text-align: left;
   font-size: 14px;
}

.OtherArea  .TabView .ViewArea>.newNote {
   width: 100%;
   display: flex;
   justify-content: flex-start;
   margin-bottom: 20px;
   flex-direction: row;
   align-items: flex-start;
   display: none;
}

.OtherArea  .TabView .ViewArea>.newNote.Active {
   display: flex
}

.OtherArea  .TabView .ViewArea>.newNote>.Timer {
   width: 80px;
   background: #000;
   color: #fff;
   padding: 4px;
   border-radius: 6px;
   margin-right: 10px;
   text-align: center;
   font-family: sans-serif;
   font-size: 13px;
}

.OtherArea  .TabView .ViewArea>.newNote>.Input {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
}

.OtherArea  .TabView .ViewArea>.newNote>.Input>input {
   width: 100%;
   border: 1px solid #000;
   padding: 10px;
   display: flex;
   justify-content: space-between;
   margin-bottom: 20px;
   outline: none;
}

.OtherArea  .TabView .ViewArea>.newNote>.Input>.BtnList {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
   align-items: center;
   width: 100%;
   flex-direction: row;
}

.OtherArea  .TabView .ViewArea>.newNote>.Input>.BtnList>.Btn.Cnacel {
   color: #000;
   text-align: center;
   padding: 4px;
   border-radius: 5px;
   font-size: 15px;
   font-weight: 500;
   cursor: pointer;
}

.OtherArea  .TabView .ViewArea>.newNote>.Input>.BtnList>.Btn.AddNote {
   width: max-content;
   border: 1px solid #000;
   padding: 10px;
   background: #000;
   color: #fff;
   border-radius: 3px;
   cursor: pointer;
   font-size: 14px;
}




.OtherArea  .TabView .ViewArea>.Result>.Title {
    width: 100%;
    font-size: 19px;
    font-weight: 500;
    align-items: center;
    gap: 8px;
    display: flex;
    flex-direction: row;
 }
 
 .OtherArea  .TabView .ViewArea>.Result>.Title>span:nth-child(1) {
    font-weight: 600;
 }
 
 .OtherArea  .TabView .ViewArea>.Result>.Title>span:nth-child(2) {
    font-weight: 300;
    font-size: 14px;
    font-family: sans-serif;
 }
 
 .OtherArea  .TabView .ViewArea>.Result>.List {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
 }
 
 .OtherArea  .TabView .ViewArea>.Result>.List>.Item {
    width: 100%;
    padding: 10px 6px;
    border-radius: 6px;
    cursor: pointer;
 }
 .OtherArea  .TabView .ViewArea>.Result>.List>.Item:hover {
    background:#f9f9ff
 }
 
 .OtherArea  .TabView .ViewArea>.Result>.List>.Item>.Detail {
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: flex-start;
 }
 
 .OtherArea  .TabView .ViewArea>.Result>.List>.Item>.Detail>.Photo {
 
 }
 .OtherArea  .TabView .ViewArea>.Result>.List>.Item>.Detail>.Photo .nonProfilPhoto{width: 40px !important;height: 40px !important;border-radius: 100% !important;background: #000 !important;color: #fff !important;}
 .OtherArea  .TabView .ViewArea>.Result>.List>.Item>.Detail>.Info {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
 }
 
 .OtherArea  .TabView .ViewArea>.Result>.List>.Item>.Detail>.Info>.Question {
    width: 95%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 20px;
    text-align: left;
 }
 
 .OtherArea  .TabView .ViewArea>.Result>.List>.Item>.Detail>.Info>.Question>span:nth-child(1) {
    width: 100%;
    font-weight: 600;
    margin-bottom: 2px;
    font-size: 15px;
    line-height: 14px;
 }

 
 .OtherArea  .TabView .ViewArea>.Result>.List>.Item>.Detail>.Info>.Customer {
    width: 100%;
    display: flex;
    gap: 10px;
 }
 
 .OtherArea  .TabView .ViewArea>.Result>.List>.Item>.Detail>.Info>.Customer .Name {
    font-size: 13px;
    color: #1b6fb1;
 }
 
 .OtherArea  .TabView .ViewArea>.Result>.List>.Item>.Detail>.Info>.Customer .Time {
    font-size: 12px;
    color: #606060;
 }
 
 .OtherArea  .TabView .ViewArea>.Result>.List>.Item>.Detail>.IconBar {
    width: 50px;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
 }
 
 .OtherArea  .TabView .ViewArea>.Result>.List>.Item>.Detail>.IconBar>.Rate {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    cursor: pointer;
 }
 
 .OtherArea  .TabView .ViewArea>.Result>.List>.Item>.Detail>.IconBar>.Rate>span:nth-child(1) {
    font-size: 14px;
    line-height: 16px;
    font-family: sans-serif;
 }
 
 .OtherArea  .TabView .ViewArea>.Result>.List>.Item>.Detail>.IconBar>.Rate>span:nth-child(2) {
    font-size: 16px;
    width: 26px;
    text-align: center;
    color:  #444;
 }
 .OtherArea  .TabView .ViewArea>.Result>.List>.Item>.Detail>.IconBar>.Rate>span:nth-child(2):hover{
    color:  #000;
 }
 
 .OtherArea  .TabView .ViewArea>.Result>.List>.Item>.Detail>.IconBar>.Comment {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
 }
 
 .OtherArea  .TabView .ViewArea>.Result>.List>.Item>.Detail>.IconBar>.Comment {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    gap: 5px;
 }
 
 .OtherArea  .TabView .ViewArea>.Result>.List>.Item>.Detail>.IconBar>.Comment>span:nth-child(1) {
    font-size: 14px;
    font-family: sans-serif;
    line-height: 16px;
 }
 
 .OtherArea  .TabView .ViewArea>.Result>.List>.Item>.Detail>.IconBar>.Comment>span:nth-child(2) {
    width: 26px;
    font-size: 16px;
    text-align: center;
    color: #444;
 }
 .OtherArea  .TabView .ViewArea>.Result>.List>.Item>.Detail>.IconBar>.Comment>span:nth-child(2):hover{
    color:  #000;
 }


.OtherArea .TabView .ViewArea .Result>.List {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.OtherArea .TabView .ViewArea .Result>.List>.Item {
   width: 100%;
   padding: 10px 6px;
   border-radius: 6px;
   cursor: pointer;
}
.OtherArea .TabView .ViewArea .Result>.List>.Item:hover {
   background:#f9f9ff
}

.OtherArea .TabView .ViewArea .Result>.List>.Item>.Detail {
   width: 100%;
   display: flex;
   gap: 10px;
   align-items: flex-start;
}

.OtherArea .TabView .ViewArea .Result>.List>.Item>.Detail>.Photo {

}
.OtherArea .TabView .ViewArea .Result>.List>.Item>.Detail>.Photo .nonProfilPhoto{width: 40px !important;height: 40px !important;border-radius: 100% !important;background: #000 !important;color: #fff !important;}
.OtherArea .TabView .ViewArea .Result>.List>.Item>.Detail>.Info {
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
}

.OtherArea .TabView .ViewArea .Result>.List>.Item>.Detail>.Info>.Question {
   width: 95%;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   margin-bottom: 20px;
   text-align: left;
}

.OtherArea .TabView .ViewArea .Result>.List>.Item>.Detail>.Info>.Question>span:nth-child(1) {
   width: 100%;
   font-weight: 600;
   margin-bottom: 2px;
   font-size: 15px;
   line-height: 14px;
}

.OtherArea .TabView .ViewArea .Result>.List>.Item>.Detail>.Info>.Question>span:nth-child(2) {
   width: 100%;
   font-size: 14px;
}

.OtherArea .TabView .ViewArea .Result>.List>.Item>.Detail>.Info>.Customer {
   width: 100%;
   display: flex;
   gap: 10px;
}

.OtherArea .TabView .ViewArea .Result>.List>.Item>.Detail>.Info>.Customer .Name {
   font-size: 13px;
   color: #1b6fb1;
}

.OtherArea .TabView .ViewArea .Result>.List>.Item>.Detail>.Info>.Customer .Time {
   font-size: 12px;
   color: #606060;
}

.OtherArea .TabView .ViewArea .Result>.List>.Item>.Detail>.IconBar {
   width: 50px;
   flex: none;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.OtherArea .TabView .ViewArea .Result>.List>.Item>.Detail>.IconBar>.Rate {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 5px;
   cursor: pointer;
}

.OtherArea .TabView .ViewArea .Result>.List>.Item>.Detail>.IconBar>.Rate>span:nth-child(1) {
   font-size: 14px;
   line-height: 16px;
   font-family: sans-serif;
}

.OtherArea .TabView .ViewArea .Result>.List>.Item>.Detail>.IconBar>.Rate>span:nth-child(2) {
   font-size: 16px;
   width: 26px;
   text-align: center;
   color:  #444;
}
.OtherArea .TabView .ViewArea .Result>.List>.Item>.Detail>.IconBar>.Rate>span:nth-child(2):hover{
   color:  #000;
}

.OtherArea .TabView .ViewArea .Result>.List>.Item>.Detail>.IconBar>.Comment {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 5px;
}

.OtherArea .TabView .ViewArea .Result>.List>.Item>.Detail>.IconBar>.Comment {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   cursor: pointer;
   gap: 5px;
}

.OtherArea .TabView .ViewArea .Result>.List>.Item>.Detail>.IconBar>.Comment>span:nth-child(1) {
   font-size: 14px;
   font-family: sans-serif;
   line-height: 16px;
}

.OtherArea .TabView .ViewArea .Result>.List>.Item>.Detail>.IconBar>.Comment>span:nth-child(2) {
   width: 26px;
   font-size: 16px;
   text-align: center;
   color: #444;
}
.OtherArea .TabView .ViewArea .Result>.List>.Item>.Detail>.IconBar>.Comment>span:nth-child(2):hover{
   color:  #000;
}
.OtherArea .TabView .ViewArea .Result>.Btn {
   width: 100%;
   border: 1px solid #ccc;
   padding: 10px;
   text-align: center;
   border-radius: 4px;
   margin-top: 40px;
   cursor: pointer;
   display: none;
}

.OtherArea .TabView .ViewArea .Result>.Btn.Text {
   border: 0;
   padding: 0;
   text-align: left;
   border-radius: 4px;
   margin-top: 20px;
   width: inherit;
   font-weight: 600;
   cursor: pointer;
   display: block;
   font-size: 14px;
}


.OtherArea .TabView .ViewArea .NewQuest {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   display: none;
}

.OtherArea .TabView .ViewArea .NewQuest.Show {
   display: flex;
}

.OtherArea .TabView .ViewArea .NewQuest>.Btn {
   border: 1px solid #000;
   padding: 6px 16px;
   border-radius: 2px;
   cursor: pointer;
   font-weight: 500;
   margin-bottom: 35px;
   background: #000;
   color: #fff;
   font-size: 12px;
}

.OtherArea .TabView .ViewArea .NewQuest>.Btn.Back {
   margin-bottom: 35px;
   background: transparent;
   color: #000;
}

.OtherArea .TabView .ViewArea .NewQuest>.FormElement {
   width: 100%;
   display: flex;
   flex-direction: column;
   margin-bottom: 20px;
}

.OtherArea .TabView .ViewArea .NewQuest>.FormElement>span {
   width: 100%;
   margin-bottom: 4px;
   font-weight: 500;
   font-size: 14px;
   text-align: left;
   font-weight: 600;
}




.QuestionAnswer{display:none}
.QuestionAnswer.Show{display: flex;flex-direction: column;align-items: flex-start;}
.QuestionAnswer .Btn{
    border: 1px solid #000;
    padding: 6px 16px;
    border-radius: 2px;
    cursor: pointer;
    font-weight: 500;
    margin-bottom: 35px;
    background: #000;
    color: #fff;
    font-size: 12px;
}
.QuestionAnswer .Btn.Back{margin-bottom: 35px;background: transparent;color: #000;}

.QuestionAnswer .QuestionArea{width:100%;display: flex;flex-direction: column;align-items: flex-start;background: #ff57221c;border-radius: 9px;margin-bottom: 12px;}
.QuestionAnswer .AnswerCounter{width:100%;text-align: left;font-size: 14px;font-weight: 700;margin-bottom: 36px;}
.QuestionAnswer .AnswerCounter>span:nth-child(1){width:100%}
.QuestionAnswer .AnswerCounter>span:nth-child(2){width:100%}
.QuestionAnswer .AnswerList{width:100%;display: flex;flex-direction: column;align-items: flex-start;padding: 0 30px;padding-right: 0;}
.QuestionAnswer .FormElement{width:100%;display: flex;gap: 10px;}
.QuestionAnswer .FormElement .ProfilPhoto{width: Ä°;}
.QuestionAnswer .FormElement>input{width:100%}
.QuestionAnswer .AnswerForm{width:100%;display: none;flex-direction: column;align-items: flex-end;}
.QuestionAnswer .AnswerForm.Show{display:flex}
.QuestionAnswer .AnswerForm>.FormElement{width:100%;display: flex;flex-direction: column;align-items: flex-start;text-align: left;}
.QuestionAnswer .AnswerForm>.FormElement>span{width:100%;font-size: 14px;font-weight: 600;}
.QuestionAnswer .AnswerForm>.FormElement>textarea{width:100%;outline: none;border: 1px solid #000;border-radius: 0;resize: none;font-size: 14px;color: #000;min-height: 78px;padding: 12px;}
.QuestionAnswer .AnswerForm>.Btn{margin-top: 20px;}


.QuestionAnswer .QuestionArea>.Item {
   width: 100%;
   padding: 14px 0px;
   border-radius: 6px;
}

.QuestionAnswer .QuestionArea>.Item>.Detail {
   width: 100%;
   display: flex;
   gap: 10px;
   align-items: flex-start;
   padding: 0 14px;
}


.QuestionAnswer .nonProfilPhoto{width: 40px !important;height: 40px !important;border-radius: 100% !important;background: #000 !important;color: #fff !important;}
.QuestionAnswer .QuestionArea>.Item>.Detail>.Info {
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
}

.QuestionAnswer .QuestionArea>.Item>.Detail>.Info>.Question {
   width: 95%;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   margin-bottom: 4px;
   text-align: left;
}

.QuestionAnswer .QuestionArea>.Item>.Detail>.Info>.Question>span:nth-child(1) {
   width: 100%;
   font-weight: 600;
   margin-bottom: 2px;
   font-size: 12px;
   line-height: 14px;
}

.QuestionAnswer .QuestionArea>.Item>.Detail>.Info>.Question>span:nth-child(3) {
   width: 100%;
   font-size: 13px;
   line-height: 18px;
}

.QuestionAnswer .QuestionArea>.Item>.Detail .Customer {
   width: 100%;
   display: flex;
   gap: 10px;
   margin-bottom: 15px;
}

.QuestionAnswer .QuestionArea>.Item>.Detail .Customer .Name {
   font-size: 13px;
   color: #1b6fb1;
}

.QuestionAnswer .QuestionArea>.Item>.Detail .Customer .Time {
   font-size: 12px;
   color: #606060;
}

.QuestionAnswer .QuestionArea>.Item>.Detail>.IconBar {
   width: 50px;
   flex: none;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.QuestionAnswer .QuestionArea>.Item>.Detail>.IconBar>.Rate {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 5px;
   cursor: pointer;
}

.QuestionAnswer .QuestionArea>.Item>.Detail>.IconBar>.Rate>span:nth-child(1) {
   font-size: 14px;
   line-height: 16px;
   font-family: sans-serif;
}

.QuestionAnswer .QuestionArea>.Item>.Detail>.IconBar>.Rate>span:nth-child(2) {
   font-size: 16px;
   width: 26px;
   text-align: center;
   color:  #444;
}
.QuestionAnswer .QuestionArea>.Item>.Detail>.IconBar>.Rate>span:nth-child(2):hover{
   color:  #000;
}

.QuestionAnswer .QuestionArea>.Item>.Detail>.IconBar>.Comment {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 5px;
}

.QuestionAnswer .QuestionArea>.Item>.Detail>.IconBar>.Comment {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   cursor: pointer;
   gap: 5px;
}

.QuestionAnswer .QuestionArea>.Item>.Detail>.IconBar>.Comment>span:nth-child(1) {
   font-size: 14px;
   font-family: sans-serif;
   line-height: 16px;
}

.QuestionAnswer .QuestionArea>.Item>.Detail>.IconBar>.Comment>span:nth-child(2) {
   width: 26px;
   font-size: 16px;
   text-align: center;
   color: #444;
}
.QuestionAnswer .QuestionArea>.Item>.Detail>.IconBar>.Comment>span:nth-child(2):hover{
   color:  #000;
}






.QuestionAnswer .AnswerList>.Item {
   width: 100%;
   padding: 10px 8px;
   border-radius: 6px !important;
   background: #ffffff;
   border-bottom: 1px solid #efefef;
   border-radius: 0;
}
.QuestionAnswer .AnswerList>.Item:last-child {
   border-bottom: 0;
   margin-bottom:24px
}

.QuestionAnswer .AnswerList>.Item>.Detail {
   width: 100%;
   display: flex;
   gap: 10px;
   align-items: flex-start;
}


.QuestionAnswer .nonProfilPhoto{width: 40px !important;height: 40px !important;border-radius: 100% !important;background: #000 !important;color: #fff !important;}
.QuestionAnswer .AnswerList>.Item>.Detail>.Info {
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
}

.QuestionAnswer .AnswerList>.Item>.Detail>.Info>.Question {
   width: 95%;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   margin-bottom: 0px;
   text-align: left;
}

.QuestionAnswer .AnswerList>.Item>.Detail>.Info>.Question>span:nth-child(1) {
   width: 100%;
   margin-bottom: 2px;
   font-size: 14px;
   line-height: 19px;
}

.QuestionAnswer .AnswerList>.Item>.Detail>.Info>.Question>span:nth-child(3) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 100%;
   height: 22px;
   font-size: 14px;
}

.QuestionAnswer .AnswerList>.Item>.Detail .Customer {
   width: 100%;
   display: flex;
   gap: 0px;
   margin-bottom: 10px;
   flex-direction: column;
   align-items: flex-start;
}

.QuestionAnswer .AnswerList>.Item>.Detail .Customer .Name {
   font-size: 13px;
   color: #1b6fb1;
}

.QuestionAnswer .AnswerList>.Item>.Detail .Customer .Time {
   font-size: 12px;
   color: #606060;
}

.QuestionAnswer .AnswerList>.Item>.Detail>.IconBar {
   width: 50px;
   flex: none;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.QuestionAnswer .AnswerList>.Item>.Detail>.IconBar>.Rate {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 5px;
   cursor: pointer;
}

.QuestionAnswer .AnswerList>.Item>.Detail>.IconBar>.Rate>span:nth-child(1) {
   font-size: 14px;
   line-height: 16px;
   font-family: sans-serif;
}

.QuestionAnswer .AnswerList>.Item>.Detail>.IconBar>.Rate>span:nth-child(2) {
   font-size: 16px;
   width: 26px;
   text-align: center;
   color:  #444;
}
.QuestionAnswer .AnswerList>.Item>.Detail>.IconBar>.Rate>span:nth-child(2):hover{
   color:  #000;
}

.QuestionAnswer .AnswerList>.Item>.Detail>.IconBar>.Comment {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 5px;
}


.QuestionAnswer .AnswerList>.Item>.Detail>.IconBar>.Comment {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   cursor: pointer;
   gap: 5px;
}

.QuestionAnswer .AnswerList>.Item>.Detail>.IconBar>.Comment>span:nth-child(1) {
   font-size: 14px;
   font-family: sans-serif;
   line-height: 16px;
}

.QuestionAnswer .AnswerList>.Item>.Detail>.IconBar>.Comment>span:nth-child(2) {
   width: 26px;
   font-size: 16px;
   text-align: center;
   color: #444;
}
.QuestionAnswer .AnswerList>.Item>.Detail>.IconBar>.Comment>span:nth-child(2):hover{
   color:  #000;
}

div:where(.swal2-container){z-index: 99999999999999999 !important}

.OtherArea .TabView .NewQuest>.FormElement>textarea {
    width: 100%;
    padding: 10px;
    border-radius: 2px;
    border: 1px solid #000;
    outline: none;
    min-height: 120px;
    resize: none;
}



.OtherArea .TabView .CommentIstatistic {
   width: 100%;
   display: flex;
   margin-bottom: 16px;
}

.OtherArea .TabView .CommentIstatistic>.Rate {
   width: 160px;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.OtherArea .TabView .CommentIstatistic>.Rate>.Point {
   width: 100%;
   font-size: 53px;
   font-weight: 900;
   color: #ff9800;
   text-align: center;
   line-height: 55px;
   font-family: sans-serif;
}

.OtherArea .TabView .CommentIstatistic>.Rate>.Start {
   width: 100%;
   display: flex;
   justify-content: center;
   gap: 4px;
   color: #ccc;
}

.OtherArea .TabView .CommentIstatistic>.Rate>.Start>span {
   font-size: 12px;
}
.OtherArea .TabView .CommentIstatistic>.Rate>.Start>span.Active {
   color: #ff9800;
}

.OtherArea .TabView .CommentIstatistic>.Rate>span {
   width: 100%;
   text-align: center;
   color: #ff9800;
   font-weight: 600;
   margin-top: 5px;
}

.OtherArea .TabView .CommentIstatistic>.Chart {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.OtherArea .TabView .CommentIstatistic>.Chart>.Item {
   width: 100%;
   display: flex;
   gap: 10px;
   align-items: center;
}

.OtherArea .TabView .CommentIstatistic>.Chart>.Item>.progress {
   width: 100%;
   position: relative;
   height: 10px;
}

.OtherArea .TabView .CommentIstatistic>.Chart>.Item>.progress>span {
   background: #FFC107;
   position: absolute;
   left: 0;
   top: 0;
   height: 10px;
   border-radius: 4px;
}

.OtherArea .TabView .CommentIstatistic>.Chart>.Item>.Starts {
   display: flex;
   justify-content: flex-start;
}

.OtherArea .TabView .CommentIstatistic>.Chart>.Item>.Starts>span {
   font-size: 14px;
   color: #ccc;
}
.OtherArea .TabView .CommentIstatistic>.Chart>.Item>.Starts>span.Active {
   color: #FF9800;
}

.OtherArea .TabView .CommentIstatistic>.Chart>.Item>.Rate {
   font-size: 11px;
   font-weight: 500;
   font-family: sans-serif;
   width: 55px;
   text-align: right;
   height: 15px;
}



.OtherArea .TabView[T="5"] .Result>.Item {
   width: 100%;
   display: flex;
   flex-direction: row;
   gap: 10px;
   padding: 14px 0px;
   border-bottom: 2px solid #eeeef7;
}
.OtherArea .TabView[T="5"] .Result>.Item:last-child {border:0}

.OtherArea .TabView[T="5"] .Result>.Item>.Photo {
   width: 30px;
   height: 30px;
   line-height: 30px;
   border-radius: 100px;
   color: #fff;
   text-align: center;
   font-weight: bold;
   font-size: 13px;
   margin-right: 20px;
}
.OtherArea .TabView[T="5"] .Result .Item .Photo .nonProfilPhoto{width: 40px !important;height: 40px !important;border-radius: 100% !important;background: #000 !important;color: #fff !important;}

.OtherArea .TabView[T="5"] .Result>.Item>.Info {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 5px;
}

.OtherArea .TabView[T="5"] .Result>.Item>.Info>.User {
   width: 100%;
   display: flex;
   flex-direction: column;
}

.OtherArea .TabView[T="5"] .Result>.Item>.Info>.User>.Name {
   width: 100%;
   font-weight: 700;
   text-align: left;
}

.OtherArea .TabView[T="5"] .Result>.Item>.Info>.User>.Starts {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   text-align: left;
}

.OtherArea .TabView[T="5"] .Result>.Item>.Info>.User>.Starts>span {
   font-size: 15px;
   color: #ccc;
}
.OtherArea .TabView[T="5"] .Result>.Item>.Info>.User>.Starts>span.Active {
   font-size: 15px;
   color: #FF9800;
}

.OtherArea .TabView[T="5"] .Result>.Item>.Info>.User>.Starts>.Time {
   width: 100%;
   margin-left: 20px;
   font-size: 12px;
}

.OtherArea .TabView[T="5"] .Result>.Item>.Info>.Comment {
   width: 100%;
   display: flex;
   flex-direction: column;
   text-align: left;
}

.OtherArea .TabView[T="5"] .Result>.Item>.Info>.Comment>span {
   width: 100%;
   font-size: 13px;
   margin-bottom: 4px;
}

.OtherArea .TabView[T="5"] .Result>.Item>.Info>.Comment>span:nth-child(2) {
   width: 100%;
   font-size: 12px;
}

.OtherArea .TabView[T="5"] .Result>.Item>.Info>.Comment>.Like {
   width: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
   gap: 5px;
}

.OtherArea .TabView[T="5"] .Result>.Item>.Info>.Comment>.Like[S="0"]>.Minus{
   border: 1px solid #000; 
   background:#000;
}
.OtherArea .TabView[T="5"] .Result>.Item>.Info>.Comment>.Like[S="0"]>.Minus>svg{
   fill:#fff;
}
.OtherArea .TabView[T="5"] .Result>.Item>.Info>.Comment>.Like[S="1"]>.Plus{
   border: 1px solid #000;
   background:#000;
   color: #fff;
}
.OtherArea .TabView[T="5"] .Result>.Item>.Info>.Comment>.Like[S="1"]>.Plus>svg{
   fill:#fff;
}
.OtherArea .TabView[T="5"] .Result>.Item>.Info>.Comment>.Like>.Plus {
   font-size: 15px;
   border: 1px solid #ccc;
   width: 36px;
   height: 36px;
   line-height: 30px;
   text-align: center;
   border-radius: 100px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor:pointer;
}
.OtherArea .TabView[T="5"] .Result>.Item>.Info>.Comment>.Like>.Plus:hover{
   border: 1px solid #000; 
}
.OtherArea .TabView[T="5"] .Result>.Item>.Info>.Comment>.Like>.Plus>svg{height: 15px;transform: rotate(180deg);}

.OtherArea .TabView[T="5"] .Result>.Item>.Info>.Comment>.Like>.Minus {
   font-size: 15px;
   border: 1px solid #ccc;
   width: 36px;
   height: 36px;
   line-height: 30px;
   text-align: center;
   border-radius: 100px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
}
.OtherArea .TabView[T="5"] .Result>.Item>.Info>.Comment>.Like>.Minus:hover{
   border: 1px solid #000; 
}
.OtherArea .TabView[T="5"] .Result>.Item>.Info>.Comment>.Like>.Minus>svg{height: 22px;}

.OtherArea .TabView[T="5"] .Result>.Item>.Info>.Comment>.Like>span {
   font-size: 14px;
   cursor: pointer;
   text-decoration: underline;
   margin-left: 10px;
}



[data-theme-mode="dark"] .Popup>.Content{background: #212121 !important;}
[data-theme-mode="dark"] .Popup>.Content .Search input{background: #00000045;border-color: #000;}
[data-theme-mode="dark"] .Popup>.Content .SectionItem .Section{background: #303030;border-color: #4d4d4d;border-radius: 3px;}
[data-theme-mode="dark"] .Popup>.Content .SectionItem.active .Section{border-bottom: 2px solid #0bb1fe;}
[data-theme-mode="dark"] .Popup>.Content .SectionItem .Units .UnitItem{background: #151515;box-shadow: inset 0px 0px 0px 1px #f2f2f21c;}
[data-theme-mode="dark"] .Popup>.Content .SectionItem .Units .UnitItem.play{background:#000;box-shadow: inset 0px 0px 0px 1px #2196F3;}
[data-theme-mode="dark"] .Popup>.Content .TabList .TabItem{background: #0000007a;border-color: #ffffff30;}
[data-theme-mode="dark"] .Popup>.Content .TabList .TabItem.active{background: #0000007a;border-color: #03A9F4;}
[data-theme-mode="dark"] .Popup>.Content [x="CourseDescription"]{color:#fff !important}
[data-theme-mode="dark"] .Popup>.Content .OtherArea .TabView .ViewArea>.newNote>.Input>input,
[data-theme-mode="dark"] .Popup>.Content .OtherArea .TabView .ViewArea .FilterArea>span>select,
[data-theme-mode="dark"] .Popup>.Content .OtherArea .TabView .ViewArea .FilterArea>span>input,
[data-theme-mode="dark"] .Popup>.Content .OtherArea select,
[data-theme-mode="dark"] .Popup>.Content .OtherArea input,
[data-theme-mode="dark"] .Popup>.Content .OtherArea textarea,
[data-theme-mode="dark"] .Popup>.Content .QuestionAnswer .FormElement>input,
[data-theme-mode="dark"] .Popup>.Content .OtherArea .TabView .ViewArea .Result>.List>.Item,
[data-theme-mode="dark"] .Popup>.Content .QuestionAnswer .AnswerList>.Item{background: #00000042;color: #ffffff94;}
[data-theme-mode="dark"] .Popup>.Content .OtherArea .TabView .ViewArea>.Result>div>.Info>.Info>.Note{background: #00000052;}
[data-theme-mode="dark"] .Popup>.Content .QuestionAnswer .Btn.Back,
[data-theme-mode="dark"] .Popup>.Content .OtherArea .TabView .ViewArea .NewQuest>.Btn.Back{color:#efefefb0;border-color:#efefefb0}

.swal2-actions{display:flex;flex-direction: row-reverse;}
.swal2-confirm.btn.btn-warning{background: #4CAF50;color: #fff;font-size: 12px;border-radius: 2px;margin: 0 5px;}
.swal2-cancel.btn.btn-secondary{background: transparent;color: #808080;font-size: 12px;border-radius: 2px;margin: 0 5px;border: 0;}
.swal2-html-container{font-size:12px;line-height: 18px;margin: 0 50px;}

.CommentBox .ki-star{cursor: pointer;}
.CommentBox .ki-star:hover{color: #cb7902 !important;}
.CommentBox .ki-star.selected{color: #FF9800;}

[data-comment='0'] [x='courseComment']{ background: #efefef; color:#000; }
[data-comment='1'] [x='courseComment']{background: #ffefd7;color: #9c7500;margin-left: 5px;}

@media (max-width: 1024px) {
   .Popup .Content{left: 0 !important;top: 0 !important;right: 0 !important;bottom: 0 !important;}
   .Popup .CourseViewArea{display: flex;height: inherit !important;flex-direction: column;}
   .Popup .ViewerArea{width:100% !important;height: inherit !important;}
   .Popup .ViewerArea>div:nth-child(1){padding: 0 !important;margin: 0 !important;border-radius: 0 !important;margin-bottom: 10px !important;}
   .Popup .ViewerArea+div{width:100% !important;max-width: 100% !important;}

   .Popup .OtherArea .TabView{padding: 16px;}
   .Popup .OtherArea .TabView .ViewArea,.Popup .OtherArea{padding:0}
   .Popup .TabList{
    overflow-x: auto;
    display: flex;
    align-items: center;
    flex-direction: row;
   }
   [x="CourseDescription"]{width: 100% !important;max-width: 100% !important;}
   
   .Popup .TabList .TabItem{width: 100%;display: block;min-width: fit-content;}
   .Popup .TabList .TabItem[T="0"]{display:block}
   .select2-container{width: 100% !important;}
   .select2-container--default .select2-selection--single{height:initial !important}
   .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:14px !important}
}

.select2-container {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle;
}
.select2-container .select2-selection--single {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 28px;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none;
}
.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
}
.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border: 1px solid #E4E6EF;
    outline: none !important;
    border-radius: 0.42rem;
    height: auto;
    line-height: 0;
}

.select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--multiple, .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #69b3ff;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    display: block;
    padding-left: 8px;
    padding-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    color: #3F4254;
    position: relative;
    padding: 0.65rem 3rem 0.65rem 1rem;
    line-height: 1.5;
    font-size: 13px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow, .select2-container--default .select2-selection--multiple .select2-selection__arrow {
    border: 0;
    margin-left: 0.5rem;
    font-size: 0.85rem;
    left: auto;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: static;
    width: auto;
    height: 20px;
    margin-right: 1rem;
}
.select2-container {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle;
}
.select2-dropdown {
    background-color: white;
    border: 1px solid #aaa;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    position: absolute;
    left: -100000px;
    width: 100%;
    z-index: 1051;
}

.select2-container--open .select2-dropdown {
    left: 0;
}
.select2-container--open .select2-dropdown--below {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.select2-container--default .select2-dropdown {
    border: 1px solid #E4E6EF;
    -webkit-box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
    box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);
}
.select2-container--default .select2-search--dropdown {
    padding: 7px;
}

.select2-search--dropdown {
    display: block;
    padding: 4px;
}
.select2-results {
    display: block;
}

.select2-container--default .select2-results > .select2-results__options {
    max-height: 200px;
    overflow-y: auto;
}

.select2-container--default .select2-results__options {
    padding: 0.65rem 0;
}
.select2-results__options {
    list-style: none;
    margin: 0;
    padding: 0;
}


.select2-container--default .select2-results__option[aria-selected=true] {
    background: #EBEDF3;
    color: #3F4254;
}

.select2-container--default .select2-results__option.select2-results__option--highlighted {
    background: #F3F6F9;
    color: #3F4254;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #5897fb;
    color: white;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #ddd;
}
.select2-container--default .select2-results__option {
    padding: 5px 8px;
}
.select2-results__option[aria-selected] {
    cursor: pointer;
}
.select2-results__option {
    padding: 6px;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none;
}


.btn.Query{position:relative;background: #fff;box-shadow: 0px 0px 0px 1px #ccc;color: #787878;pointer-events: none;}
.btn.Query:before{content:"";background: #fff0 url(/library/img/loading.svg);background-size: 24px;width: 24px;height: 24px;position: absolute;left: 5px;top: 8px;display: block;z-index: 1;border-radius: 2px;z-index: 1;}