/* SAF coolest v1.3
 * Copyright © Chennan All rights reserved.
 * This source code is Written by Wudong, Dinghaiyan and Chennan of SAF-Team in CE·Chengdu.
 * You can use it with permission from the author. */


.saf-content {width:100%; max-width:var(--bw); margin:0 auto; padding:0 15px;}
.saf-rom {margin:0 -15px;}



body.saf-show {
    opacity: 1;
}
body.saf-make {
    opacity: 1;
}
body.saf-show .saf-scroll-animation:not(.saf-no-scroll-animation).saf-scrolled {
    animation: fadeInUp var(--saftime) both;
}
.saf-scroll-animation:not(.saf-no-scroll-animation) {
    opacity: 0;
}
.saf-make .saf-scroll-animation {
    opacity: 1;
}

@keyframes saf-circleLeft {
  0% {opacity:0; transform:translate(-100%,0) rotate(0deg);}
  100%{opacity:1; transform:translate(0,0) rotate(360deg);}
}
@keyframes saf-circleRight {
  0% {opacity:0; transform:translate(100%,0) rotate(0deg);}
  100%{opacity:1; transform:translate(0,0) rotate(-360deg);}
}
.saf-fadeInUp.saf-scrolled {animation: fadeInUp var(--saftime) both !important;}
.saf-fadeInDown.saf-scrolled {animation: fadeInDown var(--saftime) both  !important;}
.saf-fadeInLeft.saf-scrolled {animation: fadeInLeft var(--saftime) both  !important;}
.saf-fadeInRight.saf-scrolled {animation: fadeInRight var(--saftime) both  !important;}

.saf-bounceInLeft.saf-scrolled {animation: bounceInLeft var(--saftime) both  !important;  opacity:1;}
.saf-bounceInRight.saf-scrolled {animation: bounceInRight var(--saftime) both  !important; opacity:1;}
.saf-bounceInUp.saf-scrolled {animation: bounceInUp var(--saftime)both  !important; opacity:1;}
.saf-bounceInDown.saf-scrolled {animation: bounceInDown var(--saftime) both  !important; opacity:1;}

.saf-flipInX.saf-scrolled {animation: flipInX var(--saftime) both  !important;  opacity:1;}
.saf-flipInY.saf-scrolled {animation: flipInY var(--saftime) both  !important;  opacity:1;}

.saf-lightSpeedInLeft.saf-scrolled {animation: lightSpeedInLeft var(--saftime) both  !important; opacity:1;}
.saf-lightSpeedInRight.saf-scrolled {animation: lightSpeedInRight var(--saftime) both  !important; opacity:1;}

.saf-backInLeft.saf-scrolled {animation: backInLeft var(--saftime) both  !important; opacity:1;}
.saf-backInRight.saf-scrolled {animation: backInRight var(--saftime) both  !important; opacity:1;}
.saf-backInDown.saf-scrolled {animation: backInDown var(--saftime) both  !important; opacity:1;}
.saf-backInUp.saf-scrolled {animation: backInUp var(--saftime) both  !important; opacity:1;}

.saf-rotateInDownLeft.saf-scrolled {animation: rotateInDownLeft var(--saftime) both  !important; opacity:1;}
.saf-rotateInDownRight.saf-scrolled {animation: rotateInDownRight var(--saftime) both  !important; opacity:1;}
.saf-rotateInUpLeft.saf-scrolled {animation: rotateInUpLeft var(--saftime) both  !important; opacity:1;}
.saf-rotateInUpRight.saf-scrolled {animation: rotateInUpRight var(--saftime) both  !important; opacity:1;}

.saf-jackInTheBox.saf-scrolled {animation: jackInTheBox var(--saftime) both  !important; opacity:1;}

