.replyobjectavatar,  .channelboxviewimage, .profileimageview, .dreamboxthemeimage-user, .channelboxviewimage-2, .profilepageimage, .viewimage-normal-feed-first, .firstimage, .dreamboxthemeimage , .logo-groupmember, #profileimageview, .dreampostpicture2, .clickavatar-card,.dreampostthemeposterimage,.clickavatar-whisper-content ,.clickavatar-whisper-commenttocomment, .dreampostthemecommentterimage, .postcontentavatar , .whispertrendboximage2{border: 1px solid var(--imagebordercolor) !important;}


img, span, input, textarea, div,button,a, .FadeIn, .theme-color{
  transition: background-color var(--transitiontime)  var(--transitionanimation) , color 0.05s var(--transitionanimation) , border-color var(--transitiontime) var(--transitionanimation) ,box-shadow var(--transitiontime)  var(--transitionanimation) , border  var(--transitiontime)  var(--transitionanimation),  opacity 0.1s ;
}


#topfirstdream3{ transition: border-bottom 0s!important}



.clickbackground-post, .profileviewcard ,.messageviewcard, .notificationcard, .loginImage, .loginimage1 , .loginimage2, .cancelpostdiscuss, .cancelpost-discuss,  .starttestbutton-top, .loginboxtitlebox, .joingroupwindow, .clickbackground-discuss, .editspeak,.expandreplycommentboxbutton, .shrinkreplycommentboxbutton,.profileviewoption, .dreamleftboxposition, .highlighttheme3 , .highlighttheme2, .canceleditprofilebutton, .completeeditprofilebutton, .filtertagincharacterwall ,.block, .emptybox, .testresultpagesetpersonalitybutton, .personalityResultInfoImage-Function, .personalityResultInfoImage , .fadeInWhenPersonalityTestStart , .fadeInWhenPersonalityTestStart2 , .fadeInWhenPersonalityTestStart3,.quittestresultbutton-mobile, .FadeIn, .votesList, .loginbox-window, .clickbackground-login, .followchannellist,.channelboxset , .choosepersonalitybox2, .clickbackground-personality, .loadbox-placeholder, .postdiscuss , .clickbackground-vote, .KaptchaImageWindow, #changepasswordWindow, .clickbackground-register, .clickbackground-setting, .clickbackground-kaptcha, .createchannelpage2 , .clickbackground-establishGroup, #changephonenumberWindow, .chessRow-personalityDescription , .chessBlock-personalityDescription, .personalityEntranceBox, .profileimageviewcard , .changeRemarkBox ,.clickbackground-changeRemark, .blackListWindow , .clickbackground-blacklist, .QuatumMessageText, .chatBoxWindow , .clickbackground-message , .clickbackground-voteWindow , .voteinmainpage, .creationInfoBoxInList ,.personalityview, .cardboxinfoname, .widetitlebottom { transition: opacity 0s !important}


.clickuserimage , .clickavatar { transition:height 0.1s var(--transitionanimation)  , margin-bottom  0.1s  var(--transitionanimation) , width  0.1s var(--transitionanimation)  , background-color var(--transitiontime)  var(--transitionanimation) , color 0.05s var(--transitionanimation) , border-color var(--transitiontime) var(--transitionanimation) ,box-shadow var(--transitiontime)  var(--transitionanimation) , border  var(--transitiontime)  var(--transitionanimation),  opacity 0.1s ; }

.morecommenttocommentbox , .morecommenttocommentboxtitle ,.ctcReplyBox, .morecommenttocommentbox-scroll, .ctcWindowReplyTextarea, .ctcCardBox{transition: background-color 0s  var(--transitionanimation) , width 1s var(--transitionanimation) , font-size   0.3s var(--transitionanimation)  }

.lastquestionEffect{

  transition: 0.5s !important


}


:root {

  --absoluteBWColor:#000000;

  --testAllCharacterTitleBackgroundColor:rgb(170 170 170);


  --choosePersonalityBox:#ececec;

  --appbutton:rgb(136 136 136 / 17%);

  --mainactivecolor-b:#71a0ffbb; 
  
  --mainactivecolor-g:#a1ffe4bb;

  --mainactivecolor-r:#ffa1a1bb;

  --mainactivecolor-y:hwb(51 47% 0%);
  
  --mainactivecolor-brw:hwb(21 47% 0%);
 
  --maincolor-r-dark: #a95959;
  --maincolor-g-dark: #579ea0;
  --maincolor-b-dark: #659dff;
  --maincolor-y-dark:#b29b6d; 


  --profilebuttonhoverbackgroundcolor-b-light:#e2e4ee;

  --profilebuttonhoverbackgroundcolor-g-light:#e2eeec;

  --profilebuttonhoverbackgroundcolor-r-light:#eee2e2;


  --profilebuttonhoverbackgroundcolor-y-light:#eeeae2;



  --profilebuttonhoverbackgroundcolor-p-light:#e7e5ec;


  --marketingInfoBar:rgb(224, 224, 224);


  --profilebuttonhoverbackgroundcolor-brw-light:#ece9e5;

  --mainactivecolor-p:#625ee1d0;;

  --mainactivecolor-p-light:#625ee1d0;;

  --progressbar-b-light:#6d85b5;


  --progressbar-g-light:#1a7f75;


  --progressbar-r-light:#9a7d7d;


  --progressbar-y-light:#aeab9a;

  --progressbar-p-light:#8c80c2;


  --importantInformation: rgb(168 168 168);


  --progressbar-brw-light:rgba(160, 137, 112, 0.627);

  --secondarybuttoncolor: rgb(232, 232, 232);
  
  --secondarybuttoncolor-r-light:#7c333317;

  --secondarybuttoncolor-g-light:#1a7f7517;

  --secondarybuttoncolor-b-light:#2c529d17;




  --secondarybuttoncolor-y-light:#a59c6c17;

  --secondarybuttoncolor-p-light:#9e96c117;




  --secondarybuttoncolor-brw-light:#c2a48f17;

  /* --profilebuttonhoverbackgroundcolor-p-light */


  /* 日间主色 */
  --maincolor-r-light: #925454;
  --maincolor-g-light: #3b8183;
  --maincolor-b-light: #2c529d;
  --maincolor-y-light:#979275;
  --maincolor-p-light: #6760ab;
  
  --maincolor-brw-light:#78726c;
  
  /* 日间禁用色 */
  --maindisabledcolor-r-light: #9a7d7d5d;
  --maindisabledcolor-g-light: #3b818372;
  --maindisabledcolor-b-light: #6d85b542;
  --maindisabledcolor-y-light:#928f7f62;
  --maindisabledcolor-brw-light:#9b8b8362;


  --maindisabledcolor-p-light: #6760ab42;



  --maindisabledcolor-p: #8677ff42;

  /* 日间漂浮色 */
  --mainhovercolor-r-light:#a87f7f;
  --mainhovercolor-g-light: #80aeaf;
  --mainhovercolor-b-light: #659dff;
  --mainhovercolor-y-light:#d0c37a;


  --mainhovercolor-p-light: #a9a4d5;

  --mainhovercolor-brw-light:#c59676;


   /* 日间主色 */
   --maincolor-r:  #925454;
   --maincolor-g: #3b8183;
   --maincolor-b: #2c529d;
   --maincolor-y:#a59c6c;
   --maincolor-p: #6760AB;
   --maincolor-brw:#78726c;

 
   /* 日间禁用色 */
   --maindisabledcolor-r: #79000054;
   --maindisabledcolor-g: #3b81838c;
   --maindisabledcolor-b: #2c529d42;
   --maindisabledcolor-y:#928f7f62;
   --maindisabledcolor-brw:#9b8b8362;

   /* 日间漂浮色 */
   --mainhovercolor-r: #ff8383;
   --mainhovercolor-g: #65be7b;
   --mainhovercolor-b: #659dff;

   


}


:root[data-theme="dark"][data-color="r"] {
  --maincolor: var(--maincolor-r-dark);
  --mainactivecolor:var(--mainactivecolor-r-dark);
  --maindisabledcolor: var(--maindisabledcolor-r-dark);
  --mainhovercolor: var(--mainhovercolor-r-dark);
  --progressbar: var(--progressbar-r-dark);

  --maindisabledhovercolor: var(--maindisabledhovercolor-r-dark);
 
}




:root[data-theme="dark"][data-color="brw"] {
  --maincolor: var(--maincolor-brw-dark);
  --mainactivecolor:var(--mainactivecolor-brw-dark);
  --maindisabledcolor: var(--maindisabledcolor-brw-dark);
  --mainhovercolor: var(--mainhovercolor-brw-dark);
  --progressbar: var(--progressbar-brw-dark);

  --maindisabledhovercolor: var(--maindisabledhovercolor-brw-dark);
 
}


:root[data-color="p"] {
  --maincolor: var(--maincolor-p-light);
  --mainactivecolor:var(--mainactivecolor-p-light);
  --maindisabledcolor: var(--maindisabledcolor-p-light);
  --mainhovercolor: var(--mainhovercolor-p-light);
  --progressbar: var(--progressbar-p-light);
  --secondarybuttoncolor: var(--secondarybuttoncolor-p-light);
  --profilebuttonhoverbackgroundcolor: var(--profilebuttonhoverbackgroundcolor-p-light);

  --maindisabledhovercolor: var(--maindisabledhovercolor-p-light);
}



:root[data-color="brw"] {
  --maincolor: var(--maincolor-brw-light);
  --mainactivecolor:var(--mainactivecolor-brw-light);
  --maindisabledcolor: var(--maindisabledcolor-brw-light);

  --mainhovercolor: var(--mainhovercolor-brw-light);
  --progressbar: var(--progressbar-brw-light);
  --secondarybuttoncolor: var(--secondarybuttoncolor-brw-light);
  --profilebuttonhoverbackgroundcolor: var(--profilebuttonhoverbackgroundcolor-brw-light);

  --maindisabledhovercolor: var(--maindisabledhovercolor-brw-light);
}



:root[data-theme="dark"][data-color="y"] {
  
  --maincolor: var(--maincolor-y-dark);
  --mainactivecolor:var(--mainactivecolor-y-dark);
  --maindisabledcolor: var(--maindisabledcolor-y-dark);
  --mainhovercolor: var(--mainhovercolor-y-dark);
  --progressbar: var(--progressbar-y-dark);

  --maindisabledhovercolor: var(--maindisabledhovercolor-y-dark);
 
}


:root[data-theme="dark"][data-color="g"] {
  --maincolor: var(--maincolor-g-dark);

  --mainactivecolor:var(--mainactivecolor-g-dark);
  --maindisabledcolor: var(--maindisabledcolor-g-dark);
  --mainhovercolor: var(--mainhovercolor-g-dark);
  --progressbar: var(--progressbar-g-dark);

  --maindisabledhovercolor: var(--maindisabledhovercolor-g-dark);
}

:root[data-theme="dark"][data-color="b"] {
  --maincolor: var(--maincolor-b-dark);
  --mainactivecolor:var(--mainactivecolor-b-dark);
  --maindisabledcolor: var(--maindisabledcolor-b-dark);
  --maindisabledhovercolor: var(--maindisabledhovercolor-b-dark);
  --mainhovercolor: var(--mainhovercolor-b-dark);
  --progressbar: var(--progressbar-b-dark);

  --maindisabledhovercolor: var(--maindisabledhovercolor-b-dark);
}