.saf-zoomInDown.saf-scrolled {animation: zoomInDown var(--saftime) both  !important; opacity:1;}
.saf-zoomInLeft.saf-scrolled {animation: zoomInLeft var(--saftime) both  !important; opacity:1;}
.saf-zoomInRight.saf-scrolled {animation: zoomInRight var(--saftime) both  !important; opacity:1;}
.saf-zoomInUp.saf-scrolled {animation: zoomInUp var(--saftime) both  !important; opacity:1;}

.saf-circleLeft.saf-scrolled {animation: saf-circleLeft var(--saftime) both  !important;}
.saf-circleRight.saf-scrolled {animation: saf-circleRight var(--saftime) both  !important;}

 

.swiper-slide-active .saf-fadeInUp {animation: fadeInUp var(--safswtime) both !important;}
.swiper-slide-active .saf-fadeInDown {animation: fadeInDown var(--safswtime) both  !important;}
.swiper-slide-active .saf-fadeInLeft {animation: fadeInLeft var(--safswtime) both  !important;}
.swiper-slide-active .saf-fadeInRight {animation: fadeInRight var(--safswtime) both  !important;}

.swiper-slide-active .saf-bounceInLeft {animation: bounceInLeft var(--safswtime) both  !important;  opacity:1;}
.swiper-slide-active .saf-bounceInRight {animation: bounceInRight var(--safswtime) both  !important; opacity:1;}
.swiper-slide-active .saf-bounceInUp {animation: bounceInUp var(--safswtime)both  !important; opacity:1;}
.swiper-slide-active .saf-bounceInDown {animation: bounceInDown var(--safswtime) both  !important; opacity:1;}

.swiper-slide-active .saf-flipInX {animation: flipInX var(--safswtime) both  !important;  opacity:1;}
.swiper-slide-active .saf-flipInY {animation: flipInY var(--safswtime) both  !important;  opacity:1;}

.swiper-slide-active .saf-lightSpeedInLeft {animation: lightSpeedInLeft var(--safswtime) both  !important; opacity:1;}
.swiper-slide-active .saf-lightSpeedInRight {animation: lightSpeedInRight var(--safswtime) both  !important; opacity:1;}

.swiper-slide-active .saf-backInLeft {animation: backInLeft var(--safswtime) both  !important; opacity:1;}
.swiper-slide-active .saf-backInRight {animation: backInRight var(--safswtime) both  !important; opacity:1;}
.swiper-slide-active .saf-backInDown {animation: backInDown var(--safswtime) both  !important; opacity:1;}
.swiper-slide-active .saf-backInUp {animation: backInUp var(--safswtime) both  !important; opacity:1;}

.swiper-slide-active .saf-rotateInDownLeft {animation: rotateInDownLeft var(--safswtime) both  !important; opacity:1;}
.swiper-slide-active .saf-rotateInDownRight {animation: rotateInDownRight var(--safswtime) both  !important; opacity:1;}
.swiper-slide-active .saf-rotateInUpLeft {animation: rotateInUpLeft var(--safswtime) both  !important; opacity:1;}
.swiper-slide-active .saf-rotateInUpRight {animation: rotateInUpRight var(--safswtime) both  !important; opacity:1;}

.swiper-slide-active .saf-jackInTheBox {animation: jackInTheBox var(--safswtime) both  !important; opacity:1;}

.swiper-slide-active .saf-zoomInDown {animation: zoomInDown var(--safswtime) both  !important; opacity:1;}
.swiper-slide-active .saf-zoomInLeft {animation: zoomInLeft var(--safswtime) both  !important; opacity:1;}
.swiper-slide-active .saf-zoomInRight {animation: zoomInRight var(--safswtime) both  !important; opacity:1;}
.swiper-slide-active .saf-zoomInUp {animation: zoomInUp var(--safswtime) both  !important; opacity:1;}

.swiper-slide-active .saf-circleLeft {animation: saf-circleLeft var(--safswtime) both  !important;}
.swiper-slide-active .saf-circleRight {animation: saf-circleRight var(--safswtime) both  !important;}