:root[data-theme="dark"][data-color="p"] {
  --maincolor: var(--maincolor-p-dark);
  --mainactivecolor:var(--mainactivecolor-p-dark);
  --maindisabledcolor: var(--maindisabledcolor-p-dark);
  --mainhovercolor: var(--mainhovercolor-p-dark);
  --progressbar: var(--progressbar-p-dark);

    --maindisabledhovercolor: var(--maindisabledhovercolor-p-dark);
  
}



:root[data-color="r"] {

  --mainactivecolor:var(--mainactivecolor-r-light);
  --secondarybuttoncolor: var(--secondarybuttoncolor-r-light);
  --maincolor: var(--maincolor-r-light);
  --maindisabledcolor: var(--maindisabledcolor-r-light);
  --mainhovercolor: var(--mainhovercolor-r-light);
  --progressbar: var(--progressbar-r-light);
  --profilebuttonhoverbackgroundcolor: var(--profilebuttonhoverbackgroundcolor-r-light);

  --maindisabledhovercolor: var(--maindisabledhovercolor-r-light);

}


:root[data-color="y"] {



  --mainactivecolor:var(--mainactivecolor-y-light);

  --secondarybuttoncolor: var(--secondarybuttoncolor-y-light);
  --maincolor: var(--maincolor-y-light);
  --maindisabledcolor: var(--maindisabledcolor-y-light);
  --mainhovercolor: var(--mainhovercolor-y-light);
  --progressbar: var(--progressbar-y-light);
  --profilebuttonhoverbackgroundcolor: var(--profilebuttonhoverbackgroundcolor-y-light);

  --maindisabledhovercolor: var(--maindisabledhovercolor-y-light);

}


:root[data-color="g"] {



  --mainactivecolor:var(--mainactivecolor-g-light);

  --secondarybuttoncolor: var(--secondarybuttoncolor-g-light);
  --maincolor: var(--maincolor-g-light);
  --maindisabledcolor: var(--maindisabledcolor-g-light);
  --mainhovercolor: var(--mainhovercolor-g-light);
  --progressbar: var(--progressbar-g-light);
  --profilebuttonhoverbackgroundcolor: var(--profilebuttonhoverbackgroundcolor-g-light);

  --maindisabledhovercolor: var(--maindisabledhovercolor-g-light);
}

:root[data-color="b"] {


  --mainactivecolor:var(--mainactivecolor-b-light);

  --secondarybuttoncolor: var(--secondarybuttoncolor-b-light);
  --maincolor: var(--maincolor-b-light);
  --maindisabledcolor: var(--maindisabledcolor-b-light);
  --mainhovercolor: var(--mainhovercolor-b-light);
  --progressbar: var(--progressbar-b-light);
  --profilebuttonhoverbackgroundcolor: var(--profilebuttonhoverbackgroundcolor-b-light);

  --maindisabledhovercolor: var(--maindisabledhovercolor-b-light);
}


:root {




  --floatingButtonBackgroundColor:#0000001c ;

  
  --switchToggleLabel-PersonalityPage : rgb(57, 57, 57);
  
  





  --settingVerificationBox: rgb(245 245 245);





  --chosenCharacterButtonColor:#333333;
  
   --chosenCharacterButtonBackgroundColor: #e0e0e0 ;
  
--choosebackgroundcolor:#dfdfdf;
  
  
  --switchButtonBackgroundColor: #ccc;


  --textSelectionBackgroundColor:#d8d8d8b1 ;



--prgressBarDefaultBackgroundColor: #e1e1e1;



  --textSelectionFontColor: rgb(92, 92, 92);


  --whisperButtonBorderColorNotHome: #dddddd;
  --whisperButtonBackgroundColorNotHome : var(--disabledbuttonfontcolor);


  
  --redDot: #ff3366;

  --lightborderTextareaBoxColor:rgb(236 236 236);

    --NotificationEmptyPlaceholder :#67676785;

   --lightbuttonhoverinhoverbox:  rgb(208, 208, 208);

  --bigChosenButtonBackgroundColor:#ebebeb73;
  
  --disabledbuttonfontcolor:#ececec;



  --personalityVoteColorInCharacter:rgb(127 127 127);

  --windowTopBarBottomColor:rgb(218, 217, 217);
  
  --blockquotebordercolor:#dddddd;
  
  --profilebuttonhoverbordercolor:#d5d7e1;

  --chosenMarketingButtonColor:  rgb(229 229 229);

  --unifiedBluringPx:28px;

  --searchIconColor:gray;


  --quotecontentbackgroundcolor: rgba(223, 223, 223, 0.669);

  --glassmaterialtopbarboxshadow:0px 0px 1px 0px rgb(151 151 151 / 60%);

  --dragindicatorbackgroundcolor:#b5b5b5;

  --arrowbuttonbackgroundcolor: #c9c9c9;     
  
  --arrowbuttoncolor: #727272;;   
  
  --chosenFunctionSubTitlecolor: #7a7a7a;


--hightlightmobilecolor : #00000035;


  
  --groupmemberavatarboxbackgroundcolor: #dbdbdb;
  
  --personalityoptionfontcolor:#a8a8a8;                    

  --characterpreviewboxhighlighthoverbackgroundcolor-userprofile:rgb(226,226,226);

  
  --quotecontentborderhovercolor:#ffffff;

  --characterpreviewboxhoverbackgroundcolor-userprofile:rgb(216, 216, 216);

  --tagcolor:#929292;

  --nextpagequestion:var(--backtothetopcolor);

  --testquestionalertboxcolor:rgb(224, 224, 224);

   --relationshipeditboxhoverbackgroundcolor:#d8d8d8;
   
   --relationshipeditboxchangeobjectbuttoncolor:rgb(119, 119, 119);

  --dotestbackground: #020017;

  --userPageVoteCardProfileImageSkeleton:   #e7e7e7;

  --quoteborder: #dddddd;

  --commonbordercolor: #dadada;


  --menubuttonbackgroundcolor: #ebebeb73;

  --createCharacterCatergoryChosenColor:#c2c2c2;

  --charactewrfiltertagcolor:#b4b4b4;

  --charactewrfilterarrowcolor:#d1d1d1;

  --hrfirsthover:#b9b9b9;

   --hrfirsthoverbuttontext:#2d2d2d;

   --voteoptionscardboxshadow:#c4c4c482;

  --resultpreviewfunctionnamecolor: rgb(163, 163, 164);

 --contentboxhoverbordercolor:rgba(218, 218, 218, 0.495);

 --linkcolor:#939393;

 --linkIconColor:#828282;
  
  --filledtimelinebarcolor:#90909069;

  --lightbuttonhovercolorsecondarybackground:rgba(12, 37, 87, 0.18);
  


  --drawerunitunderline:rgb(209, 209, 209);

  --unfilledtimelinebarcolor:#0000000a;

  --characterprofiletagkeycolor:#b0b0b0;

  --firsthovervotemainpagebuttoncolor:#dddddd;

  --secondhovervotemainpagebuttoncolor:#bbbbbb;

  --activatedmaincolor:#9bbcff;

  --clickpageactivebackgroundcolor : #f1f1f1;

  --cardinfoboxhovercolor:#c4c4c4;



--whisperButtonBorderHoverColorNotHome: rgb(237, 237, 237) ;

  --personalityinteractioncardtitlecolor:#545454;

  --sidetitlecolor-disabled:#c5c5c5;

  --eightfunction-profile-title:rgb(97, 97, 97);

  --verifyfontcolor:#565656;

  --verifybackgroundcolor:#e1e1e1;
  
  --bottominformationcolor-login:#bfc6cf;

  --bottominformationcolor:rgb(163, 163, 164);


    --ctcWindowBoxShadowColor : rgb(123 123 123 / 18%);

  --ctcWindowBorderColor:  rgb(229, 229, 229);

  --glassMorphismWindowBorderColor:  rgb(229, 229, 229);




  --inputplaceholderfontcolor:#c5c5c5;
  
  --logininputborderline:#bcbcbc;

  --secondarysearchbarbackgroundcolor : rgb(220 220 220);
  
  /* --tooltipbackgroundcolor:#dcdcdc; */

  --tooltipbackgroundcolor:rgba(122, 122, 122, 0.216);
  --tooltipcolor:#7d7f84;

  --hr:rgb(224, 224, 224);

  --clickbackgroundhoversencondarybuttonhover:rgb(189, 191, 203);

  --chosevotetagbackgroundcolor:rgb(229 229 229);

  --clickbackgroundhoversencondarybutton:rgb(201, 204, 217);

  --sideboxicon:#868686;

  --logofonthovercolor:#8c8c8c;



  --transitiontime:0.7s;


  --transitiontimeSlow:2s;

  --transitionanimation:ease;

  
--boxCardBeforeLoadedBackgroundColor: #fafafa;

  --textareabottomcolor:#d5d5d5;
  
    --maincolor: #6760AB; 
    
    --maincolorReverse: #659dff; 

       --unobviousbuttonfontcolorhover:#333333;

           --logofontcolor:#0e0e0e;

           --unobviousboxshadow: #c9c9c9af;
           
--searchbarbordercolor:#00000052;

--maindisabledcolor:#6760ab42;

--loginPicTitleColor:#747474;

   --backtothetopbackground:#dddddd;

   --backtothetopcolor:#999999;

    --mainhovercolor: #a9a4d5;

    --mainfontactivecolor: #9b9b9bbb;

    --mainfontcolor: #333333;

    --mainfontcolor-fade: #33333379;
    
    --recordborder:#666666;

    --loginFormButton-double-shadow:#c5cde0;

    --lightinformation: rgb(163, 163, 164);

    --backgroundcolor: #f5f5f5;

    --contentbackgroundcolor: #ffffff;

    --clickablebackgroundcolor: #f3f3f3;

    --primaryhoverclickablebackgroundcolor :#ececec;


    --eightfunction-profile-title-hover:#d2d2d2;

    --secondaryhoverclickablebackgroundcolor:rgb(89 89 89);
    
   --mainbuttonfontcolor: #ffffff;

   --unselectedfontcolor:rgb(112 112 112);
   
   --sidetitlecolor:#9e9e9e;

   --contentfontcolor: rgb(94, 94, 94);

   --unobviousbuttoncolor:#ffffff;

 --mandalaicon :  url('/image/MandalaIcon-Light.svg');

   --secondaryhovercolor:rgb(228, 228, 228);

   --unobviousbuttoncolorhover:#efefef;
  

   --charactersearchbordercolor:rgba(135, 135, 135, 0.23);

   --countaghover:rgb(206, 207, 213);

   --searchbarbackgroundcolor: rgb(64 64 64 / 2%);;;
   
   --counttag:#dcdde1;

   --topbarboxshadow:rgb(218, 217, 217);

   --contentboxboxshadow:rgb(216 216 216);


   --whitebackgroundconnectionbordercolor:#d2d2d2;
    
   
   --switchbar:#e7e7e7;


  --securitySheildColor: #3da229;
  
   --menufontcolor:#737373;
  
   --floatwindowboreder:rgb(229, 229, 229);

   --imagebordercolor:#efefef;

   --discovergrouprecentpostbackgroundcolor:rgb(244, 244, 244);
   
   --unavaliablebuttonbackground:#dedede;

   --unavaliablebuttonfontcolor:#a8a8a8;

   
   --unobviousbuttonfontcolor:#333333;

   
  --skeletonprogressbarcolorone:#f2f2f2;
  --skeletonprogressbarcolortwo:#e6e6e6;


  --homebuttonbackgroundcolorone: rgb(241 241 241);
  
  --homebuttonbackgroundcolortwo: rgb(241 241 241);
  
  --homebuttonbackgroundcolorthree:rgb(241 241 241);
  
  --homebuttonbackgroundcolorfour:rgb(241 241 241);


  
  --homebuttoniconcolorone:var(--maincolor);
  
  --homebuttoniconcolortwo:var(--maincolor);
  
  /* #ff7244;
   */
  --homebuttoniconcolorthree:var(--maincolor); 
  
  /* #22ccaa;
   */
  --homebuttoniconcolorfour:var(--maincolor); 
  


 
  --maindisabledhovercolor-r-light: #92545430;
  --maindisabledhovercolor-g-light: #3b818330;
  --maindisabledhovercolor-b-light: #2c529d30;
  --maindisabledhovercolor-y-light: #97927530;

  --maindisabledhovercolor-p-light: #6760ab30;

  --maindisabledhovercolor-brw-light : #78726c30;
  
  --homebuttoniconhovercolorone: #ff9ea4;
  
  --homebuttoniconhovercolortwo:#ffbd9a;

  --homebuttoniconhovercolorthree: #7be3e1;


  --homebuttoniconhovercolorfour:#a37bff;



  
  --homebuttonbackgroundhovercolorone:rgb(224, 224, 230);
  
  --homebuttonbackgroundhovercolortwo:rgb(224, 224, 230);
  
  --homebuttonbackgroundhovercolorthree:rgb(224, 224, 230);;
  
  --homebuttonbackgroundhovercolorfour:rgb(224, 224, 230);
   
  --generaliconcolorHome:#393939;

  --generaliconcolor:#575757;

  transition: background-color 111s ease, color 111s ease;

  --secondaryclickbackgroundhovercolor:#dddfe4;


  
  --discussingrecommendpostcolor:rgb(96, 96, 96);


  --switchbarbutton:#d7d7d7;

  --successtoastbackgroundcolor:#ffffff;

  --errortoastbackgroundcolor:#ffffff;

  --successtoastfontcolor:var(--maincolor-g-light);

  --errortoastfontcolor:var(--maincolor-r-light);

  --floatwindowborder:rgb(234, 234, 234);

  --discussingrecommendpostauthorcolor:#9b9b9b;

  --grayborderbuttonhovercolor:rgb(169, 169, 169);

  --graybuttonhoverbackgroundcolor:#dfdfdf;

  --graybuttonbackgroundcolor:#f0f0f0;

  --radiobordercolor:#b5b5b5;

  --charactersubtitlecolor: #4d4d4d;

  --elplaceholderfontcolor:   #a9a9a9;

  --glassmaterialcontentbackground : #ffffffbd !important;;

  --glassmaterialreadabledisabledtextcolor:#c5c5c5;

  --obviousboxshadow:#9f9f9f82;

  
  --glassmaterialcontentbackgroundNavigationbar: rgb(255 255 255 / 73%) !important;

  --glassmaterialchosenbackgroundcolor: #7b7b7b30;

  --glassmaterialsearchbarbackgroundcolor:#7474741f;

  --glassmaterialsearchbarsubbackgroundcolor: rgb(0 0 0 / 7%);

  --glassmaterialcontentbackgroundNavigationbarbordercolor : rgba(211, 211, 211, 0.27);
  
  --emptyplaceholdercolor:#a8a8a8a2;
  
  --listitemfontcolor:#717171;

  --glassmaterialbuttonbackgroundcolor:#b9b9b93b;

  --searchbarplaceholderfontcolor :  #c5c5c5 ;


  --unfollowingbuttonbackgroundcolor: #e5e5e5;

  --unfollowingbuttoncolor: #bdbdbd ; 
  
  }   



    /* 白天模式 */