.swiper-slide-active .saf-d-1 {animation-delay:1.1s !important;}
.swiper-slide-active .saf-d-2 {animation-delay:1.2s !important;}
.swiper-slide-active .saf-d-3 {animation-delay:1.3s !important;}
.swiper-slide-active .saf-d-4 {animation-delay:1.4s !important;}
.swiper-slide-active .saf-d-5 {animation-delay:1.5s !important;}
.swiper-slide-active .saf-d-6 {animation-delay:1.6s !important;}
.swiper-slide-active .saf-d-7 {animation-delay:1.7s !important;}
.swiper-slide-active .saf-d-8 {animation-delay:1.8s !important;}
.swiper-slide-active .saf-d-9 {animation-delay:1.9s !important;}
.swiper-slide-active .saf-d-10 {animation-delay:2s !important;}
.swiper-slide-active .saf-d-11 {animation-delay:2.1s !important;}
.swiper-slide-active .saf-d-12 {animation-delay:2.2s !important;}
.swiper-slide-active .saf-d-13 {animation-delay:2.3s !important;}
.swiper-slide-active .saf-d-14 {animation-delay:2.4s !important;}
.swiper-slide-active .saf-d-15 {animation-delay:2.5s !important;}

.saf-coolest {
    background: #222;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translate(0,100%);
    transition: all 0.6s;
}
.saf-make .saf-coolest{
    opacity: 1;
    visibility: visible;
    transform: translate(0,0);
}
.saf-make .saf-coolest.hideCoolest {display:none!important; opacity:0;visibility:hidden;}