:root[data-theme="dark"] {

 --testAllCharacterTitleBackgroundColor:rgb(9 9 9);

  --mainactivecolor-r-dark : #ff3957d0;
  --mainactivecolor-g-dark : #40f5b3d0;
  --mainactivecolor-b-dark : #5e8ae1d0;
  
  --mainactivecolor-y-dark:#cfa758;

  --mainactivecolor-brw-dark:#d88c59; 

  --progressbar-b-dark:#ccddff;
  --progressbar-g-dark:#96abaa;
  --progressbar-r-dark:#c08181;
  --progressbar-y-dark:#d3be92; 
  --progressbar-p-dark:#ded5ff;
    
  --progressbar-brw-dark:#887871; 

  --mainhovercolor-brw-dark:#917a6a; 
  
  --importantInformation: rgb(91, 91, 91);
  
  --maincolor-r: #a95959;
  --maincolor-g: #579ea0;
  --maincolor-b: #659dff;

  --maincolor-brw:#907968; 

  --maincolor-p: #8677FF;

  /* 夜间禁用色 */
  --maindisabledcolor-r: #f73c3c7a;
  --maindisabledcolor-g: #009499;
  --maindisabledcolor-b: #659dff42;
  --maindisabledcolor-y:#d7c06342; 
  --maindisabledcolor-p: #8677ff42;

  --maindisabledcolor-brw:#97898242; 


  /* 夜间漂浮色 */
  --mainhovercolor-r: #e24f4f;
  --mainhovercolor-g: rgb(134 210 213);
  --mainhovercolor-b: #7fa5ef;


  --mainactivecolor-r:#ff3957d0;
  --mainactivecolor-g:#40f5b3d0;
  --mainactivecolor-b:#5e8ae1d0;;

  --mainactivecolor-p-dark:#625ee1d0;;

  --mainactivecolor-p:#625ee1d0;;

  /* 夜间主色 */
  --maincolor-r-dark: #a95959;
  --maincolor-g-dark: #579ea0;
  --maincolor-b-dark: #659dff;
  --maincolor-y-dark:#b29b6d; 
  --maincolor-p-dark: #8677ff;

  --maincolor-brw-dark:#907968; 

  --maindisabledcolor-y:#d7c06342; 

  --maindisabledhovercolor-r-dark: #a9595930;
  --maindisabledhovercolor-g-dark: #579ea030;
  --maindisabledhovercolor-b-dark: #659dff30;
  --maindisabledhovercolor-y-dark: #b29b6d30;

  --maindisabledhovercolor-p-dark: #8677ff30;

  --maindisabledcolor-p-dark: #90796830;


  /* 夜间禁用色 */
  --maindisabledcolor-r-dark: #a9595958;
  --maindisabledcolor-g-dark: #2d555694;
  --maindisabledcolor-b-dark: #659dff42;
  --maindisabledcolor-y-dark:#d7c06342; 
  --maindisabledcolor-p-dark: #8677ff42;


  --maindisabledcolor-brw:#97898252; 

  --maindisabledcolor-brw-dark:#97898242; 
  
  /* 夜间漂浮色 */
  --mainhovercolor-r-dark: #a27279;
  --mainhovercolor-g-dark: rgb(134 210 213);
  --mainhovercolor-b-dark: #8fb9ff;
  --mainhovercolor-y-dark:#cfc28f; 
  --mainhovercolor-p-dark:  #afa5ff;

  --mainhovercolor-brw-dark:#b29a89; 
  
  
  --searchbarplaceholderfontcolor :  #747474 ;

  --profilebuttonhoverbordercolor:#5a5a5a;

  --profilebuttonhoverbackgroundcolor:#5a5a5a;

  --characterpreviewboxhighlighthoverbackgroundcolor-userprofile:#363636;


  --characterpreviewboxhoverbackgroundcolor-userprofile:rgb(37,37,37);


  --unifiedBluringPx:28px;

  --listitemfontcolor:#8c8c8c;

  --emptyplaceholdercolor:#70707085;


  --glassmaterialsearchbarsubbackgroundcolor: rgb(32 32 32 / 23%);

  
  --glassmaterialcontentbackgroundNavigationbarbordercolor :rgb(0 0 0 / 17%);

  --glassmaterialsearchbarbackgroundcolor:#00000050;

  --glassmaterialchosenbackgroundcolor: #ffffff30;

  --glassmaterialcontentbackgroundNavigationbar: rgb(62 62 62 /  88%) !important;

  --dragindicatorbackgroundcolor:#747474;

  --glassmaterialreadabledisabledtextcolor:#545454;

  --glassmaterialcontentbackground: rgb(44 44 44/ 88%) !important ;

  --elplaceholderfontcolor:   #5e5e5e;
  
  --charactersubtitlecolor:  #818181;
  --radiobordercolor:#696969;

  --graybuttonbackgroundcolor:#484848;

  --graybuttonhoverbackgroundcolor:#696969;

  --arrowbuttonbackgroundcolor: #606060;    
  
  --arrowbuttoncolor: #1e1e1e;   
                                                                

  --prgressBarDefaultBackgroundColor: #414141;
  
  --testquestionalertboxcolor:rgb(91, 91, 91);
  
  
  --relationshipeditboxhoverbackgroundcolor:#5a5a5a;
   
  --relationshipeditboxchangeobjectbuttoncolor:#b3b3b3;

  
  --quoteborder: #5f5f5f;
  
  --hrfirsthover:#737373;

  --hrfirsthoverbuttontext:#d9d9d9;

  --choosePersonalityBox:#bababa33;

  --commonbordercolor:#4c4c4c;

  --createCharacterCatergoryChosenColor:#2a2a2a;


  --contentboxhoverbordercolor:rgb(29, 29, 29);
  
  --charactewrfiltertagcolor:#666666;

  --charactewrfilterarrowcolor:#666666;


  --filledtimelinebarcolor:#c4c4c46b;

  
  --unfilledtimelinebarcolor:rgba(32, 32, 32, 0.199);

  --characterprofiletagkeycolor:#797979;

  --grayborderbuttonhovercolor:rgb(255, 255, 255);

  
  --firsthovervotemainpagebuttoncolor:#5c5c5c;

  --secondhovervotemainpagebuttoncolor:#707070;

  --personalityinteractioncardtitlecolor:rgb(116 116 116);

  --secondarysearchbarbackgroundcolor : rgb(57, 57, 57);
  
  --clickbackgroundhoversencondarybuttonhover:rgb(109, 109, 109);

  --clickbackgroundhoversencondarybutton:rgb(95, 95, 95);

  --graybuttonhoverbackgroundcolor:#696969;
  
  --logofonthovercolor:rgb(234, 234, 234);
  
  --sidetitlecolor:#7d7d7d;

  --secondaryhoverclickablebackgroundcolor:rgb(89 89 89);

  --countaghover:rgb(106, 106, 106);

  --unselectedfontcolor:rgb(112 112 112);
  
--searchbarbordercolor:#0000006e;

  transition: background-color 111s ease, color 111s ease;

  --maincolor: #659dff; 

        
    --maincolorReverse: #2c529d; 
    
   --backtothetopbackground:#777777;

   --backtothetopcolor:#1c140d;

    --logofontcolor:#cdcdcd;

    --mainhovercolor: #7fa5ef;
    
   

    --mainfontactivecolor: #606060d0;

    --mainfontcolor: #cdcdcd;

    --mainfontcolor-fade: #cdcdcd79;

    --lightinformation: rgb(167, 167, 167);

    --backgroundcolor: #272727;

    --contentbackgroundcolor: #343434;

    --clickablebackgroundcolor: #414141;

    --primaryhoverclickablebackgroundcolor :#484848;

   --mainbuttonfontcolor: #e8e8e8;

   --unobviousboxshadow: #2b2b2b;
   
   --contentfontcolor: #bdbdbd;

   --unobviousbuttoncolor:#343434;

   --unobviousbuttonfontcolor:#e8e8e8;

   --unobviousbuttonfontcolorhover:#c2c2c2;

   --secondaryhovercolor:rgb(90, 90, 90);

   --secondarybuttoncolor:rgb(65, 65, 65);

   --unobviousbuttoncolorhover:#434343;



   

   --NotificationEmptyPlaceholder :#9b9b9b85;

   --searchbarbackgroundcolor: rgba(0, 0, 0, 0.185);;;

   --counttag:#4d4d4d;

   --topbarboxshadow: rgb(0, 0, 0);

   --contentboxboxshadow:  rgb(0, 0, 0);

   --switchbar:#3b3b3b;

   --menufontcolor:#c2c2c2;

   --floatwindowborder:rgb(36, 36, 36);

   --imagebordercolor:#252525;

   --discovergrouprecentpostbackgroundcolor:#414141;

   --unavaliablebuttonbackground:#2b2b2b;

   --unavaliablebuttonfontcolor:#606060;

   

  --chosenMarketingButtonColor: #5c5c5c;

  --skeletonprogressbarcolorone:#4b4b4b;
  --skeletonprogressbarcolortwo:rgb(63, 63, 63);


  --homebuttonbackgroundcolorone: #474747;
  
  --homebuttonbackgroundcolortwo: #474747;
  
  --homebuttonbackgroundcolorthree:#474747;
  
  --homebuttonbackgroundcolorfour:#474747;

  --glassmaterialtopbarboxshadow:0px 0px 1px 0px  rgb(0 0 0);

  --chosenFunctionSubTitlecolor: #a7a7a7;

  --loginPicTitleColor:#a7a7a7;

    --absoluteBWColor:#ffffff;
  
  --homebuttoniconcolorone:var(--maincolor);
/* 
  #ff5582 */
  
  --homebuttoniconcolortwo: var(--maincolor);

  /* #ff6944;
   */
  --homebuttoniconcolorthree: var(--maincolor);
  
  /* #22a8cc; */
  
  --homebuttoniconcolorfour: var(--maincolor);
/* 
  #ac5aff; */

  
  --userPageVoteCardProfileImageSkeleton:  #4d4d4d;

  --obviousboxshadow:#191919;

  --securitySheildColor: #8ab581;
  
  --sidetitlecolor-disabled:#545454;
  
  --homebuttoniconhovercolorone:  var(--mainhovercolor);
  
  /* #ff9ea4; */
  
  --homebuttoniconhovercolortwo: var(--mainhovercolor);
/*   
  
  #ffb09a; */

  --homebuttoniconhovercolorthree: var(--mainhovercolor); 
  
  /* #7be3b9; */

  --hightlightmobilecolor : #ffffff35;

  --floatingButtonBackgroundColor: #1e1e1e87;

  --homebuttoniconhovercolorfour:var(--mainhovercolor);  
  
  /* #c67bff; */


  --choosebackgroundcolor : var(--clickablebackgroundcolor);

  --charactersearchbordercolor:rgb(255 255 255 / 23%);


  --disabledbuttonfontcolor:#6e6e6e;

  --homebuttonbackgroundhovercolorone:#5c5c5c;
  
  --homebuttonbackgroundhovercolortwo:#5c5c5c;
  
  --homebuttonbackgroundhovercolorthree:#5c5c5c;
  
  --homebuttonbackgroundhovercolorfour:#5c5c5c;


  --ctcWindowBoxShadowColor : #1e1e1e;

  --ctcWindowBorderColor:  rgb(71 70 70) ;

  --glassMorphismWindowBorderColor:  rgb(71 70 70) ;

  
  --generaliconcolor:#a7a7a7;

  --generaliconcolorHome:#a7a7a7;


  --secondaryclickbackgroundhovercolor:#393939;


  --discussingrecommendpostcolor:rgb(129, 129, 129);

  --switchbarbutton:rgb(55 55 55);

  --successtoastbackgroundcolor:#343434;

  --drawerunitunderline:rgb(73 73 73);
  
  --errortoastbackgroundcolor:#343434;



  --loginFormButton-double-shadow:#0c0c0c;
  


  --successtoastfontcolor:var(--maincolor-g-dark);

  --errortoastfontcolor:var(--maincolor-r-dark);


  --marketingInfoBar: #303030;

  --sideboxicon:#7d7d7d;

  --resultpreviewfunctionnamecolor: rgb(153, 153, 153);
  
  --hr:rgb(72 72 72) !important;

  --eightfunction-profile-title:#c4c4c4;

  --eightfunction-profile-title-hover:#686868;
  
  --tooltipbackgroundcolor:#17171775;

  --tooltipcolor:#a2a2a2;

  --discussingrecommendpostauthorcolor:#606060;

  --logininputborderline:#494949;

  
  --dotestbackground: rgb(27 27 27);
  
  
  --inputplaceholderfontcolor:#686868;

  
  --bottominformationcolor-login:rgb(92, 92, 101);

  --bottominformationcolor:rgb(93, 93, 93);

  --maindisabledcolor:#659dff42;
  
 --linkcolor:#999999;

  --verifyfontcolor:#d2d2d2;

  --mandalaicon :  url('/image/MandalaIcon.svg');

  --verifybackgroundcolor:#505050;
  
  --textareabottomcolor:#545454;

  --cardinfoboxhovercolor:#dcdcdc;

  --clickpageactivebackgroundcolor : #3e3e3e;
  
  --activatedmaincolor:#b1cbff;

  --recordborder:#999999;

  --nextpagequestion:#6c6c6c;

  --voteoptionscardboxshadow:#232323cc;

  --tagcolor:#6a6a6a;

  --personalityoptionfontcolor:#848484;

   --searchIconColor:gray;

   
  --appbutton:rgba(0, 0, 0, 0.07);

   --glassmaterialbuttonbackgroundcolor:#00000033;

   --windowTopBarBottomColor:rgb(80 80 80);

  --chosevotetagbackgroundcolor:rgb(62, 62, 62);
  
  --lightbuttonhovercolorsecondarybackground:rgba(37, 37, 37, 0.651);

  --blockquotebordercolor:#5b5b5b;

  --chosenCharacterButtonBackgroundColor: #595959;

  --unfollowingbuttonbackgroundcolor: #323232;

  --unfollowingbuttoncolor: #706e6e ; 
  
  --quotecontentbackgroundcolor:  rgb(93 93 93 / 67%);

  --quotecontentborderhovercolor: #353535;

  --menubuttonbackgroundcolor: #52525273;


  --bigChosenButtonBackgroundColor:#434343;
  
  
  --personalityVoteColorInCharacter:rgb(218, 218, 218);
  
  --linkIconColor:rgb(136 135 135);

  --lightbuttonhoverinhoverbox:  rgb(113, 113, 113);
  
  --groupmemberavatarboxbackgroundcolor: #595959;

    --whisperButtonBackgroundColorNotHome : var(--clickablebackgroundcolor);

    --whisperButtonBorderColorNotHome:   #575757;


    --settingVerificationBox: rgb(46 46 46);

   
    --chosenCharacterButtonColor:#cdcdcd;


--whisperButtonBorderHoverColorNotHome:rgb(71, 71, 71);

  --redDot: #ff3366;
  
--boxCardBeforeLoadedBackgroundColor: #3a3a3a;

  --lightborderTextareaBoxColor: rgb(37, 37, 37);



  --textSelectionBackgroundColor: #4e4e4eb1;

  --textSelectionFontColor: rgb(210, 210, 210);
  
  
  --switchButtonBackgroundColor: #1d1d1d;

    
  --switchToggleLabel-PersonalityPage :   rgb(255, 255, 255);

  --whitebackgroundconnectionbordercolor:#313131;
  
 
  } 



  :root[data-theme="dark"] {
    /* 默认夜间模式颜色使用蓝色 */
    --maincolor: var(--maincolor-p-dark);
    --maindisabledcolor: var(--maindisabledcolor-p-dark);
    --mainhovercolor: var(--mainhovercolor-p-dark);
}