/*循环体swiper*/
.saf-sBar {display: flex;width: 100%;justify-content: center; padding-top: 20px; align-items:center;}
.saf-sBar .saf-s-Btn {width: 40px;height: 40px;border: 1px #ddd solid;border-radius: 50%;display: flex;align-items: center;justify-content: center;transition: all 0.5s;}
.saf-sBar .saf-s-Btn:hover {background: var(--c);border-color: var(--c);}
.saf-sBar .saf-s-Btn svg {width: auto;height: 22px;fill: #666;}
.saf-sBar .saf-s-Btn:hover svg {fill: #fff;}

.saf-sBar .saf-cn-pagination {display: flex;align-items: center;padding: 0 20px; width:auto;}
.saf-sBar .saf-cn-pagination.bullets span {width: 5px;height: 5px;border-radius: 5px;margin: 0 2px;transition: all 0.5s;}
.saf-sBar .saf-cn-pagination.bullets span.swiper-pagination-bullet-active {width: 30px;background: var(--c);}

.saf-sBar .saf-cn-pagination.progressbar {height:4px; position:relative; flex:1; max-width:80%; margin:0 20px; padding:0; border-radius:5px; overflow:hidden;}
.saf-sBar .saf-cn-pagination.progressbar span{background:var(--c); border-radius:5px;}

.saf-sBar .saf-cn-pagination.fraction {flex:none;width:auto;}
.saf-sBar .saf-cn-pagination.fraction span {padding:0 3px; font-weight:bold; line-height:1.6; font-size:14px; }
.saf-sBar .saf-cn-pagination.fraction span.swiper-pagination-current{color:var(--c);font-size:16px;}

.saf-licenseoprov {display:flex; align-items:center;}
.saf-auto-licenseo {display:flex; align-items:center; justify-content:center;}
.saf-auto-licenseo a {display:block; line-height:1.6;font-size:14px;margin-left:10px; color:rgba(255,255,255,0.5);}

.licenseBox {width:100%; height: 100%; padding:15px; position: fixed;z-index:99999;background: rgba(0,0,0,0.8); left: 0;top:0;display: flex; align-items: center; justify-content: center; transition:all 0.5s; opacity: 0; visibility: hidden;}
.licenseBox a {display: flex; width: 60px; height: 60px; border: 1px #fff solid; border-radius: 50%; position: absolute; right: 50px; top: 50px; color:#fff;font-size: 30px; transition: all 0.5s;overflow: hidden; z-index:5; align-items:center; justify-content:center;}
.licenseBox a:before {content:"";display: block;width: 100%; height: 100%; border-radius:50%; background: var(--c); position: absolute; left: 0; top: 0; transform: scale(0); transition: all 0.5s; z-index:-1;}
.licenseBox a:hover {border-color: var(--c);}
.licenseBox a:hover:before {transform: scale(1);}

.licenseBox .licenseRim {width: auto; max-width: 1000px; height:auto;max-height:1400px; background: #fff; border-radius: 15px; padding: 15px; opacity: 0; transform: translate(0,100px); transition: all 0.5s ease 0.3s;}
.licenseBox .licenseRim img {max-width:100%; max-height:75vh; object-fit:contain;}
.licenseBox.show {opacity: 1; visibility: visible;}
.licenseBox.show .licenseRim {opacity: 1; transform: translate(0,0);}


.saf-nodata {text-align:center; padding:30px 0;}
.saf-nodata span svg {width:auto; height:100px; fill:#f00;}
.saf-nodata .saf-pop {padding-top:10px; text-align:center;}
 


@keyframes r {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.saf-circletxt {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.saf-circletxt {
  animation:r 30s linear infinite;
}
.saf-circletxt span {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  color:var(--cc);
 
}
.saf-circletext {
  display:flex;
  justify-content:center;
  align-items:center;
  width: var(--ccsize);
  height: var(--ccsize);
  position: absolute;
  bottom:20px;
  left:20px;
  border-radius: 500vw;
  z-index:100;
}
.saf-circletext svg {
  width:auto;
  height:30%;
}
.saf-circletext svg path {
  fill:var(--cc); 
}


.saf-table-container {width:100%; overflow-x:auto;}
.saf-table-container .saf-table-wrapper { display:inline-block; width:100%; min-width:1000px;}
.saf-table-container .saf-table-wrapper table {width:100% !important;}


.saf-rolling-container {
  width:100000vw;
  position:relative;
}
.saf-rolling-wrapper {
  display:flex;
  width:max-content;
}
.saf-overflow-hidden {
  overflow:hidden;
  width:100%;
  position:relative;
}


  body.saf-shield-mo div.saf-no-mo-tip {
  display: none;
}

@media (max-width: 768px) {
  body.saf-shield-mo .main {display:none;}
  body.saf-shield-mo > div.saf-no-mo-tip {
    display: flex !important;
    height: 100vh;
    font-size: 20px;
    color: #333; 
    text-align: center;
    align-items: center;
  }

  body.saf-shield-mo > div.saf-no-mo-tip div {
    width: 100%;
    padding:20px;
  }

  body.saf-shield-mo > div.saf-no-mo-tip svg {
    width: 20vw;
    height: 20vw;
    margin: auto;
    margin-bottom: 10vw;
    display: block;
  }

  body.saf-shield-mo > div.saf-no-mo-tip path {
    fill: red;
  }

  body.saf-shield-mo > div.saf-no-mo-tip h2 {
    font-size: 24px;
    color: #000;
  }

  body.saf-shield-mo > div.saf-no-mo-tip p {
    font-size: 14px;
    color: #888;
    line-height: 3;
  }

}


.saf-accordion > div {transition:all 0.5s;} 



[saf-fullscreen] {width:100% !important;  margin:0 !important; float:none !important; padding:0; position:relative !important; background:#333;}
[saf-fullscreen]  div.swiper.swiper-vertical {width:100%; height:100vh; max-height:1440px;} 
[saf-fullscreen]  div.swiper > div > div  {width:100% !important; height:100vh !important; display:flex; flex-direction:column;justify-content:center; align-items:center;overflow:hidden; max-height:1440px; flex:0 0 100%;}

[saf-fullscreen].vfooter  div.swiper > div > div {transform:scale(0.9); opacity:0.8; transition:all 0.8s;}
[saf-fullscreen].vfooter  div.swiper > div > div.swiper-slide-active {transform: scale(1); opacity:1; z-index:3;}
[saf-fullscreen].vfooter  div.swiper > div  div.saf-fullfooter {height:auto!important; transform:scale(1);opacity:1;} 


.swiper-pagination-vertical.saf-pagination.fraction {position:fixed; z-index:99; width:20px !important; left:10px; top:50%; bottom:auto; transform:translate(0,-50%); color:transparent;}
.swiper-pagination-vertical.saf-pagination.fraction:before {content:"";display:block; width:20px; height:1px; background:var(--pagecolor); opacity:0.5; position:absolute; left:0; top:50%;}
.swiper-pagination-vertical.saf-pagination.fraction span {color:var(--pagecolor); font-size:16px; display:block; text-align:center;}

.swiper-pagination-horizontal.saf-pagination.fraction {position:fixed; z-index:99; width:20px !important; left:10px; top:50%; bottom:auto; transform:translate(0,-50%); color:transparent;}
.swiper-pagination-horizontal.saf-pagination.fraction:before {content:"";display:block; width:20px; height:1px; background:var(--pagecolor); opacity:0.5; position:absolute; left:0; top:50%;}
.swiper-pagination-horizontal.saf-pagination.fraction span {color:var(--pagecolor); font-size:16px; display:block; text-align:center;}


.swiper-pagination-vertical.saf-pagination.progressbar {z-index:99; left:auto; right:0;}
.swiper-pagination-vertical.saf-pagination.progressbar span {background:var(--pagecolor);}

.swiper-pagination-horizontal.saf-pagination.progressbar {z-index:99; }
.swiper-pagination-horizontal.saf-pagination.progressbar span {background:var(--pagecolor);}

.swiper-pagination-vertical.saf-pagination.bullets {width:auto; z-index:99; position:fixed; right:10px; left:auto; top:50%; transform:translate(0,-50%);}
.swiper-pagination-vertical.saf-pagination.bullets span {width:6px; height:6px; border-radius:5px; transition:all 0.5s;}
.swiper-pagination-vertical.saf-pagination.bullets span.swiper-pagination-bullet-active {height:40px; background:var(--pagecolor);}

.swiper-pagination-horizontal.saf-pagination.bullets {width:10px; display:flex; flex-wrap:wrap; z-index:99; position:fixed; right:10px; left:auto; bottom:auto; top:50%; transform:translate(0,-50%);}
.swiper-pagination-horizontal.saf-pagination.bullets span {width:6px; height:6px; border-radius:5px; transition:all 0.5s; margin:5px 0;}
.swiper-pagination-horizontal.saf-pagination.bullets span.swiper-pagination-bullet-active {height:40px; background:var(--pagecolor);}


.saf-make  [saf-fullscreen] {height:auto; max-height:none;}


/*翻页样式*/
 
.page_con {padding:0rem 0; display:flex; width:100%; justify-content:center;}
.page_con > a {display:flex; width:40px; height:40px; border-radius:var(--br); border:1px rgba(0,0,0,0.4) solid; font-size:15px; color:#666;position:relative; align-items:center; justify-content:center; margin:0 4px;}
.page_con > a:hover {border-color:var(--bc); color:var(--bc);}
.page_con > a.page_a.disabled {border-radius:var(--br); background:rgba(0,0,0,0.1); border-color:rgba(0,0,0,0.1);}
.page_con > a.page_a.current{border-radius:var(--br); background:var(--bc); color:#fff; border-color:transparent;}
.page_con > a.page_prev{color:transparent; font-size:0;}
.page_con > a.page_prev:before{content:"";display:block; width:0; height:0;border-style: solid;
  border-color: transparent;  border-width: 5px 5px 5px 0 ; border-right-color: #666; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}

.page_con > a.page_next{color:transparent; font-size:0;}
.page_con > a.page_next:before{content:"";display:block; width:0; height:0;border-style: solid;
  border-color: transparent;  border-width: 5px 0 5px 5px; border-left-color: #666; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}

.page_con > a.page_a.disabled:before {opacity:0.4;}
.page_con > span.page_jump {display: inline-flex; align-items: center; display:none;}
.page_con > span.page_jump input {border-radius:5px; margin:0 5px; border-color:rgba(0,0,0,0.4);}

/*系统表单提示*/
.pl_toast {height: 100%;
    background: rgba(0,0,0,0.7);
    top: 0!important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    max-width:100% !important;
	padding:15px;}
.pl_toast .pl_toast_con{
	background: #fff !important;
    color: #666 !important;
    border: 0;
    border-radius: 10px !important;
    box-shadow: 0 0 15px rgba(0,0,0,0.2) !important;
    padding: 0;
    max-width: 400px;
	width:100%;
    overflow: hidden;}
	.pl_toast .pl_toast_con:before { 
		content: "System Prompt";
    display: block;
    background: var(--c);
    color: #fff;
    padding: 10px 15px;
    font-size: 18px;
    font-weight: bold;
	text-align: left;
	}
	
	.pl_toast .pl_toast_con span{padding:30px 20px;
    display: block; font-size:16px;}
		.pl_toast .pl_toast_con span:before {    content: "✓";
    font-family: times;
    display: flex;
    width: 40px;
    height: 40px;
    background: green;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: bold;margin:0 auto 10px;}


/*SAF营销对话框*/

@keyframes saf-ud {
    0%,100% {
	transform: scale(1);
}
50% {
	transform: scale(1.1);
}
}

.saf-show .chat-advisory {border-radius:50%; background:var(--c); width:60px; height:60px; box-shadow:0 5px 15px rgba(0,0,0,0.2); display:flex; align-items:center; justify-content:center;}

.saf-show .chat-advisory-img { width:30px; height:30px; object-fit:contain;margin:0;     animation: saf-ud 3s ease-in-out infinite;}

.saf-show .chat-box {border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,0.15);overflow:hidden;background:var(--c);}
.saf-show .chat-header-box { height:50px; justify-content:flex-start;}
.saf-show .chat-header-box:before {content:"";width:20px; height:20px; background:url(browse.php?u=Oi8vd3d3LmZqcHoyMTAuY24vdXBsb2FkL2Nzcy9kYXRhOmltYWdlL3BuZztiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUM0QUFBQXVDQVlBQUFCWHVTczNBQUFHQWtsRVFWUm9RKzJZQjRoY1pSU0Z2Mk9OdlVWc1dDSnFiTEdoc2FHb29LaXhFd1FyUmhHaUNDb0s5cTdFaHFqWUVURld4RUxzSW1LTldDTnEwTmg3Rnd0cVZOUjQ1SVQvTFcvZnprd3ltOTJGWUM0TXpNeDc3My9udi8rOTk1eDd4VnhxbWt0eE13LzRVSi9jLzlmanRoY0dWZ1dXQWhZQy9nQytCNzZXOU85Z25VVFhIcmU5QkxBSHNDdXdGYkFXTUY4TGdIOENyd09UZ1FlQjV5UjVvRFl5MjhCdHJ3bWNCQndJTEY0REVLOStBL3dJL0FVc0Nxd0lMTjBBK1JGd05YQ2RwTi9uZEFPekJHNTdRZUFNNEdRZzMyTlRnRWVCcDRBWEpDVThlcG50Z044QjJCSFlxMndtOTN3SkhDa3B6L2ZiT2dLM3ZUNXdLN0FaRU05T0FpNlQ5SHczYnl4NWtKTTZBZGdBU01qY2tOK1NwbmV6Vm5WdlcrQzI0NjM3Z1NXQlQ0SERKVDNabjVkVXo5aWV2NFRiV1NXUlh3WjJsL1JEdCt1MkJHNTdOQkNRaXdFUEFRZEorcVhieGR2ZGIzc1Q0QkZnSlNEZ2Qrclc4MzJBMng0T3ZBR3NYS3JCV0VsSnVnRTEyeU5MamdUOGJaSU95UXRzSDFOT1pieWtoOXU5dEJYdzIwdmxlQW5ZZmpCQTEwSm5JK0JGWUJGZ1gwbVRiSjhOSkpSbWxQQzhwUlg0WHNCdGIxNk9MaDRlSmVuOUFYVnppOFZzSjJFdkJmS3VkVXZpVGloZS82ZHNLT0hheTVyQWIwczhBMWRLT25hd1FaZlFTSW45QUZnTjJFZFNDa0pDNXNJQy9pZGdFMG1mMWZIMEFMYzlyRkIxeUdXZG9mQjJMV1JPQlM0QTdwU1VzaG5nd1pZWTN5M1ZUZEkrN1lCdkR6d0RUSk9VK3QzTHlzYVdreFFDNldPRnFKSm9uN2VpZHRzcHE4TWtmZGRpN1EyQnFjQzNra0pjTTgxMk5OQzBVdDFHUzNxbHVsYjMrRkhBTlNFY1NZZldGN2NkQW5vY1dBNllLT213eHZVYzg3UEE2c0FUOFpLa3hHY0ZZRi9namxLN1Q1VjBVZVA1YUoxZmkxd1lYcS9ydGk4RGptL2lxZ00vSFRnUHVGaFNORW1QMmI0SkdGZjdhdzFKSWFVSzJKbkFPYlhyTzBqSzZWWFhVem0yTEQrblM2cHJuZXFlajRFMWtxQ1MzcTA5bTlOL0MvZ1pXTDV5U0IxNDlNaTV3QldTam1zQVB3MDR2L3lYQlZhVjlGdHQ4U1IwRWp2Mk56QlNVb0JVb0tvU205OVRKYVVNOWpMYkxZSG5KdHR4VWs1MVkwbHY1cjg2OFBIQXRjQzlrc1kyZ0VkejV4VFdqc0tURkEvMldFbWtWS0V3N3UxTjRyQzliQkZxaWZNSmtsSkY2cyszRFpVQ1BPVndETEMvcEx1YndMY3JjZnFocEdqc0lUUGJWWEorSXlrSjNqeU5rRkNZTmFyeXhpYndlRFZpSi9wa1UwbHBBb2JFYkZlaDJGTU9HeWZ5QUxBbmNKaWtpYjJBbHlPcGRuYTlwSVRPb0ZzcG94K1c5bTl2U1FIWjlQaHJjU2F3czZSVXJkN2ppVkwyWGkwNllUTkpxYTJEYXJaUEJDNEIzZ1BXYS9hcHRwZEpmUWNXQUZhUWxINjI3MXpGZGtYNzZYSWlzdWE0eldxM2M5dDFrZFZEOTQwd1NSbE9PWjRpS1ZwcXByV1R0V0dvMU5Ub2h2MEdvMXUzSFVFVnpkOUwxalpBcC9GSXJpVjVqNVYwWlZ2Z0pkWlQ5Tk9lcGVFOVh0TGxBeGt2dGhPdmFTUkM3MjBiQ2R0SGx3WTdNbUhOZXJQUnFYVTd1UFNiR1N0RXg4eXgyVTZjcHVrTzJXVUdFODAvcGxYclZpVDIwNlhLalpOMGN4MUFKK0FobXlSTVJGTllxOTlXbXVXd2E3UjNUalBOOHZXbFdlNlRRMFZjWlZNSm96N2FxV1dNVitoczU2R3ZNaStSRkhFVjZrMnQzdy9ZdGx3TGc3NWNwL0c4L1h4eEFybDJoZUZTQjdya0xSM2hTV0xXdDJsVlJmV3llUHBPU05oUTByNW5ycCtTbTArVXIwM1k0dm9sOXdYL1ZJTmhES1NxMXRxZFRVUTZqT0hhU1JsQmt6WmFNcmpPNjAyMkFsNGFEL3RWT1llOFh4Q0ovWjJCRCt3U2huQmpRS1MvVTBMdVBvSWJ2THNqT0RLQ0NOQ0xkZ1drcFR2ZmF3VDhDMUt4bGNQUlJpbFU3bW5Ec0Iya2l5aGxFL2thZ0NuQ3NSckkwcGx5bmd1NDQxY3ozM1I3VnNYcVp1VGlRU09lSHZmZGhybnhQME1TVW5tbHRZSmVMUkI2RGVMcEsyNnRKdU8zL2J5UU9JNUc1c2RTMWNmOG91MFRsZ2xnUmRveHlHZGdDZW1reUJSWkZtb0t5c2FKTm9uNUJFdlI5SW1CNUlMT1kyUVhKSTd6ZkFSd0FHRjF1T281RWxzU1VucGpMb0tsZlI3WDh4T1hIYTFvelkzMjE0bjNSZXdkKzJXRVpJKzZRcjRRSURwenhxMjA5VmZGYVlFdHBIMHdsd0JQQ0J0SjFTU1YySHQrK1lhNEJYUVNJVDZ0S0MrZ1ZrTzl2dHozRVB4ekR6Z1ErSGxlYUV5MUY2dXYrOC9OM0ZTVFE4c29oSUFBQUFBU1VWT1JLNUNZSUk9&b=29) center no-repeat; background-size:contain; display:block;}
.saf-show .chat-header-box .chat-header-name {color:#fff; flex:1; padding-right:10px; text-align:center;}
.saf-show .chat-header-box .chat-header-close {  filter: brightness(50);}

.saf-show .chat-content {clip-path:ellipse(140% 60% at 50% 60%); padding:15px;}
.saf-show .chat-content .chat-message-text {border-radius:0 8px 8px 8px; position:relative;}
.saf-show .chat-content .chat-message-text:before{content:"";display:block; width:0; heght:0; border:5px solid transparent; border-top:5px #fff solid; position:absolute; top:0; right:calc(100% - 5px);}
.saf-show .chat-content .chat-message-area.chat-right .chat-message-text {background:var(--c); color:#fff; border-radius:8px 0 8px 8px;}
.saf-show .chat-content .chat-message-area.chat-right .chat-message-text:before {left:calc(100% - 5px); right:auto; border-top-color:var(--c);}

.saf-show .chat-content .chat-message-text:after{
   content: "";
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    right: 2px;
    top: 2px;
    background: linear-gradient(225deg, #ddd, transparent 50%);
    z-index: 3;
    border-radius: 0 5px 0 0; 
}
.saf-show .chat-content .chat-message-area.chat-right .chat-message-text:after {
 
    left: 2px;
    top: 2px;
    right:auto;
    background: linear-gradient(135deg, white, transparent 50%);
    z-index: 3;
    border-radius: 5px 0 0;
    opacity: 0.7;
}

.saf-show .chat-input .chat-send-box .chat-send {display:none;}
.saf-show .chat-input .chat-send-box .chat-send-img-default{margin:0;}
.saf-show .chat-input .chat-send-box .chat-send-content-default {border-radius:30px; padding:0; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;}
.saf-show .chat-input .chat-send-box .chat-send-content-default.active {background:var(--c); border-color:var(--c); color:#fff;}

.saf-show .chat-input .chat-send-box .chat-send-content-default.active .chat-send-img-default { filter: brightness(50);}

.saf-show .chat-input .chat-textarea {width:100%; padding:15px;}
.saf-show .chat-input {position:relative; background:#fff;}
.saf-show .chat-input .chat-emoji {position:absolute; left:0; bottom:5px; z-index:4;}
.saf-show .chat-input .chat-emoji-content {width:max-content;}
.saf-show .chat-input .chat-send-box {position:relative; border-top:1px #ddd solid; padding-top:10px;}