:root[data-theme="light"] {
    /* 默认日间模式颜色使用蓝色 */
    --maincolor: var(--maincolor-p-light);
    --maindisabledcolor: var(--maindisabledcolor-p-light);
    --mainhovercolor: var(--mainhovercolor-p-light);
}


.ChangeColorBoxSet, .changeRemarkBox{

  width: 690px;
  transform: translate(-50%, -50%);
  top: 50%;
  height: 285.944px;
  left: 50%;
  box-shadow: none;
  backdrop-filter: none;
  background-color: var(--contentbackgroundcolor) !important;
  display: block;

  opacity: 1;
  padding-top: 30px;
  z-index: 111111;
  position: fixed;
  border-radius: 10px;

}



.changeRemarkBox{height: 260px !important;}

.ChangeColorBoxFont{

display: block;

font-size: 30px;
text-align: center;

margin-bottom: 40px;

color: var(--mainfontcolor);


}


  

.ChangeColorBoxSubFont{

  font-size: 15px;
  




}

.ChangeColorBox{}

.homeButtonTestPageStroke{stroke: var(--mainfontcolor)}

.homeButtonTestPageFill{fill: var(--mainfontcolor);}


  /* 夜间模式 */

  .transparenthover:hover{background-color: #24242433 !important; box-shadow: none; border: none;}

  
  .logoboxwhite:hover .personalogo-font-test1 path{ fill:#d3d3d3 !important;; transition: 0.3s;}


  .logoboxwhite:hover .personalogo-font-test2 path{ fill:#d3d3d3 !important; transition: 0.3s;  } 
  

  .logoboxwhite:hover .personalogo-font-test2 circle{ fill:#d3d3d3!important; transition: 0.3s;  }

    .logoboxwhite .personalogo-font-test2 path{ transition: 0.3s;}

    .logoboxwhite .personalogo-font-test2 circle{ transition: 0.3s;}
  
  .logobox .personalogo-font-test2 path{ transition: 0.3s;}

  .personalogo-font-test2 circle{ transition: 0.3s !important;}

  .logobox:hover .personalogo-font-test1 path{ fill:var(--logofonthovercolor)  !important;; transition: 0.3s;}


  .logobox:hover .personalogo-font-test2 path{ fill:var(--mainhovercolor) !important; transition: 0.3s;  } 
  
    .logobox:hover .personalogo-font-test2 circle{ fill:var(--mainhovercolor) !important; transition: 0.3s;  } 
  

  .logobox:hover .personalogo-font-test2 path:nth-child(2){ stroke:var(--mainhovercolor) !important; transition: 0.3s;  }

 
  .logobox:hover .personalogo-font path{ fill:var(--logofonthovercolor); transition: 0.3s;}

  
  .logobox:hover .personalogoimage-login path{ fill:var(--mainhovercolor); transition: 0.3s;  } 
  
  .logobox:hover .personalogoimage-login circle{ fill:var(--mainhovercolor); transition: 0.3s;  }


  
  .logobox .personalogo-font path{ transition: 0.3s;}
  
 .logobox .personalogoimage-login circle{ transition: 0.3s;}

  
  .logobox .personalogoimage-login path:nth-child(1){  transition: 0.3s;  } 
  
  .logobox .personalogoimage-login path:nth-child(2){  transition: 0.3s;  }


    
.personalogo-single:hover path{ fill:var(--mainhovercolor); transition: 1.3s;  } 
  
.personalogo-single:hover  circle{ fill:var(--mainhovercolor); transition: 1.3s;  }


.personalogo-single:hover{cursor: pointer; }

.mandala::before {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  background: var(--mandalaicon) no-repeat center center;
  background-size: contain;

  
  animation: spin 1s linear infinite;
}

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