/* ---------------     TWO  SECtions   SIDE  by  Side        -------------- */
html{box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit}



/*   ---------------   REMOVE   SCREEN  's   BORders      --------------  */ 
/* html{
  -ms-text-size-adjust:100%;
  -webkit-text-size-adjust:100%
} */

html{
  -ms-text-size-adjust : none ;  
                      /*-ms-text-size-adjust : 100%; */  
  -webkit-text-size-adjust : none ;   
                      /*  -webkit-text-size-adjust : 100% ;  */   
}

body{margin:0  ;   
      text-size-adjust : 100% ;   font-size-adjust : 100% ;  
}   



html,body{font-family:Verdana,sans-serif;font-size:15px;
  line-height:1.5
}
/* html{overflow-x:hidden} */



:root { 
  --backgroundColor: rgba(204, 232, 207 , 0.9) ;
  --mainColor: purple ; 

  --purpleBackground : rgb(161, 83, 180);

  --hoverLightBlue : rgb(102, 81, 224)  ; 
  --cardBackgroundColor: rgb(215, 189, 223) ; 
  --hoverWhiteText: white ; 
  --filterAreaBackground : rgb(227, 237, 205); 
  --reallyLightPurple :   rgb(202,157,205)  ;   /*  rgb(226, 207, 235) ;  */  
  --filterHoverBackground : rgb(198,146,204) ; 
  --pageHoverBackground : rgb(217,189,240) ;  
  --citySelectorBackground :  rgb(212, 192, 224) ;   /*  rgb(227, 221, 255) ; */    /*  */   
  --searchHoverBackground : rgb(160, 76, 160) ;   /* rgb(227,225,236) ; */ 

  --navBarBackground : rgb(183,161,225) ;  /*  #b7a1e1  */    /*  rgb(197, 207, 204);   */
  --navHoverBackground : rgb(175,147,198) ;  /* #af93c6 */  

  --superLightPurple : #e0c6ed ;  
  --textareaOutlineColor :  rgba(128, 0, 128 , 0.6 ) ;     
  /*    OUTLine  :   TExtARE   &&   INPUT 's   INNer_BORDer   WHen   FOCUSed       */  

  --textareaBackgroundColor :  rgb(255, 255, 232) ;   /*  rgb(250, 249, 222) ;  */   /*   杏仁黄    lightYellowBackGroundColor  */   

  --chatterListBackgroundColor : rgb(255, 255, 240) ;   /*   杏仁黄    lightYellowBackGroundColor  */   
  
  --formInputBackgroundColor :  rgb( 225, 209, 240 ) ; /*  rgb(227, 221, 255) ; */  /* rgb(232, 240, 253) ;  */  /*  */   /* lightyellow ; */    /*   */    
  --formInputTextColor :  purple ;    
  --formInputFontSize :  18px ;    
  --formInputTitleFontSize :  17px ;    

  /*  
    global . lightGreenBackGroundColor = "rgb(204, 232, 207)";    ////  "rgb(199,237,204)"   ;   

    global . lightPurpleBackGroundColor = "rgb(177,108,226)" ;  ///  "rgb(215, 189, 223)" ;   ////   浅紫  

    global . superlightPurpleBackGroundColor =  "rgb(215, 189, 223)" ;  ///  "#debff1" ;  ///   超浅紫   

    global . lightYellowBackGroundColor = "rgb(250, 249, 222)" ;   ///  杏仁黄   
 */
}

.greenBackground { 
  background-color: var(--backgroundColor) ;  /*rgba(204, 232, 207 , 0.9);*/  /*199, 237, 204) ;   /*204, 232, 207) ;*/
                    /*    rgba   A  for  OPACITY  of  ONLY  BackGround   */
   /* opacity: 0.3;    */   /*   OPACITY   Works  on  EVERYthing  all of its child elements inherit the same transparency  */  
  /* flex: 1 ; */

  padding-bottom : 15px ;   
  padding-top : 5px ;   

  width : 100% ; 
  height : 100% ; 
}




/*     --------------------------------     CHAnge    LOCation    SECtion     ----------------------------------      */


.location { 
   /* position : absolute ;  */
   margin : 5px 0px 3px 5px ; 
   display : inline-block ; 
}

#change_city_button { 
  color : var(--mainColor); 
  font-size : 15px ; 
  font-weight : bold ;  
    
  border : none ; 

  background-color:  inherit ; 

  cursor : pointer  ; 

  /* float : left ; */     
                /*    < BUTton > 's    FLOAT : LEFT     Will   CAUSE      < DIV >   path-links-classlist    can  NOT  VERTically  ALIGN  ,   
                        BECause   FLOAT : LEFT     ADDed   OUTTer  < DIV > 's   Height   AUTO   INCreased      */
} 

#change_city_button:hover { 
   color : var(--hoverLightBlue) ; 
}



#change_city_form { 
  /* float : left ;   */  
    /*   NOT   Needed   any  more ,   BECause   Used    DISPlay :  INLine-BLOCK   to   Let   TWO  2   INLine-BLOCKs   FIT   in   ONE  1  ROW  ;   
                   IF    USe    DISPlay : BLOCK ,   Will   HAve  to   Use   FLOAT : LEFT   to   FIT   2  < DIV > s  in  1  ROW  */
  margin : 0px 30px 0 0px ; 
}

#change_city_form  label { 
  font-size : 15px ; 
  color : purple ; 
}

select { 
  background: var(--citySelectorBackground);
  margin : 0px 0px 0 5px ; 
  font-family: cursive, sans-serif;
  font-size : 14px ; 
  padding : 1px 2px 1px 4px; 

  outline: 0;
      /*    or  ,    If  SELECT  From  DropDown  ,   BORDer   will   BOLD     */
  
  color : var(--mainColor) ; 
  font-weight: bold ;
  border: 1px solid var(--mainColor);
  border-radius: 6px;

  /* width : 90px ;  */

}

.location  button { 
  border-radius : 5px ; 
  border : 1px solid var(--mainColor) ; 
  padding : 3px 10px ; 
  margin : 0 0 0 5px ; 

  font-size: 13px ; 
  font-weight: bold ;
  background-color: inherit ;

  cursor : pointer ; 
}

.location .cancel_button { 
  color : var(--mainColor) ; 
}

.location .confirm_button { 
  color : red ; 

}

/*   Will    REMoveATTRibute ( "disabled" )     if    < SELECT >    is    NOT    DEFAULT   */
.location button:disabled { 
    
    background-color: lightgrey;

    opacity : 0.5 ; 

    cursor : not-allowed ; 
 }

.location button:hover { 
 background-color:  var(--purpleBackground); 
 color : var(--hoverWhiteText); 
}



        /*   ----------------       INStitute_PATH .CSS    Have   CUSTomized     MARGin     &&     DISPlay : BLOCK      ------------------  */
.path-links {

    color : var(--mainColor)  ; 
    font-size: 14px ;
    font-weight: bold; 
    margin: 0 0 0 0 ;
    padding : 0; 

    display :  inline-block ;    
            /*      DISPlay :  INLine-BLOCK   to   Let   TWO  2   INLine-BLOCKs   FIT   in   ONE  1  ROW  ;     */    
    
}

.path-links a { 
    text-decoration: none ;

    color : var(--mainColor)  ; 
    font-size: 14px ;
    font-weight: bold; 
}

.path-links a:hover { 
   color : var(--hoverLightBlue) ; 
}




/*     --------------------------------     SEARCH    BAR    SECtion     ----------------------------------      */

.div_for_modal_extend{
  position :relative ; 
     /* CONTaining   <DIV  class = "div_for_modal_extend" >   Has  to  be   RELATIVE  , or   MODAL  Will  NOT  EXTEND  to  WHOLE  PAGE  */
}

/* .div_for_city_blur {  */
  /* margin-top : 30px ;  */
          /*   NO  Need   Any  more ,  Because   CHAnge   LOCation  DIV   is  NOT   ABSolute  ANY  MORE ,  NO  Need for  Large  margin-TOP  */
  /* display : inline-block ;  */
/* } */


.searchBarSec_center_div { 
  text-align: center ;
  padding : 0 1vw 0 1vw ;   
}

.searchBarSec { 
  padding: 0px 0 10px 0px;
  display: inline-block;

  text-align : center ;   
}

.searchBarSec img {
  max-height : 100px;
  width: auto;
  float: left ; 
  margin : 0 40px 0 20px ; 
}

.searchBarSec .searchBar { 

  /* margin: 30px; */
  padding : 25px 0 0 0 ; 

  display:inline-block;

}

.icon_search_position_span { 
  position : relative ; 
}

.icon_search_position_span i {
  font-size: 20px ; 
  position : absolute ; 

  top : 0px ; 
  left : 8px ; 
}

.searchBarSec .searchInput { 

  max-width: 500px ; 
  width :  calc( ( 100vw - 650px  )  + 500px ) ;        /*  calc( 25vw + 120px )  ;   */   
  /* min-width : 230px ;  */
  height:38px;
  /* padding:9px; */

  border-width: 2px ; 
  border-color: var(--mainColor);
  border-style: solid ;
  border-radius: 10px ;
  
  text-indent:30px;

  outline: 1px solid var(--mainColor);
  box-sizing:content-box;

  /* font:12px/1.5 arial,sans-serif ; */

  font-size: 15px;
  /* font-weight: bold; */
  font-style: bold ;
  font-family: "Times New Roman", Times, serif , "Courier New" ;

  margin : 0 15px 10px 0 ; 
  /* display : inline-block; */
}


.searchBarSec .searchBtn {

  text-decoration: none ;
  background-color: var(--purpleBackground) ;
  color:var(--hoverWhiteText);
  font-size:17px ;
  
  box-shadow:1px 2px 5px 1px rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) ; 

  border : none ; 

  padding : 6px 25px 6px 25px ;
  border-radius: 10px ;

  cursor : pointer ; 
  /* text-align:center; */

  /* justify-self: center; */

  display:inline-block;
}

.searchBarSec .searchBtn:hover {
  /* font-size:18px ;
  padding : 5px 24px 6px 25px ; */
  background-color: var(--searchHoverBackground);
}

.searchBarSec .searchBtn:active { 
    box-shadow : none ; 
}

@media screen and (max-width: 600px) {

  /* .searchBarSec  .searchInput {  
    width : 280px;
  } */

  .searchBarSec .searchBar { 
    padding : 25px 0 0 0 ; 
  }
} 

@media screen and (max-width : 370px ) {

  .searchBarSec  .searchInput {  
    width : 85vw ;   /* 280px; */ 
    margin-right : 0 ; 
  }
}  
/* .searchBarSec .logo-input-container .logo {float:left;width:210px;height:57px;background-size:210px auto} */


/* .logo-input{width:100%;min-width:1190px;padding:20px 0 5px;height:70px;background-color:#fff;font-size:12px} */
/* .logo-input .ad-qrcode{display:inline-block;background:url(//www.dpfile.com/app/pc-common/i/ad-qrcode.gif) no-repeat;width:100px;height:100px;position:relative;right:-15px;top:-10px;background-size:100px auto} */
/* .logo-input .ad-qrcode:hover{background:url(//www.dpfile.com/app/pc-common/i/ad-qrcode.png) no-repeat;background-size:100px auto;cursor:pointer} */

/* 
.logo-input .clearfix{content:"";display:block;clear:both}
.logo-input .Hide{display:none}
.logo-input a{text-decoration:none}
.logo-input .logo-input-container{width:1190px;margin:0 auto}
.logo-input .logo-input-container .logo{background:url(//www.dpfile.com/app/pc-common/i/logo2x.png) no-repeat;float:left;width:210px;height:57px;background-size:210px auto}
.logo-input .logo-input-container .search-bar{position:relative;float:left;margin-left:80px;margin-right:80px;height:75px;max-width:800px}
.logo-input .logo-input-container .search-bar .search-container{position:relative;margin-top:10px}
.logo-input .logo-input-container .search-bar .search-container span{float:left}
.logo-input .logo-input-container .search-bar .search-container .i-search{display:inline-block;width:20px;height:20px;position:absolute;left:10px;top:10px}
.logo-input .logo-input-container .search-bar .search-container input{width:380px;height:14px;padding:9px;border:2px solid #f63;text-indent:22px;outline:0;box-sizing:content-box;font:12px/1.5 arial,sans-serif}
.logo-input .logo-input-container .search-bar .search-container input:focus{outline:0}
.logo-input .logo-input-container .search-bar .search-container input::-webkit-input-placeholder{color:#ccc}
.logo-input .logo-input-container .search-bar .search-container .search-bnt-panel{display:inline-block;position:relative;left:-2px;width:250px}
.logo-input .logo-input-container .search-bar .search-container .search-bnt-panel .search-btn{display:inline-block;padding:10px;height:16px;line-height:16px;width:100px;background-color:#f63;cursor:pointer;text-align:center;color:#fff;font-size:16px}
.logo-input .logo-input-container .search-bar .search-container .search-bnt-panel .search-btn span{font-size:14px;line-height:40px}
.logo-input .logo-input-container .search-bar .search-container .search-bnt-panel .search-btn:hover{opacity:.85}
.logo-input .logo-input-container .search-bar .search-container .search-bnt-panel .search-btn.search-all-bnt{position:relative;padding:9px;background-color:#fff;border:1px solid #ccc;color:#515151;margin-left:5px}
.logo-input .logo-input-container .search-bar .search-container .search-bnt-panel .search-btn.platform-btn{border:1px solid #f63;color:#f63}

.logo-input .logo-input-container .search-bar .hot-search{margin-top:4px;font-size:12px;margin-left:5px;width:600px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;position:relative;top:5px}
.logo-input .logo-input-container .search-bar .hot-search .hot-search-tips{color:#ccc}
.logo-input .logo-input-container .search-bar .hot-search .search-word{padding-right:15px;color:#999}
.logo-input .logo-input-container .search-bar .hot-search .search-word:hover{color:#f63}

.logo-input .logo-input-container .J-operation{display:flex}
.logo-input .logo-input-container .J-operation .J-bonus-small{width:100px;height:100px;position:relative;top:-10px}
.logo-input .logo-input-container .J-operation .J-small-pop{display:flex;align-items:center;cursor:pointer} 
*/






/*     ----------------------------------       CATEgory    LIST    SECtion         --------------------------------------       */



.classType , .locationType {

  margin: 11px  calc( ( 100vw - 1200px ) * 0.015 + 15px )  13px   calc( ( 100vw - 1200px ) * 0.015 + 15px ) ;   
      /*   display:inline-block;   Will   Make  MARGIN   TOP   SHOW    */

  padding :  15px calc( ( 100vw - 1200px ) * 0.01 + 32px )  15px   calc( ( 100vw - 1200px ) * 0.06 + 150px ) ;   
  /*   PADding  -  Left   to  make  contents   to  Right  */

  background-color: var(--filterAreaBackground);

  display:inline-block;
      /*   display:inline-block;   Will   Make  MARGIN   TOP   SHOW    */

  border-radius: 15px;

  position:relative;

  /* line-height:20px; */
}

.classType p , .locationType p {
  color: var(--mainColor);
  font-weight: bold;
  font-size: 16px;
  
  position:absolute;
  top: 0;
  left : calc( ( 100vw - 1200px ) * 0.015 + 20px ) ;   
}

.classType  .classAll , .locationType .locationAll {

  
  position:absolute;
  /* top: 20px; */
  left : calc( ( 100vw - 1200px ) * 0.035 + 80px ) ;
}

.classType .classAll span , .locationType .locationAll span {

  margin : 4px 6px 4px 6px;  
  /* padding : 10px; */
  display: inline-block ;
}

.classType a , .locationType a {
  text-decoration: none;
  color : var(--mainColor) ; 
}

.classType a:hover:not( .more , .curr ) , .locationType a:hover:not( .more , .curr , .locationTabTitle) {
   background-color: var(--filterHoverBackground);
   border-radius: 5px;
   /* color:var(--hoverWhiteText); */

}

.classType span , .locationType span {
  margin: 8px;
  /* font-weight: bold; */

  font-size: 16px;
  /* 15px; */
}

.classType .className { 
  position: relative ; 

  max-height: 70px ; 
  overflow: hidden ;

    line-height: 25px ;      
}

 .locationType .locationName {
    position: relative ; 
 }

.classType .className a , .locationType  .locationName a {
  float:left;
  /* width:80px; */
  
  /* height:20px; */
  /* margin-bottom:5px; */
  margin : 3px calc( ( 100vw - 1200px ) * 0.01 + 25px )  3px 5px  ;
  padding : 2px;

}

.classType .className span , .locationType .locationName span {
  font-size: 15px;
}


.classType .curr , .locationType .curr {
  font-size: 15px;
  color:var(--hoverWhiteText);
  background-color: var(--purpleBackground);
  border-radius: 5px;
}


.more{ 
  position:absolute;
  top:15px;
  right : calc( ( 100vw - 1200px ) * 0.025 + 15px ) ;   
  color:var(--mainColor) ; 
  font-size:15px;

  cursor : pointer ; 
}

.more .fa {
  margin-left: 2px;
  font-size: 12px;
}

.classNameHide {
  display : none;
}

.locationType .locationTabTitle {
   
  color:var(--mainColor) ; 
  font-size: 16px;
  padding : 2px  10px  2px  10px ; 
  /* margin-left: 20px; */
  display:inline-block ;
  border-radius: 5px 5px 0 0 ;
}

.locationType .locationName { 
  display : none;

  background-color: var(--reallyLightPurple); 
  /* border-radius: 0 0 10px 10px ; */
} 

.locationType .locationName:first-child  { 
    border-radius: 0 10px 10px 10px ;
    /* border-top-left-radius : 0 ;   */

}

/* .locationType .locationName:last-child  { 
   border-radius: 10px 10px 10px 10px ;
} */



/* .nav-tabs .tabs:after{clear:both;display:block;height:0;content:'\20'} */

/* .nav-tabs{margin-top:10px} */
/* .nav-tabs .nc-contain{position:relative;top:-8px;left:-20px} */
/* .nav-tabs .tabs{position:relative;z-index:10;line-height:36px;height:36px;overflow:hidden} */
/* .nav-tabs .tabs a{float:left;width:97px} */
/* .nav-tabs .tabs span{margin-left:0;padding:0 20px;border:solid 1px #fff;border-bottom:solid 1px transparent;_border-bottom:none;-o-text-overflow:initial;-o-text-overflow:initial;text-overflow:initial;overflow:initial;white-space:initial} */
.nav-tabs .tabs .curr span{background-color:#fafafa;border-color:#eee;border-bottom-color:#fafafa;color:#f63;height:36px;line-height:36px;-webkit-border-radius:0;border-radius:0}
/* .nav-tabs .nc-items{padding:12px 0 4px} */
.nav-tabs .nc-more{padding-right:50px}
.nav-tabs .nc-more .more{width:64px;top:12px}
.nav-tabs .nc-sub{left:0;top:-1px;border:none;border-top:solid 1px #eee}




.classType .nc-more .more{position:absolute;float:none;right:0;right:-3px;top:0}
.classType .nc-sub{width:776px}
.classType .nc-sub .more{top:12px;right:28px;right:8px;width:84px}
.classType .con .nc-more{width:720px}
.classType #J_nt_items{width:753px}
.classType #J_nt_items .nc-more .more{right:29px;right:26px}
/* .nav-tabs{margin-top:10px}
.nav-tabs .nc-contain{position:relative;top:-8px;left:-20px}
.nav-tabs .tabs{position:relative;z-index:10;line-height:36px;height:36px;overflow:hidden}
.nav-tabs .tabs a{float:left;width:97px}
.nav-tabs .tabs span{margin-left:0;padding:0 20px;border:solid 1px #fff;border-bottom:solid 1px transparent;_border-bottom:none;-o-text-overflow:initial;-o-text-overflow:initial;text-overflow:initial;overflow:initial;white-space:initial}
.nav-tabs .tabs .cur span{background-color:#fafafa;border-color:#eee;border-bottom-color:#fafafa;color:#f63;height:36px;line-height:36px;-webkit-border-radius:0;border-radius:0}
.nav-tabs .con{position:relative;zoom:1;z-index:9;top:-1px;_top:-2px;padding:0 19px;background-color:#f8f8f8;border:solid 1px #f0f0f0}
.nav-tabs .nc-items{padding:12px 0 4px}
.nav-tabs .nc-more{padding-right:50px}
.nav-tabs .nc-more .more{width:64px;top:12px} */

/* @media screen and (max-width: 600px) {

  .more {
    right: -40px; 
  }
} */



.nav-category .nc-items {zoom:1}
.nav-category .nc-items:after {clear:both;display:block;height:0;content:'\20'}
.nav-category span {-o-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.nav-category{position:relative;padding:0 0 10px 155px;line-height:20px}
/* .nav-category a {color:#666} */
/* .nav-category a:hover{color:#f63} */
.nav-category a span{color:#666;cursor:pointer}
/* .nav-category h4{position:absolute;top:0;left:0;font-size:12px;color:#999} */
/* .nav-category .def{position:absolute;left:85px} */
.nav-category span{display:inline-block;display:inline;zoom:1;display:inline;zoom:1;margin-left:-4px;padding:0 4px;max-width:85px}
.nav-category .cur span{background-color:#f63;color:#fff;-webkit-border-radius:2px;border-radius:2px;-webkit-border-radius:10px;border-radius:10px;padding:0 8px;height:20px;line-height:20px}
/* .nav-category .nc-items{position:relative} */
.nav-category .nc-items a{float:left;width:97px;height:20px;margin-bottom:5px}
.nav-category .nc-sub{position:relative;left:-20px;background-color:#fafafa;border:solid 1px #eee;padding:12px 0 4px 19px;width:800px}
.nav-category .nc-more{position:relative;zoom:1;padding-right:50px;height:auto;width:720px;padding-bottom:10px;zoom:1}
.nav-category .nc-more .more{position:absolute;float:none;right:0;right:-3px;top:0}
.nav-category .nc-sub{width:776px}
.nav-category .nc-sub .more{top:12px;right:28px;right:8px;width:84px}
.nav-category .con .nc-more{width:720px}
.nav-category #J_nt_items{width:753px}
.nav-category #J_nt_items .nc-more .more{right:29px;right:26px}




/*     ----------------------------------      INStitution  LIST   /  INSList   SECtion        --------------------------------------       */


.classListContainer {

  list-style-type : none;
  /* list-style-type: none; - Removes the bullets */
  margin: 0 ; 
         /*  60px 0 0 0  ; */
  padding :  0;

}

.add_ins_button_a_outter_div { 

  display : inline-block ;  
  padding-left : 10px  ;  
  padding-right: 10px ;   
  text-align: center  ;  

  width : calc( 100% - 250px ) ;    
  min-width : 200px ; 
  /* margin-top : 7px ;   */

  vertical-align : top ;   

} 


.add_ins_button_a  {  

  display : inline-block  ;   
  text-align: center ;  

  font-size: 18px;
  
  padding : 10px 20px 10px 20px ;  
  /* margin : 6px 0px 6px 0px ;   */
  margin : 0 ; 
  border : 1px solid purple ;  
  border-radius: 10px ; 
  cursor : pointer ; 
  color : purple ; 
  background-color: rgb(200, 167, 231) ;   
  font-weight: bold ; 
  
  width : 80% ;  
  max-width : 200px ;  

  text-decoration : none ;  

  z-index : 5 ; 
}




.container-card-shadow-border { 
  box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) ; 
  border-radius:20px ; 
}

/* .comment-container {  */
.gallery-left-container-classlist {   

  margin : 10px 0.3% 25px 0.5% ; 

  padding : 10px ;  

    width : 78% ;  
    float : left ; 

}

.gallery-right-container-classlist {   

  background-color : var(--filterAreaBackground); 
  /* rgb(215, 189, 223) ;  */  
  /* border-radius : 10px ;  */

  margin : 50px 0.5% 25px 0 ; 

  padding : 5px  1.5% 0 1.5% ;   

    width : 20% ; 

  /* margin-top : 50px ;   margin-left : 12px ;  */
  
}



/*  --------------------------    RESPonsive   ---------------------------   */         


@media only screen and (max-width: 700px) { 

  .gallery-left-container-classlist  {  
      width : 99% ;    
                 /*   To  Auto   SHRink   With   CONTAINing   < DIV > 's   SIZE  */   
  
      /* margin-left : 0.5% ;   */

  }  

  .gallery-right-container-classlist { 
      width : 99% ;  
      /* float : left ;   */
  }

}


@media screen and (max-width: 474px) {

  .add_ins_button_a_outter_div   {  
        width : 100% ;   
  }   

}





.orderingLabel { 
  display : block ;  
  font-size: 14px ;   
  color : purple ;   
  font-weight: bold ;   
  background : var(--citySelectorBackground) ;   

  padding : 3px 10px 3px 30px ;  

  border : 1px solid purple ;   
  border-radius : 8px ;    

  cursor : pointer ;   
}   

.orderDropDownA  { 
    display : block ;    
    color : purple ;   
    font-size : 15px ;   
    text-align : center ;    
    padding : 1px 15px 1px 0  ;   

    cursor : pointer ;  
    text-decoration : none ;      /*     < A >   ONLY   Have   UNderLINE  ____    IF   Has    HREF =     ATTRibute     */       
}   

.activeOrderA  {  
    background-color : purple ; 
    color : white ;   
    /* font-weight: bold ;    */  

    pointer-events : none ;     
    /*  pointer-events : none    to    DISAble   CLICK      */       
}

.orderDropDownA:not( .activeOrderA ):hover { 
    background-color: rgb(240, 236, 198); ;  
    font-weight: bold ;    
}


.classCard {

  background-color: var(--filterAreaBackground) ; /* var(--reallyLightPurple);  /*  */
  margin: 15px 15px ;
  border-radius: 15px;

  /* position:static; */

 
  overflow: auto;     
  /*   to  SHOW   Margins  to   BOTTOM */

  /* display:block; */
  /*   display: INLINE-block      Will  NOT   Put  IMAGE  &&  TEXT  in  SAME  LINE     */


   /*    use  CLEAR :LEFT    to  Make    <LI>   Align   IMAGES  ,  or  IMAGE's  FLOAT   SPACE   Will  Carry  to   Next   <LI>  */
  clear: left;


  position:relative; 
  /*  set     position:relative;    to  have   rightClickable   have   ABSolute  POSItion  ,  
  if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.  

    .classCard  's   position:relative    Will   OVERLap / COVER   NAV  BAR  ,  So  Need  to   z-index: 2    
   MUST   z-index   in  .navList  ,    .navListContainer   NOT  WOrk   
  */
}

.classCard:hover {

  background-color: var( --textareaBackgroundColor ) ;   /*  rgb(240, 236, 198); */   
  /* rgb(234, 234, 239) ;  */
  /* rgb(231, 230, 218); */
 

  
}

.classCard:hover .rightClickable { 

  display: block;
  
}

.classCard a {
  text-decoration: none;
}

.classCard img {
  max-width: 180px;
  height : auto;
  /* border-radius : 15px; */
  
  float:left ; 

  margin: 15px 25px 15px 15px ;


}



.insInfo {

  /* position:relative; */
  float : left ; 
  /* overflow-wrap: break-word ; 
  text-overflow: wrap ;
  overflow: wrap; */

  max-width : calc( 100% - 250px );  
          /*    calc( 100% - 250px );      100%   is   the   PARent 's    WIDTH     */      
  /*    Get  WINDOW   WIdth    :     calc(100vw - 400px  );   OR      calc ( 100%   -400px )    */
}

.insInfo a { 
  font-size: 14px;
  color:var(--mainColor);
  font-weight: bold ;

}

.insInfo a:hover { 

  color: var(--hoverLightBlue);

}


.insTitle p { 

    font-size: 20px;
    font-weight: bold; 
    color :var(--mainColor);
    /* font-family: 'Source Sans Pro', sans-serif; */
    font-family: "Times New Roman", Times, serif , "Courier New" ;
    
    /* margin-top :  20px ; */
    /* margin-bottom :  6px ;  */
    /*    WHY   MARgin   NOT  Working   ?????    */

    margin: 25px 0 0 0 ;
    
    display : inline-block ; 

    /* overflow-wrap: break-word ; 
    text-overflow: wrap ;
    overflow: wrap; */


    /* max-width : 60% ; */
}

.insTitle p:hover { 
  /* color:var(--hoverWhiteText) ; 
  background-color: var(--mainColor);
  border-radius: 5px; */

  /* font-size: 23px; */
  color :var(--hoverLightBlue);
}


.insInfo  >  div { 
  /*   >   MORE  THAN   Sign  :   FIRST-LEVEL   CHild ,   BECause   comment_rating   DIV   NESTing     star_rating   DIV    INSide   */

  padding : 0 0 5px 20px;

}

.insInfo span {
   font-size: 14px;
   color:grey;
   font-weight: bold;
}




@media screen and (max-width: 600px) {

  /*   SMALL   SCREEN   ,   REMove   FLOAT   of   INS  Image  , So  Image  &&  Text  in  2  LINEs  Now */
  .classCard img {
    float: none ; 
  }
  
  .insTitle p {  
      margin-top :  0 ;   
  } 

  .insCoverPic  img {   

      margin-bottom : 5px ;   
  }

  .classType .className a , .locationType  .locationName a {

    margin : 3px  calc( ( 100vw - 1200px ) * 0.02 + 25px )  3px 0px  ;
    padding : 2px;
  }

}

@media screen and (max-width: 750px) {
  .insInfo { 
    max-width : 100% ; 
    float : none ; 
  }
}


/* .comment_rating {

} */

.star_rating {
 
    position : relative ;   

    margin : 0 ;   padding : 0 ;  /* !important    ;   */
}
/*  CAN   position : RELAtive ,  Then  IF   empty_star_icon's   position : ABSolute ,  <text> 's  margin-left : 130px; 
BUT   IF  empty_star_icon's   position : RELAtive,  <text> 's  margin-left : 10px;   Then   NO  Need  position : RELAtive  for  star_rating  
                Can   NOT  width:120px    ,   BECause    <text>  will  be   Pushed   to   NEXT  LINE   */

.star_icon {
    display : inline-block  ; 
    
    padding: 0 ;  /* !important    ;   */
    margin : 0 ;  

    vertical-align: middle ;     /*     vertical-align    for   inline-block      */   

    font-size : 0px ;    /*     to   REMOVE    LITTLE   SPACE   Between   < DIV > 's  CHILD  ELEMs :    font-size:0px;    */      
}

.star_icon  i {  

    font-size: 19px ; 
    -webkit-text-stroke-color: var(--mainColor) ;
    -webkit-text-stroke-width: 1px ; 
    
    display : inline ; 

    padding-left: 2px  ;  padding-right: 2px  ;     margin : 0 ;  
}

.empty_star_icon { 
    /* display : inline-block  ;  padding: 0 ;  */
    position : relative ;   /* left : 0 ; top : 0  */  
}
.empty_star_icon  i { 
    color : var(--reallyLightPurple) ; 
} 

.filled_star_icon { 
    /* width : 50% ;  */   /*   MOVEd  to   CLassLIST .HTML   INLine  CSS   */
    overflow: hidden ; 
    white-space: nowrap ;      /*      white-space: nowrap    to  Make    OVerFLow : HIDden   WORK    */  

    position : absolute ; left : 0 ; top : 0  ;  

}
.filled_star_icon  i  { 
    color : yellow ; 
}

.star_rating  text {  
    margin-left : 20px ;  margin-right : 5px ;  color :purple ; font-weight: bold ; 

    /* justify-content: center; */

    vertical-align: middle ;     /*     vertical-align    for   inline-block      */   
}


/* .num_reviews {

} */

.sepBar { 
  margin: 0 15px;
}
/* .insList_address{

}

.ageGroup {


} */


.insList_description {
  font-size: 15px;
  
}


.rightClickable  { 

  display:none;

  position : absolute ;  
  /*   MUST  have    .classCard    Added   position:relative  to  Make   rightClickable   have   ABSolute  POSItion  , 
   .classCard  's   position:relative    Will   OVERLap / COVER   NAV  BAR  ,  So  Need  to   z-index: 2    
   MUST   z-index   in  .navList  ,    .navListContainer   NOT  WOrk   
  */ 
  
  top: 20px ; right : 30px ;
  /* height:14px;line-height:14px */
}

.rightClickable a {
  color: grey;
}
.rightClickable a:hover { 
  color:var(--mainColor)
}

/* 
.rightClickable i{display:inline-block;display:inline;zoom:1;width:16px;height:16px;vertical-align:-2px;margin-right:5px;margin-left:3px}

.rightClickable .o-remark i{vertical-align:middle;background:url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACFklEQVRYR8WXwVUCMRCGZ/a9cBU7oAOxArECtQPoAA7MHvWacFipQO1AKpAOwA60A8/wHuMb3sYXlmQ3CwtyBfb7MvMnO0E40UdrnSHiMH/8kIimPhSegm+MeQGAPgB8M3MbES8A4JWIBkVe4wIWzsyfrVarJ8DVajVHxCufRKMCRfhoNPoRgSzL2iGJxgRCcFvykEQjAm7PlVJdu/Jiv30SRws4cMsbENFrKNyuBDOPjhJwy54kyXCz2bzniY+R+JLfHizg67kxpsvMknjZdkGJvAoLROwcJFAWuCoJga/X6w8A6ALAtLZAVdql9yEJF87Mb2ma9msJxMBt+IoSSql3u3ILl99GC1TBBUhESzf9rgQzS+g6LjxaoAxe6Ol1UWIymfSYWXoORXiUQA34jIju3Qr4el7rZRQL960sBl5agXPAgwLngnsFzgnfEzg3fEfgP+B/AlWHjNZ6iIjZMWkPvZ7RPSgQ8XY8Hs8Dg0Q/TdPnuvu8aujdEQAAmeFui6eZ7yGx+7xSwJYXAGYAcBcj0RR8mwGt9RMiPkr5mbkDADLTByvRJHxPQPpvjJELhVeiafhWwBgjobtRSl3aadYncQr4jgAR7cwGrgQiPjBzJmOUbytWBa3se6nAQh5sBfKVyjVK3t+y//9esU3DbQU4D127zPQUcBvCpVwc5TKJiNu7nIzWucxPkiTbMct3QB1TevvfX3MmtLIHpAFnAAAAAElFTkSuQmCC) no-repeat;-webkit-background-size:12px auto;-moz-background-size:12px auto;background-size:12px auto}

.rightClickable .o-remark:hover{color:#ff8400}

.rightClickable .o-remark:hover i{vertical-align:middle;background:url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACLElEQVRYR8WXz1HbQBjF35OGXAMd0AGKKCC4AkIHYgb57FSQdOBwtTKD0wFUgBuwER2QDnyG8X4ZrSWhlVda2cjOXrXa9/v+7xJ7WjIMxwBH+njBiMn81ibFfehLHN6BjCDyF+QxgM8QmTJZXNf1egcoxSHPeFUXWvCTNwN4ZoPoFaAuzmm61BGIguMmiN4AmsQLlzdB9AJgxPxNBYXl9XjbID4M8G55LidyzWQxbUpuAwLy/UMAhtuVGsHz7/OM7wDhv2R7dwawxVziIAD9mQsi98ITwNOdANoSzgWhxY/8RxABRG63BnBluy67Bk8Y4sAfTubRVgBdxMuyq0HgTd2Xlufi2d7OAC7xzGomaVrNfsMTkJcs5qiIdwZojbkR09WXDYib4AKe/5iDabdXIZ0e6C6OBybzb4YHqnA1y4t9rQCdxS2H2xJuq3F8CPHGHDiUuBXgkOIbAIcWNwD+h3gJ4Gwyw3AEcFxvIuVtp+jtDaXWdu+kVBuFWg34O82mmbHy6RVxsvi1bZ27Lr0mgMgSUIN6N7Md0rXO3QCFewUPIC7RAaIvcZ0DMgx/AvwBtRqA3inIuzaIPsU3ALL4SxxGTRB9i68B4nAG8iteVyflPd4CsQ9xA4CTuTGYDE+IugL9sb5G7VBq7WUYnz9lBxcAa0t5pn+ilz0uqyN2Y567stz1nTI8F51060dk2+pdvEjCVD8cs8ekQL/lQBTNaAml9DXL1qBc1nX5/g845Q+a87YYnQAAAABJRU5ErkJggg==) no-repeat;-webkit-background-size:12px auto;-moz-background-size:12px auto;background-size:12px auto}

.rightClickable i{*vertical-align:2px}

.rightClickable span{color:#999}

.rightClickable span.line{color:#e8e8e8}

.rightClickable i {background-image:url(//www.dpfile.com/mod/app-main-search/1.4.5/css/i/icon_sprite.png);-webkit-background-size:431px auto;-moz-background-size:431px auto;background-size:431px auto;background-repeat:no-repeat}
 */




.rightClickable i{display:inline-block;display:inline;zoom:1;width:16px;height:16px;vertical-align:-2px;margin-right:5px;margin-left:3px}



/*   --------------------------------    AGE   TABs     ----------------------------------   */



.ageContainer { 
  /* margin-top : 20px ; margin-left : 25; justify-content: space-around; */

  
  /* flex-direction: row; */
   /* flex-direction: row; align-items: center;   */



   border-style: outset;
   border-width: 0px 0px 3px 0px; /* 25px top, 10px right, 4px bottom and 35px left */
   border-color: purple; 
   /* margin : auto ; */
   text-align: center;

}

.textPurple { 
  color :rgb(168, 106, 168); 
}


.ageTab {
    background-color:rgb(177, 172, 172) ;

   /* padding:12px 20px; */
   /* border-width:  2px; */

   border: 1px solid rgb(48, 11, 59);

  
   /* border-width: 0px 2px 1px 0px; 
   border-color: black;  */
   /* margin : auto ; 
   text-align: justify; */
   border-radius:5px;
   
   float:left;
   width:20%;

   box-sizing: border-box;   /*   allows us to include the padding and border in the box's total width (and height), making sure that the padding stays inside of the box and that it does not break.*/
  }

  .ageTabLink:link, .ageTabLink:visited {
    background-color:  var(--citySelectorBackground);  /*  rgb(192, 187, 187) ;  */
    /* border-radius:5px; */
    font-size: 21px;
    font-weight: bold; 
    color :var(--mainColor);
    /* font-family: 'Source Sans Pro', sans-serif; */
    font-family: "Times New Roman", Times, serif , "Courier New" ;
    
    margin-top :  10px ;  /*40px;*/
    margin-bottom :  5px ; 
    /* padding : 12px 40px ;   */
    /* padding-top: 15px;
    padding-bottom: 15px; */
    padding: 10px 0 ;

    /* border:2px solid Tomato; */

    border-style: outset;
    border-width: 0px 2px 0px 0px; /* 25px top, 10px right, 4px bottom and 35px left */
    border-color:  rgb(231, 155, 231);  /* var(--citySelectorBackground); */
    /* border-radius : 5px ;  */

    text-decoration: none;
    letter-spacing: 8px;

    text-align: center;
    
    /* display: inline-block;     */
                /*   Makes  Content  Lie  Inside  Containing  Component  ?????       */


    /* max-width: 150px; */   

   


   float:left;
   width: 14.2%;

   box-sizing: border-box;   
   /*   allows us to include the padding and border in the box's total width (and height), making sure that the padding stays inside of the box and that it does not break.*/
  }

  .ageTabLink:hover {
    color: var(--hoverWhiteText);
    background-color:   var(--searchHoverBackground);   /* var(--hoverLightBlue); */
    /* font-size: 28px; */
  }

  .ageTabLink:active {
    background-color: var(--hoverLightBlue);
  } 

  .ageContainer .curr {
    color:var(--hoverWhiteText);
    background-color: var(--purpleBackground);
  }

  /* .w3-padding-large{padding:12px 24px!important}



  .w3-dark-grey {color:#fff!important;background-color:#616161!important} 
  .w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both} */


.insText {
  line-height: 1.1 ;
  word-spacing : 5px ; 
  letter-spacing : 1px;
}






/*   ------------------------------------        NAV  BAR          ---------------------------------     */

.navListContainer { 

  /*    NAV  BAR   is  FIXed  ,  So  NEED  to  Add  Margin-Bottom  to  UnBlock  BELOW  Contents  ,   NO  Need  to   DISPlay: BLOCK    */
  margin-bottom: 55px;   
  /* display: block; */

  z-index : 50 ;   
  
}  

.navList {
  list-style-type : none;
              /* list-style-type: none; - Removes the bullets */
  margin: 0 ;
  padding :  0;
     /* 18px 25px;   */

/* 
  border: 1px solid #555; */

  background-color:  var(--navBarBackground);
         /* Add the background-color to <ul> instead of each <a> element if you want a full-width background color: */
         
  /* overflow: hidden; */

  z-index: 50 ; 
  /*   Because    .classCard    Added   position:relative  to  Make   rightClickable   have   ABSolute  POSItion  , 
   .classCard  's   position:relative    Will   OVERLap / COVER   NAV  BAR  ,  So  Need  to   z-index: 2    
   MUST   z-index   in  .navList  ,    .navListContainer   NOT  WOrk    */

}

.navListHorizontal {        
  /* Because   PADding   in  <LI>   NOT  Work      ?????????         Should  Use  INLINE-BLOCK   for  <a>     */
  /* padding: 17px 0px; */


  position: fixed ;     /*   Fixed Top  */
  top:0;
  width:100%;
}

.navListVertical { 
  width: 200px;
}


.navListHorizontal li { 
  display : inline;
  /* Displaying the links as block elements makes the whole link area clickable (not just the text) */

  /* padding: 18px 25px;      */
          /* Because   PADding   in  <LI>   BackgroundCOLOR  do  NOT  EXPEND ,  NEED  to  PADding  <a> */

  /* border-right: 1px solid #555; */

} 


.navListVertical li , .navListVerticalMore li {
  border-bottom: 1px solid #555;
}

.navListVertical li:last-child ,  .navListVerticalMore li:last-child  {
  border-bottom: none;
}

/* .navListHorizontal li a {  */

  /* padding: 18px 25px; */

  /* border-right: 1px solid #555;  */
    /* Because   PADding   in  <LI>   height  do  NOT  EXPEND ,  NEED  to  PADding  <a> */
/* }  */


/* .navListHorizontal li a:last-child {
  border-right: none;
} */

.navListVertical li a ,  .navListVerticalMore li a { 
  display : block;
            /* Displaying the links as block elements makes the whole link area clickable (not just the text) */
    /* can  ONLY  Use   BLOCK   ,  NOT  INLINE-BLOCK  ,  or  backgroundColor  will not extend    */
            /* padding: 18px 25px; */
}

.navList li a {
  color :var(--mainColor) ; 
  font-weight: bold;
  font-size:  18px ;  /*  large; */   


  /* background-color: rgb(197, 207, 204); */

  text-decoration: none;

  padding: 15px  calc( ( 100vw - 600px ) * 0.01 + 15px ) ;
  
  text-align : center ; 

  display : inline-block;
  
  
}

.activeNav { 
  color : var(--hoverWhiteText);
  background-color: rgb(157, 117, 167) ;   /*   var(--purpleBackground);  */
}

.navList li a:hover   ,  .dropDownLi:hover  .dropDownBtn  {  
  /*   ,  .dropDownLi:hover  .dropDownBtn     When   Hover  DRop-Down  ,  PARent  Also  Colored */
  
  color:var(--hoverWhiteText) ;
  background-color:  var(--navHoverBackground) ;  /*  rgb(98, 97, 100);  */  
}


.dropDownLi:hover .navListVertical ,  .dropDownLiMore:hover .navListVerticalMore { 

 display: block!important; 
}

.dropDownLi:hover  .navSmallTransparentDiv {   
    display : flex!important ;   
    /* background-color: red; */
}


.navListDropDown { 
  position: absolute!important;
  width:160px!important;
  z-index: 1;
  box-shadow: 0px 8px 16px 0px rgba(75, 46, 75, 0.2);
  border: none;
}


.navSmallTransparentDiv { 
    position : absolute!important;  

    /* background-color:  red ;   */

    /* vertical-align : middle ;   */ 
    
    display : none ;   /* flex ;  */
     /* inline-block ;  */
    align-items: center ;

}   



.navSmallTransparentDiv .navListDropDownWide {  

  position: unset!important;    /*   UNSet    */
  /* background-color:  red!important ;     */

  /* display : inline-block ;    */
  
}

.navListDropDownWide { 

  position: absolute!important;
  /* top : 0!important ; 
  bottom : 0!important ;  */
  /* margin :  auto 0  ;    */

  z-index: 1;
  box-shadow: 0px 8px 16px 0px rgba(75, 46, 75, 0.2);
  border: none;

  /* min-height : 400px ;  */   /*    MIN-HEIght   ONLY   USed   For   NavBarSMALL 's   HIDE_SHOW    */
  max-height : calc(95vh - 100px ) !important ;   /*  If  Want  to  SCROLL  ,  MUST   DEFine   HEIGHT  /  MAX-HEIGHT     */

  overflow-y: auto;   
        /*  OVerFLOW : AUTO   WIll   HIde  SCRollBAR   is   NOT   SCRollABLE ;   OVerFLOW : SCROLL   Will   SHow   SCRollBAR   EVen  If   NOT   SCRollABLE   */

  display : block ; 
  

  width : 280px ; 

  /* overflow-x: hidden;
  text-overflow: hidden; */

  /* white-space: nowrap ;   */
            /*   or  Will   WRAP   ,  NOT  HIDDEN   */

}




.navListDropDown li ,  .navListDropDownWide li {
  border-bottom : none;
}

.navListDropDown li a  ,  .navListDropDownWide li a {  
  
  text-align : left ; 

  float : left ; 
  clear:both ;    /*   OR   if   spacce  available ,  2   <A>  will  Show up  in  One  LINE  */

  padding: 18px  20px  18px  20px ;

  width : 99% ; 
         /*    Define   <A>  's  WIDTH  ,   So    BackGround  Color   can   flow   to    END   ;   Use   PERCentage   %     */   

}



.navListDropDownWide:not(:has(li))  a {  
        /*     .navListDropDownWide:not(:has(li))  a { }       */
  text-align : left ; 

  float : left ; 
  clear:both ;    /*   OR   if   spacce  available ,  2   <A>  will  Show up  in  One  LINE  */  

  padding: 18px 20px;

  width : 99% ;   
         /*    Define   <A>  's  WIDTH  ,   So    BackGround  Color   can   flow   to    END   ;   Use   PERCentage   %     */   

}




  /* ------------    NAVBar 's   INSTitute  CHAT   &&  PAGE  's   DropDown      ---------- */
  
.dropDownLiTextBigger ,  .dropDownLiTextBigger   a { 
  font-size : 17px!important ; 
  /* padding: 10px 10px !important;  */ 
           /*    Will   ADD  ON   to      .navListDropDownWide li a { } 's   PADding     */
}

.dropDownLiText   a { 
  font-size : 14px!important ; 
  padding: 8px 6px 8px 10px  !important; 

  position : relative ; 
  
}

.dropDownLiText:not(:has(a))  { 
                         /*      .dropDownLiText:not(:has(a))  {  }        */
    font-size : 14px!important ; 
    padding: 8px 10px !important; 
  
}



.alertMessageSpanTime {   
    
    font-size : 11px ;    
    font-weight : normal ;   
}       


/*  ----------------   ACTIVE   DRopDOWN   in  NAVBar   ------------ */
  .active_dropdown { 
      background-color: var(--searchHoverBackground) ; 
  } 
  .active_dropdown .chatterSpan { 
    color:var(--hoverWhiteText) ;
  }


/*   --------------     NUMber   BADGE       -----------------------   */ 


  .fa-envelope , .fa-bell { 
     position : relative ; 
  } 

  .moreRelativeSpan { 
    position : relative ; 
  }

  .numBadge {
      color: red ; 
      font-weight : bold ; 
      font-size: 12px ; 

      font-family:  "Courier New" , "Times New Roman", Times, serif  ; 

      letter-spacing : -0.05em ;  
           /*   -------       letter-spacing : -0.05em ;      to   NEGAtive   */

      width : 20px ; 
      height : 20px ; 
      /* padding : 3px ;  */
      border-radius: 50% ; 
      background-color: rgb(243, 220, 243); 


      /* text-align: center ;  */
      display:flex ; 
      justify-content: center;
      align-items: center;
      

      position : absolute ; 
      bottom:10px;
      right: -12px ;  
               /*   right: -12px ;     NEGative    */

      

  } 



/* --------    for   CHATTER  NAME   to  Make  ROom   for   NumBADGEdetail   &&   WHEN  HOVER  ,  < A > 's  BackGRoundCOLOR   Flow  to  END    */
.chatterSpan{   

    /* display : inline-block ;    */
          /*   MUST   INLINE-BLOCK    OR    FLOAT  ,  or  WIDTH  : %   NOT   APPLied    */    
    float:left ;  
    clear : both ; 

    margin-right: 6px ; 
}

.chatterSpan:not( .alertSpan ) {    
  max-width : 88% ;  
}

.alertSpan {
  max-width : 100% ;   
}


  .badgeVerticalSpan {  
      display : flex ; 
      /* justify-content: center ;  */
      align-items: center ; 

      height : 100% ;  
      
      /* float : left ; 
      clear : both ;   */
  }

  .numBadgeDetail { 

    color: red ; 
    font-weight : bold ; 
    font-size: 13px ; 

    font-family:  "Courier New" , "Times New Roman", Times, serif  ; 

    letter-spacing : -0.05em ;  
         /*   -------       letter-spacing : -0.05em ;      to   NEGAtive   */

    width : 24px ; 
    height : 24px ; 
    /* padding : 3px ;  */
    border-radius: 50% ; 
    background-color: var(--reallyLightPurple); 
    
    /* margin : 0px 0px 0px 5px ;  */

    display : flex ; 
    justify-content: center ; 
    align-items: center ; 

    /* float : left ;  */

    /* position : absolute ; 
    top : 0 ; 
    right : 0 ;  */
 
    /* display : inline ;  */

  }



    /*   -----------------    CUSTom    SCROLL   BAR         ------------------      */

    .navListVertical::-webkit-scrollbar {
      width: 10px;
    }

    .chatterList::-webkit-scrollbar {
      width: 12px;
    }

    ::-webkit-scrollbar {
      width: 16px;
    }
    
    ::-webkit-scrollbar-track {
      box-shadow: inset 1px 1px 7px grey;
      /* background-color: grey; */
      border-radius: 10px;
      margin : 2px ; 
    }
    
    .navListVertical::-webkit-scrollbar-thumb {
      background: var(--navHoverBackground ) ; 
                  /*   rgb(155, 44, 155);   */
      border-radius: 10px;

      border : 1px solid rgb(230, 214, 214) ; 
    }

    .chatterList::-webkit-scrollbar-thumb {
      background: var(--navHoverBackground ) ; 
                  /*   rgb(155, 44, 155);   */
      border-radius: 10px;

      border : 2px solid rgb(230, 214, 214) ; 
    }

    ::-webkit-scrollbar-thumb {
      background: var(--navHoverBackground ) ; 
                  /*   rgb(155, 44, 155);   */
      border-radius: 10px;

      border : 2px solid white ; 
    }
    

    ::-webkit-scrollbar-thumb:hover {
      background: var(--mainColor ) ; 
                  /*   rgb(155, 44, 155);   */
    }
    


    /*    -----------      Make   SCRollBAR   THINner    for   < TExtAREA >   &&    CONSentMODAL 's     < P >      -----------    */    
    textarea::-webkit-scrollbar {
      width: 10px;  
    }

    textarea {        
      cursor : auto!important ;     
      /*    on the textarea will give it a text cursor while hovering over the text, and a pointer while hovering over the scrollbar.   */
    
      outline-color : var( --textareaOutlineColor ) ;   
      /*    OUTLine  :   TExtARE   &&   INPUT 's   INNer_BORDer   WHen   FOCUSed       */   

      background-color: var( --textareaBackgroundColor ) ;  

      color : purple ;  
      font-weight : bold ;  

      /* font-size : 16px!important ;   */   
    
    }

    
    .consent_content::-webkit-scrollbar {
      width: 13px;
    }

    
    .navListVertical { 
        scrollbar-width: thin; 
        scrollbar-color: var(--navHoverBackground )  var(--cardBackgroundColor) ;
    }

    .chatterList { 
      scrollbar-width: thin; 
      scrollbar-color: var(--navHoverBackground )  var(--cardBackgroundColor) ;
    }

    html {  
        scrollbar-width: normal; 
        scrollbar-color: var(--navHoverBackground )  var(--cardBackgroundColor) ; 

    }


    /*    -----------      Make   SCRollBAR   THINner    for   < TExtAREA >   &&    CONSentMODAL 's     < P >      -----------    */    
    textarea {
      scrollbar-width: thin ;  
    }

    .consent_content {
      scrollbar-width : thin  ;  
    } 







  /*   ---------------------------      Responsive Topnav     -----------------------------   */   

/* @media screen and (max-width: 1600px) { */
  .navListVertical {
    display: none;
  }

  .navListVerticalMore {
    display: none;
  }

  .navListSmall {
    display: none;
  }
/* } */

@media screen and (max-width : 600px  ) {    /*  950px) {  */    /*  ipad  750+ */
  .navListHorizontal {
    display: none;
  }
  .navListSmall {
    display: inline-block;
  }
}




/*     ----------------------------------------           TOOLTIPs      NAVBAR           ----------------------------------------      */


[tooltip_title] , [ tooltip_title_small] { 
    position : relative ; 
}


[tooltip_title]:not([tooltip_title=""])::after { 
  
    content : attr(tooltip_title) ; 

    font-size: 12px ; 
    font-weight: lighter ; 
    color : white ; 
    background-color: rgba(128, 0, 128, 0.7 ); 
    /* opacity : 0.8 ;  */
    padding : 3px 6px ; 

    border-radius : 8px ; 

    width : 120px ;        /*    width : max-content ;      */
    /* max-width : 180px ;  */
    text-align : center ; 


    position : absolute ; 
    top : 60px ;
    left :  calc( 50%  - 60px ) ;       
             /*    to  Use   CLAC(  )  to  CENTER ,  MUST  DEFINE  WIDTH  to  FIXed  NUMBER,  CSS Can  NOT  get  DYNAMIC  WIDTH    */   


    /* visibility: hidden;  */
    display : none ; 
}

[tooltip_title_small]:not([tooltip_title_small=""])::after { 
  
  content : attr(tooltip_title_small) ; 

  font-size: 12px ; 
  font-weight: lighter ; 
  color : white ; 
  background-color: rgba(128, 0, 128, 0.7 ); 
  /* opacity : 0.8 ;  */
  padding : 3px 6px ; 

  border-radius : 8px ; 

  /* width : 120px ;        */
   /*    width : max-content ;      */
  /* max-width : 180px ;  */
  text-align : center ; 


  position : absolute ; 
  top : 10px ;
  left :  calc( 50%  - 60px ) ;       
           /*    to  Use   CLAC(  )  to  CENTER ,  MUST  DEFINE  WIDTH  to  FIXed  NUMBER,  CSS Can  NOT  get  DYNAMIC  WIDTH    */   


  /* visibility: hidden;  */
  display : none ; 
}


[tooltip_title]:not([tooltip_title=""])::before  ,  [tooltip_title_small]:not([tooltip_title_small=""])::before { 

    content: "";
    position: absolute;
    top: 48px;
    left: 50%;
    margin-left: -5px;
    border-width: 6px;
    border-style: solid;
    border-color:  transparent transparent   rgba(128, 0, 128, 0.7 )   transparent; 

    /* visibility : hidden ;  */
    display : none ; 
}
  

[tooltip_title]:not([tooltip_title=""]):hover::after , [tooltip_title]:not([tooltip_title=""]):hover::before , 
[tooltip_title_small]:not([tooltip_title_small=""]):hover::after , [tooltip_title_small]:not([tooltip_title_small=""]):hover::before   {  

    /* visibility : visible ;       */
    display : block ; 
}





/*  ---------------------------------    PAGination     --------------------------------    */    


.pageContainer { 
  text-align: center;
}

.page { 
  display : inline-block ; 
}

.page a { 
  color:var(--mainColor);
  font-size:smaller;
  font-weight: bold;
  /* border-radius : 6px; */
  border: 1px solid var(--mainColor); 

  padding : 8px 14px ;
  margin : 0 2px;

  float : left ;
  
  text-decoration: none ;

  transition: background-color .3s;


}

  /*   Use   ,   to  Seperate   ,  Or  will  be     currPage  INSide   numPage  Class ;  
       文字 is  Bigger  Than  NUMber   ,  So  Need  to  ADJust  SIZE      */
/* .page a:not(.numPage , .currPage)   { 
  font-size:smaller;
} */

/*  :first-child:not(.currPage)   ,  ONLY  Radius  文字  link ,  NOT   NUMeric  Page  ;  But  NOW   Used  DISabledPAGE  CLASS   INStead   */
.page a:first-child { 
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
/*  :first-child:not(.currPage)   ,  ONLY  Radius  文字  link ,  NOT   NUMeric  Page  ;  But  NOW   Used  DISabledPAGE  CLASS   INStead   */
.page a:last-child { 
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.page .disabledPage {
  opacity : 0.7;
  cursor : not-allowed ; 
}


.page a.currPage {
                     /*   a.currPage   can  NOT   Have  SPACE    */
   color:var(--hoverWhiteText) ; 
   background-color: var(--purpleBackground);
    /*  */
    /* rgb(163, 87, 163);*/

    pointer-events : none ;       /*   OR   WHen   HOVER   OVer   Number   INSide  ,  CURSor   Will  CHange   To   I   */    
}

.page a:hover:not(.currPage)  {
                /*   a:hover    can   NOT   Have   SPACE     ;      :not(.currPage)    */   
  background-color: var(--pageHoverBackground);
}



/*  ---------------------------------     gallery-right-container-classlist 's     GALLeryIMAge     --------------------------------    */    


.gallery_image_info_div  {  
  /* margin : 0px 10px ;   */  
        /*  MOVEd   To   CONTainer 's    PADding    INSTead    */   

  /* float : left ;  */
  /* clear : both ;  */
  /*   CLEAR   Will   Make  EACH  LINE  1   ELEMent */ 

  display : inline-block ;  
  /*   MUST   INLINE-BLICK ,  or  Will   NOT   HORIZONTAL   Show     */

  width : 100% ;     /*   To  Auto   SHRink   With   CONTAINing   < DIV > 's   SIZE  */ 

  padding-left : 3% ;  
  padding-right : 3% ;   
  
  
}  

.gallery_image_info_div img { 
    /* max-width : 250px;  */
    width : 100% ;     /*   To  Auto   SHRink   With   CONTAINing   < DIV > 's   SIZE  */ 
  /* max-height : 200px ;        */
  /*    DEFine  TWO  2  MAX-   ,  Image  Will   AUTO   RESIZE    */
  cursor : pointer ; 
}   

/* .gallery_info_p_div p {  

  font-size: 14px ; 
  font-weight: bold ; 
  color: purple ; 
  margin : 0px 5px 0 8px ; 

}     */


.gallery_submit_button { 
  background-color: inherit ;
  font-size:  16px ; 
  color : purple ; 
  font-weight: bold ; 
  padding : 4px 20px 4px 20px ; 
  border : 2px solid purple ;
  border-radius:  10px ; 

  margin :  20px 0px 20px 0px  ; 
  cursor : pointer ; 

  background-color: var(--reallyLightPurple) ;  

  display : inline-block ; 
} 

.gallery_submit_button:hover { 
  background-color: purple ;
  color : white ; 
}




.footer {  
    background-color : var(--navBarBackground) ;    
    text-align : center  ;    
    padding : calc( 1vw + 7px )  3vw ;   

}

.footerLinks { 
    text-decoration : none  ;    
    color : purple ;  
    font-weight: bold ;  
    font-size : calc( 0.2vw + 11px) ; 
    margin-left :  calc( 0.2vw +  11px) ;   /* 20px ;  */   
    /* margin-right : 20px ; */
    vertical-align : bottom ;  
     /* bottom ;    */

    display : inline-block ;  
}

.footerLinks_span {  
    color : purple ;  
    font-size : calc( 0.2vw + 9px) ; 
    font-weight: bold ;  
    
    margin-bottom : 1px ; 

    vertical-align : bottom ;  

    display : inline-block ;  
}

.footer_title_p {   
    color : purple ;  
    font-weight : bold ;  
   
    font-size : calc( 0.2vw + 14px ) ; 

    display : inline-block ;   

    margin : 0 calc( 0.2vw + 10px) 0 0 ;    

    vertical-align : bottom ;    

    text-decoration : none ;    
}

@media screen and (max-width: 385px) {

    .footer_title_p   {  
      display : block ;   
    }


} 








               /*   -------------------------------------     FRom    CHat1_PATH .CSS     ------------------------------------   */




/* h1{font-size:36px}h2{font-size:30px}h3{font-size:24px} */
h4{font-size:20px }
h5{font-size:18px}
h6{font-size:16px}


h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0 ; letter-spacing:1px }
p , a {letter-spacing:1px } ; 


p { white-space: pre-line; 
    overflow-wrap: break-word; }    /* < P >  tag    white-space: pre-line;   preserve  LINE  Breaks    */
                         /*  < p > tag     overflow-wrap: break-word;     break a long word        */


  .container{max-width:1170px; margin:auto;}

  img{ max-width:100%;    

    font-size: 10px ;    
    /*     img src="{{ contact.image_url }}" alt="图片加载失败"    ALT's   FONT-SIZE       */
  }

  
  .chatterList_container {
    background: #f8f8f8 none repeat scroll 0 0;
    float: left;
    overflow: hidden;
    width: 40%; border-right:1px solid #c4c4c4;
  }
  .chat_page_container {
    border: 1px solid #c4c4c4;
    clear: both;
    overflow: hidden;
  }
  .top_spac{ margin: 20px 0 0;}
  
  
  .recent_heading {float: left; width:40%;}

  .chatterList_header{ padding:10px 29px 10px 20px; overflow:hidden; border-bottom:1px solid #c4c4c4;}
  
  .recentTitle {
    color : purple; 
    font-size: 20px;

    font-weight: bold;
    font-family: "Times New Roman", Times, serif , "Courier New" ;
    margin: auto;
    letter-spacing: 2px;
  }

  .search_bar {
    display: inline-block;
    text-align: right;
    width: 60%;
  }

  .fa-search {
    color : purple;
  }
  
  .search_bar input{ border:1px solid purple; border-width:0 0 1px 0; width: 100%;  background:none; 
    color:purple ; 
    font-weight : bold!important ;  
    letter-spacing : 1px ;    

    font:inherit;margin:0 ;

    padding : 2px 25px 2px 8px ;   
              /*   So   INPUT   will   NOT  OVERLAP    ICON   */


    outline : none ;   
          /*    OUTLine  :   TExtARE   &&   INPUT 's   INNer_BORDer   WHen   FOCUSed       */   

  }
  .search_bar .input-group-addon button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    padding: 0;
    /* color: #707070;
    font-size: 18px; */
  }

  .search_bar .input-group-addon button i {

    color: purple;
    font-size: 18px;
  }

  .search_bar .input-group-addon i:hover {
    color: rgb(96, 143, 231);
  }

  .search_bar .input-group-addon { margin: 0 0 0 -27px;}
  
  .chatterList { height: 550px; overflow-y: scroll;}
  
  .chat_img {
    float: left;
    width: 11%;

    font-size: 10px ;    
    /*     img src="{{ contact.image_url }}" alt="图片加载失败"    ALT's   FONT-SIZE       */
  }
  .chatter_text_container {
    float: left;
    padding: 0 0 0 15px;
    width: 77%;
  }

  .chatter_text_container h5{ font-size:15px; color:#464646; margin:0 0 8px 0; font-weight: bold ; }
  .chatter_text_container h5 span{ font-size:13px; float:right; font-weight: normal;}
  .chatter_text_container p{ font-size:14px; color:#989898; margin:auto; margin-right: 5%; padding-right: 20px; 
    overflow-wrap: break-word;
    white-space: pre-line; 
   }
  
  
   .numBadgeChat { 
    color: white ; 
    font-weight : bold ; 
    font-size: 13px ; 

    font-family:  "Courier New" , "Times New Roman", Times, serif  ; 

    letter-spacing : -0.05em ;  
         /*   -------       letter-spacing : -0.05em ;      to   NEGAtive   */

    width : 24px ; 
    height : 24px ; 
    /* padding : 3px ;  */
    border-radius: 50% ; 
    background-color: var(--mainColor); 
    
    /* margin : 0px 0px 0px 5px ;  */

    display : flex ; 
    justify-content: center ; 
    align-items: center ; 

    /* float : left ;  */

    /* position : absolute ; 
    top : 0 ; 
    right : 0 ;  */
 
    /* display : inline ;  */

   }

  
  .chat_room_delete_btn {
 /*   margin: 5%, 5%, 5%, 2%;  */
    /* padding: 2%, 2%, 2%, 2%; */

    font-size:20px;
    font-weight: bold;
    color: red; 
    margin-left : 5%;
    width: 30px;
    height: 30px;   /*    NOT  Working  with  %   ,    pt  px   WORKs   */
    
    background-color: inherit ;
    border : none ; 
    
  }

  .chat_room_delete_btn:hover { 
    color: purple ; 
    /* border : 1px solid purple ;  */
  }
  
  .chat_people{ overflow:hidden; clear:both;}

  .chat_list {
    border-bottom: 1px solid #c4c4c4;
    margin: 0;
    padding: 18px 16px 10px;

    background-color : var( --chatterListBackgroundColor ) ;    
  }

  .active_chat{ background:#e5d2e9;}




  .message_section {
    float: left;
    padding: 0 15px 0 25px;
    width: 60%;
  }


  .chatter_name_container {
    
    border-bottom: 1px solid #c4c4c4; 
    position: relative; 

    margin : 15PX 0 10px 0 ;
    
  }

  .chatter_name_container p {
    
    color : purple;
    font-weight: bold;
    font-size: 18px ; 

    margin : 2px 0 8px 55px ;
   /* padding : 0 ;
  */
  }

  .chatter_name_container a :hover {
    
    color : rgb(124, 91, 241);

  }
  
  .msg_history {
    height: 480px;             /*          can  NOT   AUTO  ,  or  Will  Have  ALL  Chats  LISTED               */        
    overflow-y: auto;

    position: relative ;  
         /*    for   FLOATing   BUTTONS    */

    padding : 20px 0 0 0 ;   /*     padding TOP  20px  ,  So   Floating  INDicator  NOT  CLide  with   Messages       */
  }


  .incoming_msg_img {
    display: inline-block;
    width: 6%;

    font-size: 10px ;    
       /*     img src="{{ contact.image_url }}" alt="图片加载失败"    ALT's   FONT-SIZE       */
  }
  .received_msg {
    display: inline-block;
    padding: 0 0 25px 10px;
    vertical-align: top;
    width: 92%;
   }

   .received_withd_msg { width: 57%;}

   .received_withd_msg p {
    background:  lightblue ;           /*        #cac6c6 none repeat scroll 0 0;    */
    border-radius: 10pt;
    color:   purple ;   /* #363434; */   
    font-size: 14px;
    margin: 0;
    padding: 5px 10px 5px 12px;
    width: 100%;

    font-weight: bold ;  

    overflow-wrap: break-word;
    white-space: pre-line; 
  }
  .time_date {
    color: #747474;
    display: block;
    font-size: 12px;
    margin: 8px 0 0;
  }

  .outgoing_msg{ overflow:hidden; margin:26px 0 26px;}
  
  .sent_msg {
    float: right;
    width: 46%;
  }

   .sent_msg p {
    background:  rgb(218, 210, 224) ;  /*  rgba(215, 189, 223 , 0.6 ) ; */   /*  #e5d2e9;  */      /*     #05728f none repeat scroll 0 0;        */  
    border-radius: 10pt;
    font-size: 14px;
    margin: 0; 
    color:purple;
    padding: 5px 10px 5px 12px;
    width:100%;

    border : 1px  solid  rgba(128, 0, 128 , 0.1 )  ;   

    font-weight: bold ;  

    overflow-wrap: break-word;
    white-space: pre-line; 
  }



  .msg_input_container {border-top: 1px solid #c4c4c4; 
    position: relative; 
  }

  .input_msg_write { 

    line-height : 30pt ;

    /* text-align : center ;  */

    /*    Using   FLEXBOX   :       display : flex   ;   to  Center   INPUT  TEXTAREA   &&   BUTTON      */
    /*   FLEXBOX   Using         DISPLAY : FLEX    &&     ALign-ITems   &&     JUStify-CONTent     ,   NOT   Using     TEXT-ALign : center  */
    display : flex ;        
    align-items: center ;
    justify-content: center;

  }
  
  .image_textarea_div {    
              /*     for   SHow   IMAGE   &&  HIDE  TEXTAREA    IF   Selected   IMAGE     */
    width:90%; 
    margin:  0 10px 0 0 ; 
    /* padding-left: 3%; padding-right: 3%;  */
    text-align: center;
  } 

  /*  --------------    MOVEd   to    MODAL . CSS   ------------ */
  /* .select_image_preview { 
    width : 250x ; 
    display : none ; 
  } */

  .input_msg_write textarea {
     /*     The   HEIGHT    AUTO   EXPEND     is  in     INputBOX . JS     */  
    border:0; 
    width:100%; 
    font-size:large; 
    margin:  0 0px 0 0 ; padding-left: 3%; padding-right: 3%; 
    overflow: hidden; resize: none; 

    font:inherit; 

    background-color : var( --textareaBackgroundColor ) ;   
    color : purple ;   
    font-weight : bold ;  

    outline-color : var( --textareaOutlineColor ) ;   
              /*    OUTLine  :   TExtARE   &&   INPUT 's   INNer_BORDer   WHen   FOCUSed       */   

    /* display : none ;  */
  }

  .image_add_btn { 

    border : none ; 
    cursor : pointer ; 
    color : purple ; 
    background-color: inherit ; 
    font-size: 30px ;

    padding : 0 ;
    margin : 0  10px 0 0  ; 
  }

  .image_add_btn:hover { 
    color :hsla(298, 54%, 51%, 0.815) ; 


  }
  

  .msg_send_btn {
    background: #8f0588 none repeat scroll 0 0;        /*             */
    border: medium none;
    border-radius: 50%;
    font-size: 17px;
    width: 33px;
    /* top: 11px; */

    color: #fff;
    cursor: pointer;

    height: 33px;
    /* position: absolute;
    top: 5px ; */

   
   

    /* for  发送   */
    /*        
     top: 5px; 
     border-radius: 10px;

    padding : 8px 20px 8px 20px ;  
    */
    
  }


  .send_btn_text {
    font-size: 18px;
    font-weight: bold;
    color : white ; 

    padding : 0 ;
    margin: 0 ; 
    
  }



  .msg_send_btn:hover {
    background: rgb(186, 105, 211) ;   
    color : purple ; 
    font-weight: bold ;
  }


  .loading {
	opacity: 0;
	display: flex;
  position: absolute;
	/* position: fixed; */
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	transition: opacity .3s ease-in;

  /* opacity: 1; */
}

.loading.show {
	opacity: 1;
}

.ball {
	background-color: hsla(298, 83%, 20%, 0.685);
	border-radius: 50%;
	margin: 5px;
	height: 15px;
	width: 15px;
	animation: jump .5s ease-in infinite;
}

.ball:nth-of-type(2) {
	animation-delay: 0.1s;
  background-color: hsla(298, 54%, 51%, 0.815);
}

.ball:nth-of-type(3) {
	animation-delay: 0.2s;
  background-color: hsla(310, 68%, 65%, 0.74);
}

@keyframes jump {
	0%, 100% {
		transform: translateY(0);
	}
	
	50% {
		transform: translateY(-10px);
	}
}
  












               /*   -------------------------------------     FRom    404 .CSS     ------------------------------------   */



.content_div { 
     text-align : center ; 

     padding : 40px 10px ; 
}

.info_text { 
    color : purple ;
    font-size: 25px ; 
    font-weight: bold ; 

    margin: 20px 10px 60px 10px ;  
        /*    <p>  Tag   uses   it's  own   BIG   MARgin   if   NOT   REDEFine    */
    text-align: center;

    display : inline-block ; 
}


.button_center_div { 

    text-align :  center ;

    margin : 0px 10px 0px 10px ;
       /*   MARgin   RIGHT  &&  LEFT   Need  to  be  SAME  with   INPUT 's   MARgin   IF   text-ALign :  RIGHT   &&  LEFT  ,  CENTER  NO  Need */  
}

.submit_button { 
    background-color: inherit ;
    font-size:  18px ; 
    color : purple ; 
    font-weight: bold ; 
    padding : 5px 20px 5px 20px ; 
    border : 2px solid purple ;
    border-radius:  10px ; 

    margin :  0px 20px 0px 20px  ; 
    cursor : pointer ; 

    background-color: var(--reallyLightPurple) ;
} 

.submit_button:hover { 
    background-color: purple ;
    color : white ; 
}


.images_container_center_div {
    text-align: center ; 
    /* margin : 10px 0 45px 0 ;  */
    padding : 10px 0 45px 0 ; 
    /*    display: inline-block ; */    /*  can   NOT   INLine-BLOCK   If    Wants   TEXT-ALIGN : CENTer  ,  So   Can  NOT  Use  MARGin  ,  Use  PADDing      */
} 

.images_container_div {  

    margin : 0px 0 10px 0;    /*  NOT   USing   MARGin-LEFT   &&   MARGin-RIGHT   ,  BECause   PARENT_ELEM   USing    TEXT-ALIGN : CENTer   */
    padding : 10px 0px 10px 0  ; 

    display: inline-block ; 

    overflow-x: scroll; 
    white-space: nowrap ;   
         /*   MUST    white-space: nowrap ;    OR    Will   NOT   SCROLL   HORIZONtal    */
    height: 350px ;
    width : calc( 95vw - 12px ) ;   
         /*   WINDOW   WIDTH  :  CALC( 100vw )  */

}

.image_info_div {   
    margin : 0px 10px ;  

    /* float : left ;  */
    /* clear : both ;  */
    /*   CLEAR   Will   Make  EACH  LINE  1   ELEMent */ 

    display : inline-block ;  
    /*   MUST   INLINE-BLICK ,  or  Will   NOT   HORIZONTAL   Show     */

    
    
}

.image_info_div_404  {   
    margin : 0px 10px ;  

    /* float : left ;  */
    /* clear : both ;  */
    /*   CLEAR   Will   Make  EACH  LINE  1   ELEMent */ 

    display : inline-block ;  
    /*   MUST   INLINE-BLICK ,  or  Will   NOT   HORIZONTAL   Show     */
    
    text-align : center ; 
    
}


            /*   ---------------------      GALLeryIMage     ---------------------        */     

.gallery-left-container-gallery { 

    background-color : var(--filterAreaBackground);
    /* rgb(215, 189, 223) ;  */  
    /* border-radius : 10px ;  */
  
    margin : 10px 1% 25px 1% ; 
    padding : 10px ;  
    
    width : 77% ;   
    float : left ;  

  }
  

.gallery-right-container-gallery { 

    background-color : var(--filterAreaBackground); 
    /* rgb(215, 189, 223) ;  */  
    /* border-radius : 10px ;  */
  
    margin : 10px 1% 25px 0 ; 
    padding : 5px  1.5% 0 1.5% ;   

    width : 20% ;   
    float : left ;  
}


.gallery_image_info_left_div  {  
    width : 23.7% ;    
               /*   To  Auto   SHRink   With   CONTAINing   < DIV > 's   SIZE  */   

    margin-left : 0.5% ;  
    /* margin-right : 0.5% ;   */
    padding-left : 1% ;  
    padding-right : 1% ;   

    display : inline-block ;   
    
}   

.image_info_div img { 
    width : 100% ;     /*   To  Auto   SHRink   With   CONTAINing   < DIV > 's   SIZE  */ 
    /* max-height : 200px ;        */
    /*    DEFine  TWO  2  MAX-   ,  Image  Will   AUTO   RESIZE    */
    cursor : pointer ; 
}

.image_info_div_404 img { 
    max-width : 250px; 
    max-height : 200px ;        /*   DEFine  TWO  2  MAX-   ,  Image  Will   AUTO   RESIZE    */
    cursor : pointer ; 
}

.image_info_div p  ,  .image_info_div_404 p { 
    font-size: 15px ; 
    font-weight: bold ; 
    color: purple ; 
    margin : 5px 5px 0 8px ; 
}

.gallery_image_info_left_div img { 
    /* max-width : 250px;  */
    width : 100% ;     /*   To  Auto   SHRink   With   CONTAINing   < DIV > 's   SIZE  */ 
    /* max-height : 200px ;        */
    /*    DEFine  TWO  2  MAX-   ,  Image  Will   AUTO   RESIZE    */
    cursor : pointer ; 
}

.gallery_info_p_div p {  

    font-size: 14px ; 
    font-weight: bold ; 
    color: purple ; 
    margin : 0px 5px 0 8px ; 


        /*   -----------    MAKE   TEXT   ONE-LINE    &&   ELIPSIS      :    WIDTH   MUST   Be   REStricted         
            white-space : nowrap   MAke  ONE-LINE  ,    overflow : hidden   HIDe   OVerFOW   ,    TEXT-OVerFLOW : ELLIPsis    ......     ------------   */
        
        text-overflow : ellipsis ;          
        white-space : nowrap ;  
        overflow : hidden ;   

        width : 100%  ;     

}


/*  --------------------------    RESPonsive   ---------------------------   */         


@media only screen and (max-width: 950px) { 

    .gallery_image_info_left_div  {  
        width : 32% ;    
                   /*   To  Auto   SHRink   With   CONTAINing   < DIV > 's   SIZE  */   
    
        margin-left : 0.5% ;  

    }   
}


@media only screen and (max-width: 700px) { 

    .gallery_image_info_left_div  {  
        width : 48% ;    
                   /*   To  Auto   SHRink   With   CONTAINing   < DIV > 's   SIZE  */   
    
        margin-left : 1% ;  

    }   
}

@media only screen and (max-width: 500px) {

    .gallery_image_info_left_div  {  
        width : 100% ;    
                   /*   To  Auto   SHRink   With   CONTAINing   < DIV > 's   SIZE  */   
    
        margin-left : 0 ;  

    }   
}


@media only screen and (max-width: 700px) {

    .gallery-left-container-gallery { 
        width : 98% ;   
         /* float : left ;   */

        margin : 10px 1% 25px 1% ; 
    }
    
    .gallery-right-container-gallery { 
        width : 98% ;  
         /* float : left ;   */
        margin : 10px 1% 25px 1% ; 
    }
    
}




/*  -----------------------     LIghtBOX    -------------------------        */


.images_for_lightbox   img  {    /*    for   INStitute_PATH .HTML 's   ALBUM_IMAGEs 's    POINTer    */
    cursor : pointer ;  
}

                                /*    --------------       ~i    TILD    for   SIBLing   ELEMents     ---------------      */
/* .images_for_lightbox img:hover  ~i   {      
    display : inline!important ; 
} */

.images_for_lightbox:is( .accordion_image_container )   i     {     
    color : red ;  font-size: 25px ;    
    background-color: aliceblue ; height : 23px ; width : 23px ;   text-align: center ;  
    position : absolute ;   top : 0  ; right : 5% ;    display : inline ;   

    cursor : pointer  ; 
}

.images_for_lightbox:is( .accordion_image_container )   i:hover  {     
    color : white ; 
    background-color: red ;  
}

.images_for_lightbox:not( #msg_history , #gallery_images )  div:not( #new_album_img_div , .likeContainerSmall , .img_icon_div ) {           
                    /*    :not( #msg_history ) :not( #new_album_img_div )     NOT   ALBum_IMAGE_PREVIEW   < DIV >   OR  In  msg_history < DIV >  */
    background-color: rgb(225, 209, 240) ;     position : relative ;  
}


#lightbox {  
    position : fixed ; 
    top : 0 ; 
    left : 0 ; 

        /*  --------   USing   100 VW   INStead   Of    100 %  ,   BECause    100 %   WIll   ADD   EXTRA   SCRollBAR   WHen   OVerFLOW-Y  ------  */
    width : 100vw ;  
    height : 100vh ; 

    background-color :  rgb(128,128,128, 0.5 ) ;    /* rgba(212, 192, 224 , 0.6 ) ;  */       /*       rgba( 204, 232, 207 , 0.4 ) ;    */    
    /* var(--reallyLightPurple) ;  */
    /* opacity : 0.4 ;  */
    
    z-index : 14 ; 

    display : none ;     
         /*      display : flex ;      */

    padding : 15px 0 15px 0  ;  

    justify-content: flex-start ; 
    /* justify-content: center ;  */
    align-items: center ;

    flex-direction: column ;    


    overflow-y : scroll ;  
    /* flex-wrap : nowrap ;    */

}

/* .show { 
              display : flex ;     
         justify-content: center ; 
         align-items: center ;
} */



.upperDiv{ 
    display : flex ;   

    justify-content: center ;    
    align-items: center ;   
    
    position : relative ;   

    /* margin-top : 15px ;     */
}


.upperDiv  .fa-times { 

    color : red ;  font-size: 30px ;    
    /* background-color: aliceblue ; */
     height : 23px ; width : 23px ;   text-align: center ;  
      display : inline ; 

    position : absolute ;    top : 0 ;   right : 10px  ;  
}


.upperDiv  .delete_icon_span  {      

    color : red ;  font-size: 16px ;    font-weight: bold ;
    background-color: aliceblue ;   padding : 2px 10px 2px 10px ;  border-radius: 8px ;  border : 1px solid purple ; 
     /* height : 23px ; width : 23px ;   text-align: center ;   */
      display : inline ; 

    position : absolute ;    top : 0 ;   right : 10px  ;  

    cursor : pointer ;  
}

.upperDiv  .delete_icon_span:hover { 
    background-color: red ;  
    color : white ;
}


.arrow { 
    font-size : calc(5vw + 10px)!important ;      
            /*    Use   CALC (   + 10 PX ) ,   ADD   + 10 PX   So   ARROW  is  NOT   TOO  SMALL   WHen  WINDow / SCREEN   is   TOO  SMALL   */
                    /*      MUST   !IMPORTANT    ,  or   FONT-SIZE   NOT   APPLied     */
    color : var(--mainColor ) ; 
    opacity : 0.7 ; 
    font-weight: bold ;  

    cursor : pointer ; 
    padding : 1vw ;   /*  10px ;  */  

    display : block ; 
}  

.arrow:hover { 
    opacity : 1 ; 
}

.imageNumberDiv { 
    text-align: center ;

    margin : 0 1vw 0 1vw ; 

    position : relative ;   
}


.likeContainer { 

    position : absolute ; 
    bottom : 0 ; 
    left : 100% ; 

    margin : 0 2px  3vh  1vw  ; 

    display : flex ;  
    flex-direction : column ;   

    background-color : rgb(227, 237, 205 , 0.7 ) ;    /*  rgba( 204, 232, 207 , 0.8 ) ;  */     
                        /*  rgb(174, 126, 189) ;  */   
                        /*  var(--filterAreaBackground)  ; */   

    padding : 10px 2px 4px 2px!important ;    /*    To   OVerWRIte   container-card-shadow-border 's   PADding   &&   BORDer-RADIUS    */
    border-radius : 40px!important ;   

}


.likeContainerSmall {   
    position : absolute ; 
    bottom : 0px ; 
    right : 0px ; 

    margin : 0 5px  10px  0  ; 

    display : flex ;  
    flex-direction : column ;   

    background-color : rgb(227, 237, 205 , 0.7 ) ;    

    padding : 10px 2px 4px 2px!important ;    /*    To   OVerWRIte   container-card-shadow-border 's   PADding   &&   BORDer-RADIUS    */
    border-radius : 15px!important ;   

    justify-content : center ;   
    align-items : center ;  
}



.likeContainer .heart {     /*   heart   FILLing   */

    font-size: calc( 2.2vw + 16px )!important  ;   

    -webkit-text-stroke-color : rgb(174, 126, 189) ;    

    /* opacity : 0.8 ;  */

    cursor : pointer ;   
}  

.likeContainerSmall .heart {     /*   heart   FILLing   */

    font-size: 23px!important  ;   

    -webkit-text-stroke-color : rgb(174, 126, 189) ;    

    /* opacity : 0.8 ;  */

    cursor : pointer ;   
}  


.likeContainer  .heartActive { 
    color : purple ;
    -webkit-text-stroke-width : 3px ;   

}

.likeContainerSmall .heartActive {     /*   heart   FILLing   */

    color : purple ;
    -webkit-text-stroke-width : 2px ;  
}  

.likeContainer  .heartActive:hover  {  
    
    font-size: calc( 2.2vw + 10px )!important  ;   

    -webkit-text-stroke-color : var(--mainColor)!important ;   
    -webkit-text-stroke-width : 2px ;   
    color :rgb(174, 126, 189) ; 
    /* opacity : 1 ;   */
    
    padding : 3px ;     /*    To   PREVent    LIkeNUM   POSition   SHIFT   WHen   HOVER   on    HEART   ICON    */

}

.likeContainer  .heartInActive { 
    color :rgb(215, 189, 223) ;  
    
    -webkit-text-stroke-color : var(--mainColor)!important ;   
    -webkit-text-stroke-width : 2px ;   
}

.likeContainerSmall  .heartInActive { 
    color :rgb(215, 189, 223) ;  
    
    -webkit-text-stroke-color : var(--mainColor)!important ;   
    -webkit-text-stroke-width : 2px ;   
}

.likeContainer  .heartInActive:hover { 
    color :purple ;  

    font-size: calc( 2.2vw + 20px )!important  ;   

    -webkit-text-stroke-color : rgb(176, 101, 199)!important ;  
    -webkit-text-stroke-width : 3px ;  

    margin : -2px ;     /*    To   PREVent    LIkeNUM   POSition   SHIFT   WHen   HOVER   on    HEART   ICON      */    
                    /*    NEGetive   MUST   MARGin   ,   Can   NOT   PADding    */    
}

.likeContainer span {     /*   LIKe  NUM     */
    font-size : calc( 0.6vw + 13px ) ; 
    color : purple ; 
    font-weight : bold ;   

    /* opacity : 0.8 ;  */
}   

.likeContainerSmall span {     /*   LIKe  NUM     */
    font-size : 15px ; 
    color : purple ; 
    font-weight : bold ;   

    /* opacity : 0.8 ;  */
}   



#imageNumberP { 
    font-size : 15px ; 
    color : white ; 
    font-weight: bold ; 

    /* position : fixed ;  */
    /* top : 5px ;  */ 
    background-color: var(--mainColor); 
    margin : 0 2px 0 2px ;   
              /*    HORizontal   MARGin   ==  IMAGE 's    BORDER   WIDth    */
    /* padding : 5px auto 3px auto ;  */

    border-top-left-radius: 8px ;
    border-top-right-radius: 8px ;
}


/* .lightbox .imgOverflowContainer { 
    width : 100vw ; 
    height : 100vh ; 

    overflow: scroll ;  
    white-space: nowrap;
} */

#lightbox img { 
    
    /* width :auto;  */
    max-width : 85ww ; 

    min-height : 50vh ; 

    /* height : 85vh ;        */
            /*   HEIGHT   &&  MAX-HEIGHT   CO-EXIST  ?????    ,  width : AUTO     */
    max-height : 85vh ; 

    z-index : 15 ; 
    
    border: 2px solid var(--reallyLightPurple); 
    border-top: 0;
    background-color: var(--mainColor);;
    padding : 4px ; 

    cursor:not-allowed ; 

}


.image_description_lightbox { 
    font-size: 16px  ;      font-weight : bold ;      
    color : purple ;   
    /* background-color: rgb(175, 175, 175) ;    */
    
    border-radius: 5px ;

    /* position : absolute ; 
    bottom : 0px  ; 
    left : 0px ; right : 0px  ;    */

    text-align : left ;   
    margin : 0px 15px 0px 15px ;  
    /* display : block ; none ;  */  
    
    padding : 3px 20px 3px 20px ;   

}

.image_description_title_lightbox { 
    font-size: 14px  ;     
    color : purple ;   
    /* background-color: rgb(175, 175, 175) ;    */
    
    border-radius: 5px ;

    /* position : absolute ; 
    bottom : 0px  ; 
    left : 0px ; right : 0px  ;    */

    text-align : left ;   
    margin : 0px 15px 0px 15px ;  
    /* display : block ; none ;  */  
    
    padding : 3px 0px 3px 20px ;   

    /* display : flex ; 
    flex-direction : row ;   */

    /* width : fit-content ;  */   /*  NOT   WORKing  */  

    /* white-space : nowrap ;    */
    
}

.image_description_title_lightbox .span1 {   

    font-size : 16px  ;     
    font-weight : bold ;  

}     

.image_description_content_lightbox { 

    font-size: 14px  ;      
    color : purple ;   

    text-align : left ;   
    margin : 0px 15px 0px 0px ;  

    padding : 3px 20px 3px 0px ;   
}  

.image_description_p_div { 
    display : flex ;   
    flex-direction : row ;   
    justify-content : space-between ;  
}


.image_info_div_lightbox {   

    background-color : rgb(227, 237, 205 , 0.9 ) ;  
            /* rgb(217, 188, 233) ;*/  /*  rgb(227, 237, 205 ) ;   /* rgb(204, 232, 207) ;  */   /* rgb(215, 189, 223) ; */   

    border-radius : 10px ;   

    padding : 8px 0 8px 0 ;  

    margin : 6px 10px ;  
    display : inline-block ; 

}  


.image_description_div  { 
    display : flex ;   flex-direction: row ;   

    /* width : 100% ;  */


    /* text-align: right ;   */
}

/* .edit_button_lightbox   {      */
.image_description_div  button {   
    font-size: 15px ;   font-weight: bold ;    
    border: 3px  solid  purple ;  border-radius : 10px ;   
    background-color: inherit ;    padding : 2px 12px 2px 12px ;      margin : 0 0px 0 15px  ; 
    /* position : absolute ;   top : 0  ; right : 5% ;    display : inline ;    */

    cursor : pointer  ;  

}  

.submit_image_description_button { 
    color : red ; 
}   

.edit_button_lightbox  ,  .cancel_image_description_button{ 
    color : purple ; 
}  

.edit_button_lightbox:hover   ,   .cancel_image_description_button:hover {     
    color : white ; 
    background-color: purple ;  
}  

.submit_image_description_button:hover {     
    color : white ; 
    background-color: red;  
}      


.image_description_input { 

    /* display : flex ;  flex-grow: 1 ;   */
    padding : 3px 10px  ;   font-size: 18px ;    

    width : 60vw ;                   /*        60vw      VIewWIDTH        */                   
    
    /* border : 1px solid  purple  ;    */
    border-radius : 5px ;     
    outline :  1px solid var( --textareaOutlineColor )  ;  

    background-color : var( --textareaBackgroundColor ) ;     
    
}
















               /*   -------------------------------------     FRom    MODal .CSS     ------------------------------------   */



/*  ---------------------------     Modal      Pop - Up  Window    ----------------------------  -*/

    .confirm-popup{

        z-index  : 10 ; 

        position: absolute;  
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;

        background-color: rgba(215, 190, 238, 0.4 );


        display: none; 
        /*    will  change  to    display :  BLOCK   When  SHow      */

    }

    .confirm-popup-container{

        
        position: fixed;  
        /*    ---------    MOVEd   to  EACH   confirm-popup-container 's   style =    ----------  */
        top: 30%;
        left: 30%;
        
 

        background: rgb(185, 214, 238);
        max-width: 400px;
        padding: 5px 20px 5px 30px ;
        border-radius: 10px ; 
        text-align: center;
        border : 1px solid grey;

        /* position: relative; */

    }

    .confirm-popup-container p {
    padding: 40px  20px ;
    font-size : 18px ;
    color : purple ; 
    font-weight: bold; 
    margin: 0 25px ; 
    }


    .select_image_preview { 
        width : auto ; 
        max-height: 250px;

        max-width : 94% ; 
        
        /* display : none ;  */
        margin-top: 5px ;
    }

    
    .button_a a:hover {
        background-color : rgba( 128, 0, 128 , 0.35 )!important ; 
        /* color : white ;  */
    }

    .confirm-buttons { 
        text-align: right ;
        margin-right : 3%  ; 
    }

    .confirm-popup button { 
        margin-bottom:16px ; 

        text-align:center;
    
        /* border:none; */
         /* display:inline-block; */
        padding: 6px 14px;
        vertical-align:middle;
        overflow:hidden;
        
        text-decoration:none;
        color: purple;
        font-weight: bold; 
        font-size: 15px;
        
        border-radius: 10px;
        border: 1px solid purple ; 
    
        background-color : inherit ; 
        /* var(--cardBackgroundColor) ;  */
    
    
        cursor:pointer; 

        box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) ; 
        margin-left : 10px ; 
    
    }





    .confirm-buttons button:first-child  {
      color : red ; 
    }



    .confirm-buttons button:first-child:hover {
    background-color: red ; 
    color : white ; 
    }

    .confirm-buttons button:last-child:hover {
        background-color: purple ; 
        color : white ; 
    }

    .confirm-popup-close {
    position: absolute;
    top: 5px;
    right: 10px;
    width: 30px;
    height: 30px;
    color: red;
    font-size: 25px ;
    font-weight: normal;

    cursor : pointer ; 

    background-color: inherit;
    }

    .confirm-popup-close:hover { 
        /* opacity : 60% ;  */
        color : purple ; 
    }





    .city_warning_modal { 

        z-index: 10 ;      /*      to   ON  TOP       */

        display :  none ; 
        /* text-align: center; */
        width : 100% ; 
        height : 100% ; 

        position : absolute ;      
           /*  CONTaining   <DIV  class = "div_for_modal_extend" >   Has  to  be   ABSolute  , or   MODAL  Will  NOT  EXTEND  to  WHOLE  PAGE */
        top : 0px ;          /*         */
        left : 0 ;    
        background-color: rgba(219, 218, 219, 0.4 ) ; 

        filter: blur(0);

    }


    /* .city_warning_modal  div {  */
    .backgroound_color_div { 
       
        /* background-color: rgb(235, 126, 235) ;  */

        margin : 200px  15%  0  15% ; 
        /*    use   MARGIN  &&  PADDing  to  CENTER  ;  if  use   text-align: center  ,  CHILD   ELEMent    will  OverLAP   When   TEXT  is  WRAPped   */


        /* width : 100% ;  */
        /* text-align: center  ;    */
              /*     IF  Want  to      CHILD   ELEMent      text-align:  CENETR    ,   Can   NOT  Define  WIDTH  ,   or  WIDTH  MUST  100%  */   

    }

    .city_warning_modal  p { 
      color : red ; 
      font-size: 16px ; 
      font-weight:  bold ;

      background-color: rgb(190, 170, 190) ; 
      
      border-radius: 15px ;

      padding : 30px   10%   ; 

      /* width: 900px ;   */
      /* display : inline ;   */
           /*    PARENT   ELEMent 's    text-align    ONLY  Works    for     INLine   ELEMents     ONLY  ;  
                  BUT  IF  WRAP  ,   Background  will  OverLAP    */    
      
    }



















               /*   -------------------------------------     FRom    TERMs .CSS     ------------------------------------   */


.main_outter_container {   

    display: block ;  
    position : relative ;  
    text-align: right ; 
}  

.terms_container_outter_right { 
    display : inline-block ;   
    width : calc( 70vw - 16px ) ;  

    text-align : left ;   

}

.terms_header_h1 {    

    color : var( --mainColor ) ;    
    text-align : center ;    
    font-weight: bold ;    
    font-size : 35px ;     
    margin : 45px  3vw  20px 3vw ;    

    letter-spacing : 3px ;    
}     



/*     LEFT   MENU    DRopDOWN    DIV      */   

.terms_menu_dropdown_div {    

    display : none ;   /*  block ;   */  
    text-align :  left  ;   

    width : 100% ;   

    background-color : var( --reallyLightPurple ) ;   
    padding : 8px 20px ;   
    position : fixed ;   
    top : 59px ;  

    /* z-index : 2 ;   */
                   
}   

#terms_menu_dropdown_button {    

    display : block ;  
    font-size: 14px ;   
    color : white ;   
    font-weight: bold ;   
    background : var( --mainColor ) ;     /*  var(--citySelectorBackground) ;   */   

    padding : 3px 30px 3px 30px ;  

    border : 1px solid purple ;   
    border-radius : 8px ;    

    cursor : pointer ;   
}   


.terms_menu_container_div {    
    
    background-color :  var( --formInputBackgroundColor ) ;    /*   var( --reallyLightPurple ) ;   */   
    border : 1px solid var( --mainColor ) ;    
    border-radius : 12px ;

    display : inline-block ;   

    vertical-align : top ;   

    width : 27vw ;  

    margin : 30px 0vw 0 2vw ; 
    padding :  calc( 1.2vw + 10px )  1.5vw 0 1.5vw ;   

    text-align : left ;   

    max-height : calc( 100vh - 140px ) ;   
    overflow-y : auto ;       
        /*  OVerFLOW : AUTO   WIll   HIde  SCRollBAR   is   NOT   SCRollABLE ;   OVerFLOW : SCROLL   Will   SHow   SCRollBAR   EVen  If   NOT   SCRollABLE   */


    position : sticky ;       /*  fixed ; */    

    left : 0 ; 

    top : 60px ; 

}    

.terms_menu_container_div::-webkit-scrollbar {
  width: 8px;
}

.term_title_small {
    color: var( --mainColor ) ;   
    font-size: 19px;
    font-weight: bold;
    margin: 0 ; 
    
    text-align : center ;   

}

hr { 
    border:0;
    border-top : 1px  solid  var( --mainColor ) ;    /*  white  */
    margin : 12px 8px  -2px  8px ;    
}

.terms_menu_container_div  ul {    

    padding : 0 0 0 20px ;   
    /* background-color : red ;  */

}   

.terms_menu_container_div  li {    

    margin : 5px 0 ;  
    color : rgba( 128, 0, 128 , 0.9 ) ;   
            /*  var( --mainColor ) ;  */     /*   rgba(0, 0, 0 , 0.8 ) ; */     

    position: relative ;   /*   For   HOVER 's   :BEFORE   SHow   an   UNDerLINE    */      
}   



.terms_menu_container_div li:after {    /*    MUST   DEFine   NOT   HOVERed   :AFTER   To   Make   :HOVER:AFTer 's   TRANSition   EFFect   SHOW     */   
    background-color:  blueviolet ;    /* var( --mainColor ) ;   */   
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    margin: 5px 0 0;
    opacity: 1;
    position: absolute;
    transition: all .1s ease-in-out;
    transition-duration: 0.75s;
    width: 0 ;  
} 

.terms_menu_container_div li:hover:after {

    transition: all .1s ease-in-out;
    transition-duration: 0.75s;
    width: 100%;  

}   


.terms_menu_container_div  a {    

    font-size : 15px ;  
    color : rgba( 128, 0, 128 , 0.75 ) ;   
                        /*  var( --mainColor ) ;  */     /*   rgba(0, 0, 0 , 0.8 ) ; */     
    font-weight : bold ;   

    text-decoration : none ;   
}    

.terms_menu_container_div  li:active ,   .terms_menu_container_div a:active  {    

    color : red ;   /*  blueviolet ; */   /*  var( --mainColor ) ;  */     /*   rgba(0, 0, 0 , 0.8 ) ; */     
}   

.terms_menu_container_div li a:focus  {    

    color : red ;    /*    rgba( 34, 32, 32, 0.7 ) ;  */   

}  


/*     RIGHT    MAIN    DIV      */    

.terms_container_div {  

    display : inline-block  ;  

    background-color : rgb(194, 230, 241) ;    /*   lightblue   */     
    border : 1px solid var( --mainColor ) ;   

    border-radius : 30px ;
    margin : 0 4vw 2vw 4vw ;  
    padding : 2vw 5vw  calc( 3vw + 18px )  5vw ;    

}   

.info_p { 
    font-size : 16px ;   
    color : var( --mainColor ) ;  
    font-weight : bold ;   

    margin : 7px 0 0 0 ;   

    line-height : 27px ;   

    letter-spacing : 2px ;    
}   

.terms_container_div  p:not( .info_p ) {     
    font-size : 15px ;    
    color : rgba(0, 0, 0 , 0.8) ;   

    margin : 0px 0 0 0 ;   

    line-height : 28px ;     

    letter-spacing : 2px ;    
}  


.terms_container_div  h3 { 
    font-size : 17px ;   
    font-weight : bold ;      

    margin : 25px 0 10px 0 ;    

    letter-spacing : 2px ;    

    
    scroll-margin-top : 80px ;     /*    Add   SPACE / MARGin    For    ACHORing      */       
    
}  




@media screen and (max-width:549px) {   

    .main_outter_container {  

        text-align : center ;    
    }

    .terms_container_outter_right {  
        /* display : block ;   */
        width : calc( 100vw - 16px ) ; 

    }   

    .terms_menu_dropdown_div {    

        display :  block ;   
    }

    .terms_menu_container_div {  
        width : calc( 90vw - 16px ) ; 

        margin : 0 5vw 0 5vw ; 

        display : none ;     

        position : fixed ;   
        top : 100px ;   

        max-height : calc( 98vh - 100px ) ;  

        border : 2px solid var( --mainColor ) ;   
        box-shadow: 0px 0px 10px 3px rgb( 128, 0, 128 , 0.8 ) ;  /* , 5px 2px 10px 5px rgb(128, 128, 128) ; */   
        
    }   


    .terms_container_div  h3 { 

        scroll-margin-top : 110px ;     /*    Add   SPACE / MARGin    For    ACHORing      */          
    }    

}



/*      For    CONTACT_US .html      */      

    .contact_outter_center_div {    

        display : block ;  
            /*      display :  BLOCK    MAkes   < DIV >   EXTend   To   FULL-LINE   */      
        text-align : center ;    

    }   

    .contact_form_container_div {   

        border: 1px solid var( --mainColor ) ;   
        border-radius: 16px ;   

        display : inline-block ;    
        background-color : rgb(194, 230, 241) ;    /*   lightblue   */

        width : calc( 94vw - 16px ) ;    
        max-width : 1000px ;  

        text-align : left ;   
        margin : 3vw  3vw ; 
        padding : 3%  5% ;   
    }

    .contact_form_container_div  .terms_header_h1 {    

        color : var( --mainColor ) ;    
        text-align : center ;    
        font-weight: bold ;    
        font-size : 35px ;     
        margin : 10px  3vw  20px 3vw ;    

        letter-spacing : 3px ;    
    }     

    .contact_form_container_div   .info_p {    

        font-size : 16px ;   
        color : var( --mainColor ) ;  
        font-weight : bold ;   

        margin : 7px 0 0 0 ;   

        line-height : 27px ;   

        letter-spacing : 2px ;    
    }   

    .contact_form_container_div  .info_p_outter {  
        margin : 7px 20px 0 20px ;    
        /* text-align : left ;    */
    }   


    .contact_form_container_div  .input_header {    

        font-size : 21px ;   
        color : var( --mainColor ) ;  
        font-weight : bold ;   

        margin : 35px 0 7px 0 ;   


        letter-spacing : 2px ;    
    }

    .contact_input_div:not( .contact_input_div_full )  {  

        width : 100%  ;    

        max-width : 350px ;  

        position: relative ;   

        margin :  17px 0 0 0 ;   

    }  

    .contact_input_div_full  {  

        width : 100%  ;    

        position: relative ;  

        margin :  17px 0 0 0 ;   
    }

    .contact_input_div  input  ,  .contact_input_div  textarea  {
        background-color: inherit ;  
        border: 1px solid var( --mainColor ) ;   
        border-radius: 10px ;   /*  22px;  */   

        color: black ;        /*   var( --mainColor ) ;   */       

        font-size: 16px; 
        font-weight : bold ;  

        text-overflow: ellipsis;  

        width: 100% ;     

        letter-spacing : 2px ;      

        outline-color : purple ;   
        /* outline: 1px  solid  var( --mainColor ) ;    */

    }

    .contact_input_div  input  {  
        height: 46px ;    
        padding: 0 25px 0 25px;  
    }   

    .contact_input_div  textarea  {  
        height: 440px ;    
        padding: 20px 25px ;  

        line-height: 1.7 ;   

        width : 100% ;  
        resize : none ;  
    }   


    .contact_input_div  input::-moz-placeholder  ,  .contact_input_div  textarea::-moz-placeholder  {
        /* color : rgba(128, 0, 128 , 0.6 ) ;    */
        letter-spacing : 2px ;  
    }

    .contact_input_div  input::placeholder  ,  .contact_input_div  textarea::placeholder {
        /* color : rgba(128, 0, 128 , 0.6 ) ;    */
        letter-spacing : 2px ;      
    }

    .contact_input_div  label {   

        display: none ;  

    }



    .contact_input_div  input:hover  ,  .contact_input_div  textarea:hover  {    

        border-color: blueviolet ;   
        outline: 1px  solid  var( --mainColor ) ;   
        /* outline-color:  var( --mainColor ) ;    */
        background-color : rgb(216, 240, 248) ;   /*  lightblue ;    */   /*     */         /*  var( --formInputBackgroundColor ) ;  */   
    }


    .contact_input_div:hover   label  {
        background-color : var( --mainColor ) ;   
        color : white ; 
        display: block!important;
        font-size: 13px;
        font-weight: bold ;
        left: 23px;
        padding : 1px  8px ;   
        position: absolute;
        top: -8px ; 

        letter-spacing : 2px ;
        
    }  

    .contact_input_div:hover  input::placeholder  ,  .contact_input_div:hover  textarea::placeholder   {

        font-size : 0 ;   
    }    

    .contact_input_div:hover  input::-moz-placeholder  ,  .contact_input_div:hover  textarea::-moz-placeholder   {

        font-size : 0 ;   
    }    


    /* .contact_input_div  textarea:active,
    .contact_input_div  textarea:focus  {    
        border-color: #fff;
        outline: 0
    } */



    .contact_button_div  {    

        display : flex ;   
        justify-content : space-between ;   
        position : relative ;   
        margin : 20px 0 0px 0 ;   
    }    


    .contact_form_container_div  .submit_info_span {   
            
        color : rgba(0, 0, 0 , 0.6 ) ;   
        font-size : 15px ;   
        font-weight : bold ;   

        display : inline-block ;     

        margin-top : 20px ;   

        /* position : absolute ;  
        left : 0 ;   
        top : 5px ;    */
    }   

    .contact_button_inner_div  {   

        display : block ;   
        text-align : right ; 
    }    

    .contact_submit_button { 
        background-color : var(--reallyLightPurple) ;    /*    */    /*   inherit ;    */   
        font-size:  18px ; 
        color : var( --mainColor ) ; 
        font-weight: bold ; 
        padding : 7px 42px 7px 42px ; 
        border : 2px solid var( --mainColor ) ;
        border-radius:  10px ; 

        letter-spacing : 2px ;   

        margin : 20px 20px 25px 20px ;   

        cursor : pointer ; 

        display : inline-block ;  

        width : 140px ;  

    }    

    .contact_submit_button:hover { 
        background-color: var( --mainColor ) ;
        color : white ; 
    }



    @media (max-width:549px){    

        .contact_button_div  {    
            display : block ;   
            /* justify-content : space-between ;    */
            /* position : relative ;   
            margin : 40px 0 25px 0 ;    */
        }    

        .contact_form_container_div  .submit_info_span { 
            margin-top : 0 ;  
        }

        .contact_button_inner_div  {   
        
            text-align : center ;  

        }    
        .contact_submit_button {   

            width : calc( 100% - 40px )  ;    

        } 
    }    
















               /*   -------------------------------------      FRom     NEW_REGister_LogIN .CSS      ------------------------------------   */





/*  FIX   BUG   :   MIcroSoft   EDGE   BROWser 's   PassWOrd   FIELD    SHOWs   ADDitional   fa-eye  < I >   icon
    when once you type something in the field.    */   
    ::-ms-reveal {
        display: none;
    }
    
    
    /*    CENTER   the  FORM    &&   the  LINK  */
    .form_link_container_div { 
        text-align: center; 
    }

    
    .form_link_container_div  form , .add_gallery_main_container  form {      
        text-align: center ;
        display: inline-block ;    /*    INLine-BLOCK   Will  Make    BOX   FIT   CONTent  ,   NOT   FIT   ENTire   SCREEN     */    
     /*  MUST   display : INLINE-block ,  or   INPUT   Will  be   THrown  to   RIGHT ,  BEcause  .elems_horizontal_div   justify-content: RIGHT ;  */
        margin-top: 30px ;
    }
    
    
    .elems_horizontal_div  ,  .elems_horizontal_div_description  { 
        /* form div { */
        
            /* display : flex ; */
        
            /* align-items: center ; */
            /*    to   Make   2  ELEMents   HORIZONTAL    ALIGN   ,     or  .Field_NAME 's  MARGIN  Will  make  .INPut_BOX 's  HEIGHT   TALL ;   
                       or  .INPut_BOX 's  MARGin  will  MAKE  .Field_NAME  NOT  VERTICALly  CENTER      */ 
        
            /* justify-content: right ;  */
                /*   To   RIGHT   ALIGN   INPUT  BOX   */
                
            padding: calc( 1vw + 14px ) 1vw calc( 1vw + 14px ) 1vw ;    /*   20px 50px 30px 20px ;   */    
    
            
            text-align : right ;       
                         /*          */
    
            vertical-align : top!important  ;    
            
    }    
    
    
    .elems_horizontal_div_description  .textarea_button_inner_div   ,   .vertical_align_top  .textarea_button_inner_div   {  
    
        vertical-align : top!important  ;    
    }
    
    .elems_horizontal_div:has(  #age_checkbox_div )  .title_name  ,   
    .elems_horizontal_div_description    .title_name   ,   .vertical_align_top  .title_name   {  
    
        vertical-align : top!important  ; 
    
        margin-top : 7px ;    
    
    }
    
    
    /* .vertical_align_top {    
    
        vertical-align : top ;     
    
    } */
    
    
    .title_name  {   /*   ,  .elems_horizontal_div  p:first-of-type  {   */    
    
        color : purple ;
        font-size: var( --formInputTitleFontSize ) ;    
        font-weight: bold ; 
    
        font-family: "Times New Roman", Times, serif , "Courier New" ;  
    
        /* margin: 0px 5px 0px 5px ;  */
        margin: 2px  calc( 0.7vw + 3px )  0px   calc( 0.05vw + 6px )  ;  
            /*    <p>  Tag   uses   it's  own   BIG   MARgin   if   NOT   REDEFine    */
    
        /* width : 200px ;  */
        text-align: right ;   
    
        display : inline-block ;  
    
        vertical-align :  middle!important  ;   
                            /* top ;   */   
    
        /* padding-top : 5px ; */
       
    }  
    
    
    
        /*    Using   FLEXBOX   :       display : flex   ;   to  Center   INPUT  TEXTAREA   &&   BUTTON      */
        /*   FLEXBOX   Using         DISPLAY : FLEX    &&     ALign-ITems   &&     JUStify-CONTent     ,   NOT   Using     TEXT-ALign : center  */
        /* display : flex ;        
        align-items: center ;
        justify-content: center; */
    
    
    .classes_textarea_align_items  {    /*    FOR   CLassES  's    TEXTAREA 's    elems_horizontal_div  < DIV >   LABEL  < P >  Stay  on  TOP    
                                                  When  < TEXTAREA >    AUtoEXPAND     */
        align-items: flex-start  ;     
    }    
    
    
    /* #classes {    */     
    /* .input_box { */
                /*   .elems_horizontal_div textarea    for   课程   CHAnged  from < INPUT >   to   < TEXTArea >    */     
    .form_link_container_div  form  input , .add_gallery_main_container  form  input  ,  
    .elems_horizontal_div textarea  ,   .elems_vertical_div textarea ,  .textarea_button_inner_div  textarea  { 
        border-radius : 5px ; 
        background-color: var(--formInputBackgroundColor ) ;   /*   rgb(225, 209, 240) ;  */   
        font-size: var( --formInputFontSize)!important ;  
        color : var( --formInputTextColor )  ;     
        font-weight : bold ;   
    
        padding : 6px 10px 4px 10px ; 
    
        margin : 0px 5px 0px 5px ;  
    
        /* display : inline-block ;  */
    
        border : 1px solid purple ;  

        outline-color : var( --textareaOutlineColor ) ;   
        /*    OUTLine  :   TExtARE   &&   INPUT 's   INNer_BORDer   WHen   FOCUSed       */   
    
    }
    
    
    .elems_horizontal_div textarea  , .textarea_button_inner_div  textarea  {      
            /*    .textarea_button_inner_div  textarea    Set   RESize : NONE   To   DISAble   FONT-SIZE   AUTO  RESize   WHen   USing   MOBILE 's   BROWSer    */   
        resize: none;   
        overflow-y: hidden ;        /*    to  disable / hide   SCrollBAR    */
    }
    
    
    /*   -----------------------       for    INStitution    INFO    Page   ------------------------- */
    .button_and_textarea_div {
    
        display : flex ;
    
        align-items: flex-start ;  
        /*   align-items:  FLEX-START  ;    */ 
    
        justify-content: right ; 
            /*   To   RIGHT   ALIGN   INPUT  BOX   */
            
        margin: 20px 0 10px 0 ;  
    }
    
    .textarea_button_inner_div { 
        width : 82% ; 
            /*      MUST   DEFine    WIDTH  ,   OR   will  be   DEFAULT     */
    }
    
    
     /*    :not( .elems_horizontal_div textarea )   for   课程   CHAnged  from < INPUT >   to   < TEXTArea >    */     
    .form_link_container_div  form  textarea:not( .elems_horizontal_div textarea , .textarea_button_inner_div textarea ) , 
    .add_gallery_main_container  form   textarea:not( .elems_horizontal_div textarea , .textarea_button_inner_div textarea ) {      
        border-radius : 5px ; 
        background-color: var(--formInputBackgroundColor ) ;   /*   rgb(225, 209, 240) ;  */   
        font-size: var( --formInputFontSize)!important ;  
        color : var( --formInputTextColor )  ;     
    
        padding : 6px 10px 4px 10px ; 
    
        /* margin : 0px 0 0px 10px ;   */
        /* display : inline-block ;  */
        border : 1px solid purple ; 
    
    
        text-align : left ;
    
        width: 100%;    
            /*      MUST   DEFine    WIDTH  ,   OR   will  be   DEFAULT     */
    
        overflow: auto;  
            /*    overflow: SCROLL     have   BOTH   HORIZONTAL   &&  VERTICAL   SCrollers  ,   overflow: AUTO    ONLY    VERTICAL   SCrollers   */   
        resize: none; 
    }
    
    .shrinkable_textarea {  
    
        width: 100%;    
        /*      MUST   DEFine    WIDTH  ,   OR   will  be   DEFAULT     */
    
    }
    
    
    .age_checkbox {
    
        display : inline-block ;  
        margin-left: 20px  ;  
        padding-right: 25px ;  
    
        padding-top: 10px ;   
        padding-bottom: 10px ;  
        margin-top: -10px ;   
    
    
        border-radius : 5px ;  
    
    }
    
    .age_checkbox  input  ,  .consent_checkbox:not( .anonymous_checkbox )  { 
        border-radius : 0!important ; 
        background-color: #e1d1f0 ; 
    
    
    
        width : 16px!important ; height : 16px!important ;      /*    for   CHECKBOX 's   SIZE    */
    
        /* padding : 0px 10px 0px 10px!important ;  */      /*     PADding     CHAnges    NoTHing         */
    
        /* margin : 0px 8px 0px 35px!important ;   */
    
        /* display : inline-block ;  */
    
        /* border : 1px solid purple ;   */   
        
    
        /*    BORDER   CHAnges   NoTHing     ,   Use   OUTLine   &&   OUTLine-OFFSet  : NEGative    */
        outline : 2px solid purple ;        
        outline-offset: -2px;   
    
    
        cursor: pointer ;   
    
        accent-color: rgb(170, 49, 170) ;     /*   for   CHeckBOX 's    BAckGroundCOLOR    */
    
    
        min-height : 16px!important ;   
    
        vertical-align: middle ;        
            /*   for   CHeckBOX   &&   SPAN 's   VERTical   CENTER   ,  The  OUTter  < DIV > 's   align-items: center   NOT   WORKing      */    
    
    }
    
    .age_checkbox  input  { 
        margin : 0px 8px 0px 35px!important ;  
    } 
    
    .input_div  {   /*    ,  .elems_horizontal_div  div:first-of-type  {     */    
    
        position : relative ;    
    
        display : inline-block ;   
    
        
    
    
        margin-bottom : 22px ;   
    
    }   
    
    .shrinkable_input  ,  .input_div input  {  /*  ,  .elems_horizontal_div  div:first-of-type  input  {  */   
        
    
        display : inline-block ;  width : 100% ;   
    
    
        /* width : calc( 98vw - 28px) ;  
        max-width : 200px ;  */
    
    
        border-radius : 5px ; 
        background-color: var( --formInputBackgroundColor ) ;   /*   rgb(225, 209, 240) ;  */   
        font-size: var( --formInputFontSize) ;
        color : var( --formInputTextColor ) ;       
        font-weight : bold ;
    
        padding : 6px 10px 4px 10px ; 
    
        margin : 0px calc( 0.05vw + 7px ) 0px  0 ;  
    
        /* display : inline-block ;  */
    
        border : 1px solid purple ;  
    
        outline-color : var( --textareaOutlineColor ) ;   
        /*    OUTLine  :   TExtARE   &&   INPUT 's   INNer_BORDer   WHen   FOCUSed       */   
        
        min-height : 40px ;   
    
        vertical-align :  middle!important  ;   
        /* top ;   */   
       
    }
    
    
    .verify_institute_form   .shrinkable_input  , .verify_institute_form .input_div input  {   
        width : calc( 95vw - 35px) ;  
        max-width : 200px ; 
    }
    
    .sign_in_form   .shrinkable_input  ,   .register_form  .shrinkable_input  , .add_institute_path  .shrinkable_input  {   
        width : calc( 95vw - 35px) ;  
        max-width : 250px ; 
    }
    
    .request_password_form .shrinkable_input {   
        width : calc( 95vw - 35px) ;  
        max-width : 240px ; 
    }
    
    
    .fa-check-circle , .fa-exclamation-circle ,   .fa-eye:not( .nav_bar_eye )  ,  .fa-eye-slash   { 
        position : absolute ;   top : 8px ;  right : 15px ;
    }
    
    
    .fa-check-circle , .fa-exclamation-circle {  
        font-size: 16px  ; 
    
        visibility : hidden ;  
    
    }  
    
    .verify_institute_form   .fa-check-circle , .verify_institute_form  .fa-exclamation-circle  {  
        right : 15px ; 
    }
    
    .fa-eye  ,  .fa-eye-slash {  
        color : purple ;       
    
        font-weight : bold ;    /*  !important  ; */
        font-size: 18px!important  ;   
    
        cursor : pointer ;   
    
    }
    
    
    .add_file_button_verify {  
        /*       If    NO   WIDTH   DEFined  ,  Will  be    DEFAULT  Width   ,   INPUT   &&   SELECT  FILE   Have  DIFFerent    WIDth    */
        width : calc( 98vw - 28px) ;  
        max-width : 200px ; 
    
        font-size: 15px;
    
        padding : 5px 20px 5px 20px ;  
        margin : 0px calc( 0.05vw + 7px ) 0px  0 ;  
    
        border-radius: 10px ; 
        cursor : pointer ; 
        border : 1px solid purple ; 
        color : purple ; 
        background-color: var( --formInputBackgroundColor ) ;       /*  rgb(225, 209, 240) ;  */    
        font-weight: bold ;
    
        display : inline-block ; 
    }
    
    .add_file_button_verify:hover { 
        /* color : white; */
        background-color: rgb(182, 156, 206) ; ;
        
    }
    
    
    .file_name_selected_span , .file_name_selected_span_space_holder  { 
    
        color : purple ;   
        font-size: 14px!important ; 
        font-weight: bold ; 
    
        display : inline-block  ;   
        /* width :auto ;   */
        width : calc( 10vw +  75px ) ;  
        /* width: 200px ;  */
        text-align:  left ;   
                  /*   width: 200px ;       text-align:  left ;     */
        margin : 0px 0px 0px 0px ; 
    
        overflow: wrap ;
        text-overflow: wrap ; 
        white-space: wrap ;    
    
        word-break: break-word;   
        /*    MUST    word-break: break-word;   or   word_connected_by_UNDERSCORE   will  NOT  WRAP    */
    }
    
    /*     WHen   PAGE   FIRST   LOAD ,   file_name_selected_span 's   DISPLay : INLine-BLOCK ,  file_name_selected_span_div 's   DISPLay : NONE     */     
    .file_name_selected_span_div  { 
    
        display : none ;        /* inline-block  ;  */   
        /* width :auto ;   */
        width : calc( 10vw +  75px ) ;  
    
        margin : 0px 0px 0px 0px ;  
    
        text-align:  left ;   
    
    }     
    
    
    .form_link_container_div  form  span:not(.file_name_selected_span  ) , 
    .add_gallery_main_container  form  span:not(.file_name_selected_span  ) { 
        color : purple ;
        font-size: 15px ; 
        font-weight: bold ; 
    
        /* margin: 0px 10px 0px 10px ;   */
            /*    <p>  Tag   uses   it's  own   BIG   MARgin   if   NOT   REDEFine    */
    
        vertical-align: middle ;      
            /*   for   CHeckBOX   &&   SPAN 's   VERTical   CENTER   ,  The  OUTter  < DIV > 's   align-items: center   NOT   WORKing      */   
    }
    
    
    .new_img_preview_div {  
        display : inline-block ; width : 100  ; padding : 0 ; margin : 0 ; 
    
    }  
    
    .new_img_preview_div   img  {   
        width : calc( 10vw +  75px )  ; padding : 0 ; margin : 0 0 0px 0  ; 
    }
     
    
    
    .errorMessage { 
        font-size: 12px!important ;  color : red!important ;  
        
        visibility : hidden ;  
        overflow: visible ;
    
        text-align: start ;
    }
                               
    /*   .errorMessage:not(.classes_span , .age_checkbox_span)  {  */     /*    . errorMessage : NOT (    ,    )    */   
    .errorMessage  { 
        position :absolute ;   left : 20px ; 
        top : 100% ;                 /*   top : 35px;   */    
    
        padding-top : 2px ;       
    }
    
    .errorInsLink { 
        font-size: 14px!important ;  color : purple!important ;  
        
        visibility : visible ;  
        overflow: visible ;
    
        text-align: start ;
        /* text-decoration : none ;    */
    
        font-weight : bold ; 
    }
    
    .errorInsLink { 
        position :absolute ;   left : 20px ; 
        top : 138% ;                 /*   top : 35px;   */    
    
        padding-top : 2px ;  
    }
      
    
    .verify_institute_form   .errorMessage {  
        left : 10px ; 
    }
    
    
    .valid  input  ,   .valid  textarea    ,  .valid  select  ,   .valid  button   { 
        border-color :  purple  ;   border-width: 2px  ;   
    } 
    
    .valid  .fa-check-circle ,   .valid .fa-eye  ,   .valid .fa-eye-slash   { 
        visibility : visible ;    color : purple ; 
    }
    
    
    .invalid  .fa-exclamation-circle  ,   .invalid  .errorMessage  ,   .invalid .fa-eye  ,   .invalid .fa-eye-slash   { 
        visibility : visible ;   color : red  ;    
    }
    
    .invalid  input  ,  .invalid  textarea  ,   .invalid .age_checkbox   ,  .invalid  select   ,   .invalid   button    {     /*    . invalid : is ( . age_checkbox )    */
        border-color :  red!important  ;   border-width: 1px  ;   
    
        /*     < DIV >   MUST   DEFined   BORDer-STYLE  ,   or   BORDer   will   NOT   SHOW      */
        border-style: solid;       
    } 
    
    
    
    .notificattion_span {   
        color : red!important ; 
        font-size: 13px ;
    
        margin : 15px 0 40px 0 ; 
    
        display : block ;    /*    text-align : center   do   NOT   WOrk  With    INLine-BLOCK     */      
    
        text-align : center ;  
    
    }
    
    
    .button_center_div_form_html { 
    
        text-align :  center ;
    
        margin : 0px 0 0px 0 ;
           /*   MARgin   RIGHT  &&  LEFT   Need  to  be  SAME  with   INPUT 's   MARgin   IF   text-ALign :  RIGHT   &&  LEFT  ,  CENTER  NO  Need */  
        
        padding-top : 20px  ;  
    }
    
    
    .age_checkbox  input  ,  .consent_checkbox:not( .anonymous_checkbox ) { 
        border-radius : 0!important ; 
        background-color: #e1d1f0 ; 
    
    
    
        width : 16px!important ; height : 16px!important ;      /*    for   CHECKBOX 's   SIZE    */
    
        /* padding : 0px 10px 0px 10px!important ;  */      /*     PADding     CHAnges    NoTHing         */
    
        /* margin : 0px 8px 0px 35px!important ;   */
    
        /* display : inline-block ;  */
    
        /* border : 1px solid purple ;   */   
        
    
        /*    BORDER   CHAnges   NoTHing     ,   Use   OUTLine   &&   OUTLine-OFFSet  : NEGative    */
        outline : 2px solid purple ;        
        outline-offset: -2px;   
    
    
        cursor: pointer ;   
    
        accent-color: rgb(170, 49, 170) ;     /*   for   CHeckBOX 's    BAckGroundCOLOR    */
    
        vertical-align: middle ;        
            /*   for   CHeckBOX   &&   SPAN 's   VERTical   CENTER   ,  The  OUTter  < DIV > 's   align-items: center   NOT   WORKing      */    
    
    }
    
    .consent_checkbox:not( .anonymous_checkbox ) { 
        margin : 0px -4px 0px 0px ;  
    }
    
    
    .consent_doc_link  {  
        color : red!important ; 
        cursor : pointer ; 
        font-size : 14px ;  
    
    }
    
    .consent_doc_link:hover  {  
        color : rgb(131, 40, 131)!important ; 
    }
    
    
    .submit_button_form_html {
        background-color: inherit ;
        font-size:  18px ; 
        color : rgb(114, 111, 111) ;        /*    Then   CHange     FIRST-CHILD    */
        font-weight: bold ; 
        padding : 4px 16px 4px 16px ; 
        border : 2px solid rgb(114, 111, 111) ;
        border-radius:  10px ;
    
        margin :  30px 8px 20px 8px  ; 
        cursor : pointer ; 
    } 
    
    .submit_button_form_html:first-child {
        /* margin-right : 20px ;  */
    
        color : purple ; 
        border : 2px solid purple ;
    } 
    
    
    .submit_button_form_html:hover {
        background-color: purple ;
        color : white ; 
    }
    
    
    .nav_link_div {
        color : purple ; 
    
        margin : 15px 0 30px 0 ; 
    
        font-size: 16px ; 
        font-weight: bold ; 
    
        text-align : center ;   
    }
    
    
    .nav_link { 
        text-decoration: none ; 
        color : purple!important ; 
        cursor: pointer ;
        /* margin-left: 5px ;   */
    
    
        margin : 15px 0 30px 5px ; 
    
        font-size: 16px ; 
        font-weight: bold ;
    
    }
    
    .nav_link:hover { 
        color : red!important ; 
    }
    
    
    
    
    
    
    
    /*   -----------------------       for   MESSageS .SUCCESS  / .INFO    ,  in  HTML  ELEMent  :  class = { message . TAGs }    ------------------------- */
    
    .message-container { 
        position : absolute ;  
        top : 70px ; 
        left : 0 ; 
    
        /* display : flex ;  
        flex-direction : row ;   
        flex-grow : 1 ;  */
    
        width : 100% ;     /*   width : 100%    to   make   a   ABSolute   POSitioned    < DIV >   to   Grow   WHOLE   ROW    */       
    
    }
    
    .error , .success , .info {  
    
        font-size : 15px ;   font-weight: bold ;   
        padding-top : 5px ;   padding-bottom : 5px ;   
    
        display : inline-block ;     
        /*   inline-block   to  make   margin-TOP    work    ,   BUT   inline-block   will   NOT   make   TEXT-ALIGN : CENTER   work   */    
        /*   block   will   NOT   make   margin-TOP    work    ,   BUT   block   will    make   TEXT-ALIGN : CENTER   work  ,  So  use  PADding-TOP  */  
    
        text-align : center ;  
    
        /* position : absolute ;  
        top : 70px ; 
        left : 0 ;  */
    
        margin-top :  25px ;   
        margin-bottom : 0px  ;
    
        width : 100% ;     /*   width : 100%    to   make   a   ABSolute   POSitioned    < DIV >   to   Grow   WHOLE   ROW    */      
    
    }   
    
    .error { 
        color : red!important ; 
    }
    
    .success { 
        color : blue!important ; 
    }
    
    .info { 
        color : blue!important ; 
    } 
    
    


    .button_and_input_div { 
        display : flex ;
    
        align-items: flex-start ;
        /*    to   Make   2  ELEMents   HORIZONTAL    ALIGN   ,     or  .Field_NAME 's  MARGIN  Will  make  .INPut_BOX 's  HEIGHT   TALL ;   
                   or  .INPut_BOX 's  MARGin  will  MAKE  .Field_NAME  NOT  VERTICALly  CENTER      */ 
    
        justify-content: right ; 
            /*   To   RIGHT   ALIGN   INPUT  BOX   */
            
        margin: 20px 50px 10px 20px ;  
    }


    .button_center_div_old { 

        text-align :  center ;
    
        margin : 40px 20px 0px 20px ;
           /*   MARgin   RIGHT  &&  LEFT   Need  to  be  SAME  with   INPUT 's   MARgin   IF   text-ALign :  RIGHT   &&  LEFT  ,  CENTER  NO  Need */  
        
        padding-top : 20px  ;  
    }




    

/*    -----------------------       For    ADD_GALLeryIMAGE_PATH .HTML        -------------------------------    */         


.elems_vertical_div {  
    display : block ;    text-align : left ;    

    position : relative ;    

}  

.elems_vertical_div:not( :first-of-type ) {   

    margin-bottom : 22px ;  
}  


.input_errorspan_div {   
    position : relative ;    
    display : inline-block ;   

    width : calc( 98vw - 28px) ;  
    max-width : 420px ; 
    
    /* margin-bottom: 22px  ;    */
}   

.optional { 
    margin-left : 5px ;  color : purple ;  font-size : 15px ;  
        display : inline-block  ;    
        text-align : right ;   
              /* float : right ;  */

    font-weight : normal ;   
}




    
/*  --------------------------    RESPonsive   ---------------------------   */    
    
    
    @media only screen and (max-width: 575px) { 
    
        .verify_institute_form  .elems_horizontal_div { 
                
            text-align : center ;       
                     
        }    
    
        .verify_institute_form  .title_name { 
            display : block ;   
            text-align: left ;   
            margin-left : 10vw ; 
            margin-bottom : 3px ;   
        } 
    
        .verify_institute_form  .shrinkable_input  {   /*    ,  .elems_horizontal_div  div:first-of-type  {     */    
    
    
            display : block ;   
    
        
        }   
    
        /* .file_name_selected_span { 
            display : block!important ; 
            text-align : center!important ;  
        } */
    
    }  
    
    
    
    @media only screen and (max-width: 550px) { 
    
        /* .input_errorspan_div {   
            width : 100% ;  
        }    */
    
        .optional { 
                /* display : block  ;    
                text-align : right ;    */
                      /* float : right ;  */
            position : absolute ;   top : 100% ;  right : 0 ;  
        }   
    
    
    }  
    
    @media only screen and (max-width: 500px) { 
    
    
        .request_password_form  .elems_horizontal_div { 
                
            text-align : center ;       
    
            margin-right : 0!important ; 
                     
        }    
    
        .request_password_form  .title_name { 
            display : block ;   
            text-align: left ;   
            margin-left : 4vw ; 
            margin-bottom : 3px ;   
        } 
    
        .request_password_form  .shrinkable_input  {   /*    ,  .elems_horizontal_div  div:first-of-type  {     */    
    
    
            display : block ;   
    
        
        }   
    
        .request_password_form  .input_and_buttons_div  , .elems_horizontal_div  { 
            margin-right : 0!important ; 
        }
    
    }  
    
    
    
    @media only screen and (max-width: 400px) { 
    
    
        .request_password_form  #resend_button  { 
         
            top : 105%!important ;  right : -4vw!important ;   bottom : unset!important ;  left : unset!important ;   
        }
    
    }  
    
    
    @media only screen and (max-width: 420px) { 
    
        /* .elems_vertical_div input { 
            font-size:  20px ;   
        } */
    
        .form_link_container_div  form  input , .add_gallery_main_container  form  input  , 
        .elems_horizontal_div textarea  ,   .elems_vertical_div textarea ,  .textarea_button_inner_div  textarea  { 
            font-size : 18px ;
        }
    
        .title_name { 
            font-size : 18px ;
        }
    
    }
    
    p , input , textarea { 
        text-size-adjust : none!important ;  
    }   
    
    
    
    @media only screen and (max-width: 420px) {   /* 300px */   
    
        .register_form  .elems_horizontal_div { 
                
            text-align : center ;       
    
            margin-right : 0!important ; 
                     
        }    
    
        .register_form  .title_name { 
            display : block ;   
            text-align: left ;   
            margin-left : 4vw ; 
            margin-bottom : 3px ;   
        } 
    
        .register_form  .shrinkable_input  {   /*    ,  .elems_horizontal_div  div:first-of-type  {     */    
    
    
            display : block ;   
    
        
        }   
    
        /* .file_name_selected_span { 
            display : block!important ; 
            text-align : center!important ;  
        } */
    
    }  
    
    @media only screen and (max-width: 380px) {   /* 300px */   
    
        .add_institute_path  .elems_horizontal_div  ,  .add_institute_path  .elems_horizontal_div_description { 
                
            text-align : center ;       
    
            margin-right : 0!important ; 
                     
        }    
    
        .add_institute_path  .title_name { 
            display : block ;   
            text-align: left ;   
            margin-left : 4vw ; 
            margin-bottom : 3px ;   
        } 
    
        .add_institute_path  .shrinkable_input  {   /*    ,  .elems_horizontal_div  div:first-of-type  {     */    
    
    
            display : block ;   
    
        
        }   
    
        /* .file_name_selected_span { 
            display : block!important ; 
            text-align : center!important ;  
        } */
    
    }  
    
    
    
    @media only screen and (max-width: 330px) { 
    
        /* .elems_vertical_div input { 
            font-size:  20px  ;   
        } */
    
        .form_link_container_div  form  input , .add_gallery_main_container  form  input  ,  
        .elems_horizontal_div textarea  ,   .elems_vertical_div textarea ,  .textarea_button_inner_div  textarea  { 
            font-size : 19px ;
        }
    
        .title_name { 
            font-size : 20px ;
        }
    
    
        #galleryImage_file_name { 
            /* display : block!important  ;    
            text-align : right!important ;    */
            position : absolute ;   top : 100% ;  right : 0 ;  
        }   
    
        .add_file_button_verify { 
            width : 85vw!important ;   
            margin-right : 0px!important ;  margin-left : 3px!important ;  
            
        } 
    
        .file_name_selected_span { 
            /* display : block!important ;  */
            text-align : center!important ;    
        } 
    
            /*  NO  NEed   To   SPACE_HOLDer   For   ALIGN-RIGHT   WIth    file_name_selected_span   WHen   SMALL_SCREEN   330px  */   
        .file_name_selected_span_space_holder {    
            display : none ;   
        }
    }  
    
    
    
    @media only screen and (max-width: 350px) {   /* 300px */   
    
        .sign_in_form  .elems_horizontal_div { 
                
            text-align : center ;       
            margin-right : 0!important ; 
        }    
    
        .sign_in_form  .title_name { 
            display : block ;   
            text-align: left ;   
            margin-left : 3vw ; 
            margin-bottom : 3px ;   
        } 
    
        .sign_in_form  .shrinkable_input  {   /*    ,  .elems_horizontal_div  div:first-of-type  {     */    
    
    
            display : block ;   
    
        
        }   
    
        /* .file_name_selected_span { 
            display : block!important ; 
            text-align : center!important ;  
        } */
    
    }  
    
    
    














               /*   -------------------------------------      FRom     NEW_REGister_LogIN .CSS      ------------------------------------   */



/* html,body{ line-height:1.5 } */
/* html{ overflow-x:hidden } */

:root {      /*  Will     MERGE     With     NavBar  's   :ROOT 's   VARibales   */   
    --purpleClickable : rgba(128, 0, 128, 0.5 ) ; 
}



.userHome-container {
    
    /* display:table; */
   display : inline-block ;    
   width : 100% ;    
}

.left-column-container { 
    float:left;
    width:25% ;
}

/* p , input , textarea , span {  */   
html  { 
    text-size-adjust : none!important ;  
}   



.profile-container { 
    background-color: var(--cardBackgroundColor) ; 

}


.profile-header { 
    /* display:inline-block;width:auto */

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

    font-family:"Times New Roman", Times, serif , "Courier New" ;
    font-weight:600 ;
    color :var(--mainColor)  ; 
    
    margin:15px 0 15px 0 ; 
    padding : 15px 0 0 0 ; 

}

.profile-info-container_ins { 
    margin-top : 15px ;     
    padding:0.01em 16px ; 
}

.profile-info-container_user { 
    padding:0.01em 16px ; 
}


.profile-pic_ins { 
    text-align:center;
    /* width:auto ; */
}

.profile-pic_user { 
    text-align:center;
    /* width:auto ; */
}


.profile-pic_ins img { 
    height:130px;
    width:130px ; 
    /* border-radius:50% */
}

.profile-pic_user img { 
    /* height:130px; */      
                /*    NO   HEight  ,   BECause   Will   SHOW   FULL   HEight    For   CROPper    */
    width:130px ; 
    /* border-radius:50% */
}

.profile_pic_button_center_div {  
         /*   Need   a   <DIV >   to   CENTER  button   ,  NO   OTHER  WAY  ; 
              Make   <BUTTON>  Display : BLOCK   Will  in  SEPerate  LINE ,  BUT   Align-LEFT  AUTOMatically    */

    text-align: center;
    margin : 0px 0 -5px 0;      
           /*    margin : 0px 0 -10px 0;     Better   in   <DIV>    Than  in     profile-pic button  , 
            Because     profile-pic button  Will   Have  margin  to   <DIV>   */
}

.profile-pic_user button { 
    color : white ; 
    background-color: var(--mainColor);
    border-radius: 5px;
    font-size: 12px ; 
    text-align : center ; 
    padding : 3px 15px ;
    /* margin : 0px 0 -15px 0;  */
}

.profile-pic_user button:hover { 
    background-color: rgb(175, 95, 175);
}



 .profile-info-container_ins hr , .profile-info-container_user hr {
    /* box-sizing:content-box;height:0;overflow:visible ;  */

    border:0;
    border-top:1px 
    solid #eee;
    margin:20px ; 

}

.profile-info-container_ins i {
    margin-right:  12px;
    


}


.profile-info-container_user i {
    margin-right:  12px;
    float: left ; 
    
}


.profile-info-container_user p span {

    display : block ; 
    overflow : auto ; 
    /*   block &&  AUTO   &&    <I >  is  FLOAT   :   So  PROFile   TEXT   WRAP  if  TOO  LONG   and  ALIGN  with   MARGIN   to  <i>  ICONs   */  
}



#user_description  ,  #name_profile  {   

    display : flex ; 
    justify-content: flex-start;  
    margin-top: 10px ; 
    margin-bottom : 10px ; 
    font-size : 14px ; 
}   


.info-name_user {    
    font-weight : bold ;  min-width : 42px ;
}     


.address_profile_description {  
    text-align : left ;  margin-left : 4px ;  margin-top : 2px ; 
    /* display : inline-block ;   */

    inline-size : calc( 90% - 42px ) ;    
                /*  MUST   DEFine   INLine-SIZE   If   Want   OVerFLOW-WRAP : BReak-WORD   to   WORK    */      

    overflow-wrap: break-word ;  
    text-overflow: ellipsis ;



}    

#div_for_add_buttons {

    /* padding : 0 0 0 50px ; */
    text-align : center ; 

}

#div_for_add_buttons button {
    margin-bottom:16px ; 

    text-align:center;

    
    vertical-align:middle;
    overflow:hidden;

    text-decoration:none;
    cursor:pointer; 

    color : var( --mainColor ) ;  

}
.eidt-profile-button_ins  {

    /* width:60%; */

    /* border:none; */
     /* display:inline-block; */
    
    padding: 8px 0px ;

    color: var(--mainColor);
    font-weight: bold;
    border-radius: 10px;

    background-color:inherit;
    font-weight: bold;
    font-size: 14px;

    /* white-space:nowrap  */

}

.eidt-profile-button_user  {

    /* width:60%; */

    /* border:none; */
     /* display:inline-block; */
    
    padding: 8px 35px;

    color: var(--mainColor);
    font-weight: bold;
    border-radius: 10px;

    background-color:inherit;
    font-weight: bold;
    font-size: 14px;

    /* white-space:nowrap  */

}


.stars_comment_count_profile { 
    display : block ;  text-align: left;   margin-top: 0 ;  font-size : 15px ;  
    font-weight : bold ;   color : var( --mainColor ) ;   
    margin : 0 ;   
}  

.data_item { 
    display : inline-block ;   
    margin-left : 7px ; margin-right : 7px ;   
}

      /*   ----------------        .comment-edit-button:hover , .edit-cancel-button:hover         --------------        */   
#div_for_add_buttons .eidt-profile-button_user:hover , .comment-edit-button:hover , .edit-cancel-button:hover {
    color: var(--hoverLightBlue)!important; 
}


.accordion {

    color:#000!important;background-color:#fff!important ; 
    border-radius : 10px!important ;
}


.accordion button  { 
 
    border : none ; 
    padding:8px 16px;
    /* display:inline-block; */
    text-align:left;
    cursor:pointer;

    width : 100% ;

    border-top:1px solid rgb(215, 189, 223)!important ;

}



.accordion .insStatus button {

    color: var( --mainColor ) ; 
    font-size : 15px ; 
    font-weight: bold ; 
    text-align: center ; 
    padding-left : 0px ; 
    padding-right: 25px ;
    
}


.accordion button:first-of-type  {
    /* background-color: rgb(215, 189, 223) ;  */
    border-top : none!important ; 
    border-radius : 10px 10px 0 0 ; 
}

        /*   MAke   INStitute_PATH .HTML 's    ALBUM   BUTton 's    ROund   BORDer-RADius   WHen   NOT   CLICKed  */    
.accordion_album  .album_button  {
    /* background-color: rgb(215, 189, 223) ;  */
    border-top : none!important ; 
    border-radius : 10px 10px 10px 10px!important ; 
}

        /*   MAke   USerHOME .HTML 's    USer_HATEd   BUTton 's   BOTtom   BORDer-RADius   */    
.accordion button:last-of-type  {

    border-radius : 0 0 10px 10px ; 
} 


.userHome-container  button { 
    border:none;

    display:inline-block;

    padding:8px 16px;
    vertical-align:middle;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    background-color:inherit;
    text-align:center;
    cursor:pointer;
    white-space:nowrap ;
}

.accordion button:hover   ,  .accordion_album .album_button:hover    {
    background-color: var(--cardBackgroundColor)!important ; 
}


.accordion i {
    margin-right: 8px;
}

.accordion-hide {
    display:none
}

.accordion-show_ins {
    display : block ; 
}

.accordion-show_user {

    display :  block ;    
    /*   MUST   BLOCK  ;  If  INLINE-BLOCK   Will  SHRINK   WIDTH  IF  INNER  ELEMent  is  TOO  THIN   &&   NOT  COVERED  By  BackGroundCOLOR    */  

    padding : 5px 10px ;       
    /*  WHen  Use  BLOCK  ,  IF  NOT  DEFine  VERTICAL   PADding  or  Use  0   ,  BLOCK  Will  ADD  a  MARGIN  to  VERTICAL   */
    background-color: var(--backgroundColor);  

    margin : 0 ; 
}


/*  .class : is ( elem_type )   MAKes   a   020   To   023   ,   WIll   be   MORE   SPECific    THan    .USerHOME-CONTainer  button { } 's   STYLE   ,  
    SO   Can   OVerRIDE   .USerHOME-CONTainer  button { } 's  STYLE   ;   ONLY  .accordion-click-color    can   NOT   OVerRIDE   .USerHOME-CONTainer  button { } 's  STYLE   */
.accordion-click-color:is( button ) {
    background-color: var(--cardBackgroundColor) ; 
}

        /*   MAke   USerHOME .HTML 's    USer_HATEd   BUTton 's   NO   BORDer-RADius   IF   CLICKed   */    
.accordion-click-color:last-of-type:is( button ):not( .album_button ) {
    border-radius: 0!important ;
}

        /*   MAke   INStitute_PATH .HTML 's    ALBUM   BUTton 's  BOTtom   NO   BORDer-RADius   IF   CLICKed   */  
.accordion-click-color:is( .album_button ) {
    border-radius : 10px 10px 0px 0px!important ; 
}

.accordion_image_container {
    /* background-color: var(--cardBackgroundColor);  */

    clear :both;

    display: inline-block; 
      /*   Very   IMPORtant */
}

.accordion_image_container div {

    width:50% ; 
    float:left;

    padding:0 8px ; 

}

.accordion_image_container img {
    margin-bottom:12px ; 
}




.ins_order_a { 

    font-size : 20px ; color : var(--mainColor)!important ; font-weight : bold ; 
    background-color : var(--cardBackgroundColor) ;  
    /* rgb(200, 167, 231) ;    */
    
    margin : 12px 8px ;     
    padding : 10px 10px 10px 10px ;   

    text-align: center;   

    border : 2px solid var(--mainColor) ;   
    border-radius : 10px!important ;   

    box-shadow : 5px 4px 4px rgba(128, 128, 128 , 0.7 ) ; 
                    /* -4px -4px 4px rgba(128, 128, 128 , 0.6 ) ;   */

}    

.ins_order_a:hover {   

    background-color : var( --mainColor ) ;   
    color : white!important ;   

}   



.interest-container { 

    color:#000!important;
    background-color: var(--cardBackgroundColor) ;
    border-radius : 10px ;

    padding : 5px 16px 5px 16px ; 

    text-align: center;

}

.interest-title { 
    font-size : 16px ; 
    font-weight : bold ; 
    /* font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;  */
    color : var(--mainColor);
}



.tags { 
    background-color: var(--purpleClickable);
    color:var(--hoverWhiteText);
    border-radius : 5px  ; 

    display:inline-block;
    padding : 2px 6px ; 
    margin : 3px 0 ; 
    text-align:center ; 

    font-size : 14px ; 
    /* font-weight: bold; */
    letter-spacing: 2px;
    cursor: pointer ; 

    
} 

/* .tags:hover {
    background-color: rgb(241, 223, 119) ;
    color : black;
} */



.alert-box-container { 

    padding: 5px 16px ; 

    position:relative ; 
    /* border:1px solid ;  */
    background-color: var(--cardBackgroundColor) ; 
    
}
 
.alert-box-container  .alert-close-button { 

    color : red ; 
    font-size: 20px;
    padding : 0 10px ;

    /* position : absolute ; 
    top : 15px ; 
    right : 15px ;  */

    float : right ; 

    /* background-color: white; */
}


.alert-box-container  .alert-close-button:hover { 
   color : var(--mainColor) ; 
}

.alert-box-container  p { 
    clear : both ; 
}



.middle-column-container { 
    float : left ;  
    width : 55% ; 
   
}

.interest-container-top { 
    padding:  8px ; 
    background-color: rgb(215, 189, 223) ; 
    border-radius : 10px ; 

    margin : 15px 10px  25px 10px ;   

    padding: 16px 32px 25px 32px;  
}

.interest-title-top { 
    font-size: 18px;
    font-weight: bold;
    color:var(--mainColor) ; 
    text-align : center ; 
}  

.status-input-container {
    padding:  8px ; 
    background-color: var(--cardBackgroundColor) ; 
    border-radius : 10px ; 

    margin : 10px 10px ; 

    padding: 16px 32px 22px 32px;  
    /*  ------------   BECause   Use   OUTter_DIV  < DIV > 's   TEXT_ALIGN  : RIGHT   to   RIGht   BUTton   &&   CHECK_BOX   NOW  , 
                    INStead   of  FLOAT : RIGHT  ,    SO    NO  NEED   Any  MORE   :    
                    Use    a    LARGE     PADding   BOTTOM  ,  or  BUTton  Using   FLOAT : Right  &&  position : ABSolute   
                         will   Be  OUT  of  CONTAINER 's  Background-COLOR    ----------  */

    /* position : relative ;  */

    /* display : inline-block ;  */     
    /* width : 95% ;  */
        /*  --------   display : inline-block    Will   Make  INPUT  BOX   Shrink   JUST  ENOugh   for  the   TEXT  PlaceHolder   -------  */
    
}

.status-title { 
    /* opacity : 0.7 ;  */
    font-size: 18px;
    font-weight: bold;
    color:var(--mainColor) ; 
    text-align : center ; 
}

.status-input-box {
    border:1px solid rgb(247, 247, 247);
    padding:4px 16px ; 
    background-color: var( --textareaBackgroundColor )!important ;  /*  rgb(247, 247, 247) ; */    

    font-size: 16px!important ;   
    border-radius: 10px;

    /* clear : both ;  */

    resize : none ; 
    overflow-y : hidden ;   

    
    outline-color : var( --textareaOutlineColor ) ;   
    /*    OUTLine  :   TExtARE   &&   INPUT 's   INNer_BORDer   WHen   FOCUSed       */   
}

/*  .class : is ( elem_type )   MAKes   a   020   To   023   ,   WIll   be   MORE   SPECific    THan    .USerHOME-CONTainer  button { } 's   STYLE   ,  
    SO   Can   OVerRIDE   .USerHOME-CONTainer  button { } 's  STYLE   ;    ONLY  .status-post-button    can   NOT   OVerRIDE   .USerHOME-CONTainer  button { } 's  STYLE   */
.status-post-button:is( button ) {

    /* background-color: var(--mainColor); */
    border-radius: 20px;
    border: 1px solid var(--mainColor) ; 
    padding-right : 20px ; 
    padding-left : 20px ; 
/* 
    position : absolute ; 
    right : 20px ;
    bottom : 20px ;  */

    /* float : right ;    */
                /*      NOW      Use    OUTter_DIV   < DIV >  's     TEXT-ALIGN : RIGHT     INStead      */     

    color : var(--mainColor) ;   
    font-weight: bold ;    

    font-size : 14px ;    

}
.status-post-button:hover { 
    background-color: var(--mainColor) ;
    color :rgb(247, 247, 247) ; 
}


.anonymous_checkbox { 
    border-radius : 0!important ; 
    background-color: #e1d1f0 ; 



    width : 16px ; height : 16px ;      /*    for   CHECKBOX 's   SIZE    */

    /* padding : 0px 10px 0px 10px!important ;  */      /*     PADding     CHAnges    NoTHing         */

    /* margin : 0px 8px 0px 35px!important ;   */

    /* display : inline-block ;  */

    /* border : 1px solid purple ;   */   
    

    /*    BORDER   CHAnges   NoTHing     ,   Use   OUTLine   &&   OUTLine-OFFSet  : NEGative    */
    outline : 2px solid purple ;        
    outline-offset: -2px;   


    cursor: pointer ;   

    accent-color: rgb(170, 49, 170) ;     /*   for   CHeckBOX 's    BAckGroundCOLOR    */

    vertical-align: middle ;        
        /*   for   CHeckBOX   &&   SPAN 's   VERTical   CENTER   ,  The  OUTter  < DIV > 's   align-items: center   NOT   WORKing      */    

    margin-right : 15px ;   

}




.comment-container { 

    background-color: var(--cardBackgroundColor) ; 
    border-radius : 10px ; 

    margin : 10px 10px ; 

    padding: 10px ;  
}



.comment-card { 

    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) ; 

    padding:8px 16px  16px 16px ; 
             /*    8px 16px  45px 16px ;    */ 
           /*    padding-BOTTOM   is  LARGE  ,  Because  Need  ROOM   For  BUTTON  FLOAT  RIGHT    */   

    color:#000 ;  
    background-color:rgb(212, 233, 240) ; 
    border-radius: 10px ; 

    margin-bottom : 12px ; 

}


.comment-card img { 

    /* text-align:left ;  */

    border-radius:50% ; 
    margin-right:16px ; 

    width: 60px ; 
    height : 60px ;  

    /* float : left ;  */   
    /*    NO   Need   for   FLOAT     IF      the   SIBLing   ELEMent   is    INLine-BLOCK ,   SIBLing   ELEMent   will   go to   SAME   LINE ;   
           OR    USing     div_for_vertical_center_flex   < DIV >   With   DISPLAY : FLEX  ,  
          BECause   FLEX   Will    MAke   TWO   ELEMents   TAke   the   WHOLE   SPACE   &&   ADJUST   WIDth   AUTOMatically ,   */
}

.ins-time-div { 
    overflow : auto ; 
    /*   So  When   SMALL   SCREEN   ,   Comment  TIME  Still   ALign   with   INSName  even  if   INSName  is  TOO  LONG  &&  WRAPped     */  

    display : inline-block  ;  
    /*     to  VERTICALly  CENTer   INS-TIME-DIV     */
}

.comment-card a {
    text-decoration: none;
}

.ins-name_ins { 
    font-size: 15px ;
    font-weight: bold ; 
    color : var(--mainColor) ; 

    padding : 0px 0 0px 0  ;
    margin : 2px 0 0px 0  ;
}

.ins-name_ins:hover { 
  color : var(--hoverLightBlue) ;     

}

.ins-name_user { 
    font-size: 15px ;
    font-weight: bold ; 
    color : var(--mainColor) ; 

    padding : 10px 0 5px 0  ;
    margin : 10px 0 0px 0  ;
}

.ins-name_user:hover { 
    color : var(--hoverLightBlue);     

}

.comment-time { 
   opacity: 0.6;
   font-size: 12px ;

   clear : both ; 
}


.comment-card  hr {
    /* box-sizing:content-box;height:0;overflow:visible ;  */

    border:0;
    border-top:1px   solid  rgb(128 0 128 ) ; 
    opacity : 0.3 ; 
    margin: 7px 15px 11px 15px ; 

}

.Comment_Content , .new-reply-comment-div  {
    /*    SO   WHen   INNer   < TEXTAREA > 's   WIDTH : 100%  ,  Will  NOT   GO  BEYOND   the  COMMENT_CONTENT  < DIV >  */
    padding : 0 5% 0 5% ; 
}


.Comment_Content p { 
    /* margin : 0 50px 0 50px ; */ 

    overflow-wrap: break-word ;  
}



/*    .buttons-space-between-div   to  make  2  GROUPs  of  BUTTONs   SPACEC-BETWEEN  ,  
     .buttons-right-div  &&  .likes-left-div  Make  2  BUTTONs    ALIGN   RIGHT  &&    ALIGN   LEFT    */   
.buttons-space-between-div {
    display: flex ;
    justify-content: space-between; 

    margin : 0px 0 0px 0  ; 
}

/*   to   RIGHT   Entire   DIV  for  2  BUTTONS    */
.buttons-right-div { 
    text-align: right;
}

.likes-left-div {
    text-align: left ;

}

/*   to   RIGHT   Entire   DIV  for  2  BUTTONS    */
.buttons-div { 
    /* text-align: right; */
    margin-top: -8px ;
}

#comments , #rating-statics-div ,  #address  ,  #classes ,  #age_group  ,   .comment-card   {       /*  . comment-card  */
    scroll-margin-top : 80px ;   
}



/*  ------------     STYLE   for   COMment-CARD-REPLY   ,   MOVed   from     REPLY_COMment .HTML 's   INLine   CSS    -------------    */ 

.reply_comment_blockquote { 
    margin-left : 0px ;  
    margin-right : 0px  ;  
    margin-bottom : 1% ; 
}

.comment-card-reply {  
    background-color: var(--reallyLightPurple) ;   

    margin-bottom : -1%!important ;   
    /* padding-bottom : 0.2%!important; */
    padding-right : 1%!important ; 

    padding-bottom : 7px ; 
}

.flex-div-for-horizontal-align { 
    display: flex ;    margin-top: 10px ; 
}

.time-comment-div-for-vertical-center-wrappe { 
    display: flex ;   flex-grow: 1 ;  align-items : center ; 
}

.time-comment-div { 
    flex-grow : 1  ;  
}

.time-comment-div  .Comment_Content { 
    flex-grow : 1  ; 
}

.time-comment-div  .Comment_Content   P { 
    flex-grow : 1  ; 
} 


/*      -----------------------       COMMENT   SEction        &&     EDIT   Changed   BUTTONS   SECtion    -----------------------      */

.like-comment-button { 
    color : var(--mainColor) ; 
    font-size: 15px ;
    padding: 0 0 0 30px ; 
}

.like-comment-button:first-child {
    padding-left : 50px ;    
}

.like-comment-button:hover { 
    color : var(--hoverLightBlue)!important ;
}


.comment-container_user .comment-edit-button , .comment-container_user .comment-delete-button , 
.comment-container_user .edit-confirm-button  , .comment-container_user .edit-cancel-button  , 
.comment-container_user .like-comment-button { 

    margin-bottom:0 ; 

    /* border:none; */    font-size:  14px ;
     /* display:inline-block; */
    padding: 0px 15px 12px 10px;
    vertical-align:middle;
    overflow:hidden;
    
    text-decoration:none;
    color: var(--mainColor);
    font-weight: bold;
    border-radius: 10px;

    /* float : right ; */
    /*   NOW   Using     . buttons-div {  text-align: right;  }   to   RIGHT   Entire   DIV  for  2  BUTTONS     */ 

}


.comment-container_ins .comment-edit-button , .comment-container_ins .comment-delete-button , 
.comment-container_ins .edit-confirm-button  , .comment-container_ins .edit-cancel-button  , 
.comment-container_ins .like-comment-button    {
    
    margin-bottom:0 ; 

    /* border:none; */
     /* display:inline-block; */
    padding: 0px 15px 0px 10px;
    vertical-align:middle;
    overflow:hidden;
    
    text-decoration:none;
    color: var(--mainColor);
    font-weight: bold;
    border-radius: 10px;

    font-size : 15px ; 

    /* float : right ; */
    /*   NOW   Using     . buttons-div {  text-align: right;  }   to   RIGHT   Entire   DIV  for  2  BUTTONS     */ 

}

.comment-delete-button { 
    color : red!important ; 

    padding-right : 50px ; 
}

.comment-delete-button:hover , .edit-confirm-button:hover { 
    color : var(--mainColor)!important ; 
}

.edit-confirm-button {
    color : red!important ; 
}

.edit-cancel-button {

    padding-right : 50px ; 
}

        /*   NOT   USing   ,   Use   .write-msg-textarea   INStead   NOW    */   
.write_msg-textarea { 

    border:1px solid rgb(247, 247, 247);
    padding: 8px 16px ; 
    background-color: rgb(247, 247, 247);

    font-size: 14px;
    border-radius: 10px;

    text-align : left ;

    width: 80%; 
    margin:  5px 5% 0 5% ; 

    overflow: hidden; resize: none; 


}

.write-msg-textarea { 

    border:1px solid rgb(247, 247, 247);
    padding: 8px 16px ; 
    background-color:  var( --textareaBackgroundColor ) ;   /*  rgb(247, 247, 247);  */  

    font-size: 14px;
    border-radius: 10px;

    text-align : left ;

    width: 100%; 
    margin:  5px 0% 0 0% ;   /*  USing    its   CONTAINer   < DIV > 's   PADding  for   HORIZONtal   SPACing   NOW ,  */

    overflow: hidden; resize: none; 


}




.comment-container .page a {
    font-size: 10px ; 
}


.right-column-container  {

    float : left ;  
    width : 19% ; 
}



.events-card , .requests-card {

    margin-top: 15px ;
    background-color: var(--cardBackgroundColor) ;
    border-radius : 10px;

    padding : 8px 16px ; 

}

.events-card p:first-child , .requests-card p:first-of-type { 
    font-size:16px ;
    font-weight : bold ; 
    color : var(--mainColor) ; 
    /* text-align: center; */
}

.button-center-p {
    text-align: center;
}

.events-button {
    width:80% ; 
    background-color: var(--purpleClickable) ;

    font-size: 16px;
    color : var(--hoverWhiteText) ; 
    font-weight: bold ;
    margin : 5px 0 0 0 ; 
}

.tags:hover , .events-button:hover  { 
    color : var(--mainColor) ; 
    background-color: inherit;
}


.requests-card .name-img-p {
   text-align: center;
}
 /* { 
    background-color: var(--cardBackgroundColor) ;
    border-radius : 5px; 
    padding : 8px 16px ; 
} */




.two-buttons-div { 
    opacity : 0.6 ; 
    clear : both ; 
    /* display:inline-block ;  */
    text-align: center;

}
.two-buttons-div .half-green-button , .two-buttons-div .half-red-button {
   
    width:48% ; 

    color:#fff;
    margin: 10px 0 ; 
}

.two-buttons-div .half-green-button  { 
    background-color:#4CAF50 ; 
}


.two-buttons-div .half-red-button {
    background-color:#f44336 ; 
}


.two-buttons-div button:hover {
    background-color: inherit ; 
    color : var(--mainColor) ; 
}




/*  ------------     RECEntly   VIEWed      ---------------------   */

.right-small-card { 
    background-color: rgb(230, 203, 163) ; 

    margin-top : 15px ;   

    padding: 8px 8px ; 
    text-align:center ; 

    border-radius:  5px ;
}

.right-small-card .title {
    font-size: 16px; 
    font-family: "Times New Roman", Times, serif , "Courier New" ;
    color : var(--mainColor) ; 
    font-weight: bold; 

    margin-bottom: 2px ;
    margin-top : 8px ; 
}

.recently_viewed_container { 
    list-style-type : none;
    /* list-style-type: none; - Removes the bullets */
    margin: 0px 0 0 0  ;
    padding :  0;

    display: block ;    

    /* display: inline-block ;     */
            /*   MUST   inline-block  ,  Or  WILL  Have   BOTTOM   MARGin  will  NOT  RESpect   0     */
}

.recently_viewed_container a { 
    text-decoration:  none ;
}

.recently_viewed_card { 

    background-color: var(--reallyLightPurple) ; /* var(--reallyLightPurple);  /*  */
    margin: 10px 3px ;
    border-radius: 10px;

    padding : 12px 10px ; 
  
    /* position:static; */
  
   
    overflow: auto;     
    /*   to  SHOW   Margins  to   BOTTOM */
  
    /* display:block; */
    /*   display: INLINE-block      Will  NOT   Put  IMAGE  &&  TEXT  in  SAME  LINE     */
  
  
     /*    use  CLEAR :LEFT    to  Make    <LI>   Align   IMAGES  ,  or  IMAGE's  FLOAT   SPACE   Will  Carry  to   Next   <LI>  */
    clear: left;
  
  
    position:relative; 

}

.recently_viewed_card:hover { 
    /* color:var(--hoverWhiteText) ;   */
               /*    COLOR   NOT   WORKing  ,  Because  DIV  can  not  DEFIne   TEXT  COLOR  ????   */
    background-color :var(--filterHoverBackground); 
}

.recently_viewed_card:hover p  { 
    color:var(--hoverWhiteText) ;  
}

.recently_viewed_card:hover span  { 
    color:var(--mainColor) ;  
}

.insTitle { 

    font-size: 15px;
    font-weight: bold; 
    color :var(--mainColor);
    /* font-family: 'Source Sans Pro', sans-serif; */
    font-family: "Times New Roman", Times, serif , "Courier New" ;
    
    /* margin-top :  20px ; */
    /* margin-bottom :  6px ;  */
    /*    WHY   MARgin   NOT  Working   ?????    */

    margin: 0px 0 0 0 ;
    
    display : inline-block ; 

    text-align: left ;

    overflow-wrap: break-word ; 
    text-overflow: wrap ;
    overflow: wrap;


    /* max-width : 60% ; */
}

.insList_classes  {
    text-align:  left ;
}

.insList_classes span {
    font-size: 14px;
    color:grey;
    font-weight: bold; 
}


.insClasses{
    font-size: 14px;
    font-weight: bold; 
    color :var(--mainColor);
    /* font-family: 'Source Sans Pro', sans-serif; */
    font-family: "Times New Roman", Times, serif , "Courier New" ;
    
    /* margin-top :  20px ; */
    /* margin-bottom :  6px ;  */
    /*    WHY   MARgin   NOT  Working   ?????    */

    margin: 5px 2px 0 2px ;
    
    display : inline-block ; 

    text-align: left ;

    overflow-wrap: break-word ; 
    text-overflow: wrap ;
    overflow: wrap;


    /* max-width : 60% ; */
}

.review_num_div { 
    text-align: center ;
}
.review-num { 
    font-size: 12px;
    color:grey;
    font-weight: bold; 
    text-align: left ;
}



/* .two-buttons-div:before , .two-buttons-div:after {content:"";display:table;clear:both} */  



/*    -----------------------         PROFILE    &&    ALBUM        EDIT   INPUTs    &&   BUTTONs          --------------------------    */


#profile input:not( #new_profile_pic ) {

    border:1px solid rgb(247, 247, 247);
    padding: 5px 0 ; 
    background-color: var( --textareaBackgroundColor )  ;   /* rgb(247, 247, 247) ; */     

    /* font-size: 16px; */
    border-radius: 5px;

    width : 85% ; 

    outline-color : var( --textareaOutlineColor ) ;   
    /*    OUTLine  :   TExtARE   &&   INPUT 's   INNer_BORDer   WHen   FOCUSed       */   

}

.confirm_profile_btn ,  .cancel_profile_btn   {
    border : 1px solid var(--mainColor) ; 
    padding : 6px 20px ;
    border-radius: 10px;

    color : var(--mainColor); 
    font-weight: bold ;
    font-size: 15px;
}

.confirm_profile_btn {
    color : red ; 
}


 .confirm_profile_btn:hover , #div_for_add_buttons .cancel_profile_btn:hover ,  .cancel_profile_btn:hover  ,  .add_album_button:hover   { 

  background-color: var(--mainColor);
  color : var(--hoverWhiteText) ; 
            /*    !important    BECause    need  to     OVerRIDE     ADD_ALBUM_BUTTON 's    INLINE-CSS    in   HTML     */
}

.textarea-center-div {
    text-align: center;
}

.userHome-container  #msg_box   ,  #album_image_info_input_box    {    
    
    padding:12px 22px ; 
    /* background-color: rgb(247, 247, 247);   */

    font-size: 16px;
    border-radius: 10px; 

    width : 95% ; 
    
    text-align: left;

    margin: 5px 0 10px 0 ;

    border: 0 ; 
    /*  Will  NOT  Show  SCROLL  BAR    */     

 /* overflow: hidden; */
    resize: none; 
}

#comment_form  button {
    margin-right: 3% ;
}



.select_image_button { 
    color : white ;   background-color: var(--mainColor);  border-radius: 5px;  font-size: 13px ;   
    padding : 3px 15px ;   cursor : pointer  ;   margin-top : 10px ;    margin-bottom : 10px  ;   
}

/*  .class : is ( elem_type )   MAKes   a   020   To   023   ,   WIll   be   MORE   SPECific    THan    .USerHOME-CONTainer  button { } 's   STYLE   ,  
    SO   Can   OVerRIDE   .USerHOME-CONTainer  button { } 's  STYLE   ;   ONLY  .add_album_button    can   NOT   OVerRIDE   .USerHOME-CONTainer  button { } 's  STYLE   */
.add_album_button:is( button )  {    
    display : inline-block  ;   text-align: center ;  

                                    font-size: 15px;
                                    
                                    padding : 10px 20px 10px 20px ;  
                                    margin : 6px 0px 6px 0px ;  
                                    border : 1px solid purple ;  
                                    border-radius: 10px ; 
                                    cursor : pointer ; 
                                    color : purple ; 
                                    background-color: rgb(200, 167, 231) ;   
                                    font-weight: bold ; 
                                    
                                    width : 100% ;  
}



/*    ----------      MOVEd    to    CLassLIST .CSS      ---------   */
.userHome-container .path-links {

    /* color : var(--mainColor)  ; 
    font-size: 14px ;
    font-weight: bold;  */
    margin: 10px 0 8px 20px!important  ;   
    display: block!important  ;       
             /*     DISPlay : BLOCK    to   ALIgn   LEFT   ,  If   DISPlay : INLine-BLOCK   ,   Will    HORizontally    CENTER       */
}

/* .path-links a { 
    text-decoration: none ;

    color : var(--mainColor)  ; 
    font-size: 14px ;
    font-weight: bold; 
}

.path-links a:hover { 
   color : var(--hoverLightBlue) ; 
} */



.ins-info-container { 
    
    background-color: rgb(179, 202, 221) ; 
    border-radius : 10px ; 

    margin : 10px 10px ; 

    padding: 10px 40px 20px 40px ;  
}








.profile-ins-name { 

    color : var(--mainColor) ; 
    font-size : 25px ;
    font-weight: bold ;

    margin : 15px 0 0 0 ; 

    overflow-wrap: break-word ;    

}


.button-right-div { 
    text-align: right;
}

.chat_now_btn {
    color :rgb(107, 5, 107) ; 
    font-size: 18px ;
    font-weight: bold;

    text-decoration: none ; 

    text-shadow: 2px 3px  4px rgba(0,0,0 , 0.25 ) ; 

}

.chat_now_btn:hover  {
    color :var(--hoverLightBlue); 
}

.chat_now_btn i {
    margin : 0px 2px 0px 15px ;

}

.stars_comment_count { 
    margin-top : 5px ;     
}

.stars_comment_count  span  { 
    font-size : 14px ;   
    font-weight : bold ;  
    color : var( --mainColor ) ;    
}

.address-div { 
    margin-top : 5px ;    
}

.info-name { 
    font-size: 15px ; 
    font-weight: bold ; 

    line-height : 25px ; 

    /* color : var( --mainColor ) ;     */
     
}

.map_address { 
    font-size : 15px ; 

    display : inline-block ;   
}


.classes-section {

    display : flex ;
    justify-content: flex-start;
    /*    to  make  2  TWO  <DIVs >  On  SAME   ROW  /  LINE   */

    margin: 8px 0 8px 0 ;
}

.address-section-title { 
    font-size : 16px ; 
    font-weight : bold ; 
    margin : 4px 10px auto 0 ;   
    
    min-width : 45px ;  
    /*     MUST   Define   WIDTH  ,  or  The  Text  will   be   VERTICAL      */
}

.address-item { 
    margin : 4px 0 auto 0 ;  
}  

.classes-section-title { 
    
    font-size : 16px ; 
    font-weight : bold ; 
    /* font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;  */
    color : rgb(107, 5, 107) ; 

    margin : 4px 10px auto 0 ; 

    /* display : flex ; 

    flex-direction: row ; */

    min-width : 80px ;  
    /*     MUST   Define   WIDTH  ,  or  The  Text  will   be   VERTICAL      */
}

.class-item {
    overflow : auto ; 
}

.class-item a {
    text-decoration : none ; 
}



.hide-lines { 
    line-height : 23px ; 
    
    /* max-height : 69px ;  */
           /*     MOVED   to   JavaSCRIPT    */

    overflow: hidden ;
    text-overflow: ellipsis ; 
    /* white-space: nowrap ;  */   
             /*    Will   SHOW   ...  THREE  DOTs  ,  BUT   Will  Make  PAGE  VERY  WIDE   */


    margin : 5px 0  0 0  ; 
}


.more-description-right_div { 
    text-align: right ; 
    /* margin : 0 ;  */
}

.more-description { 

    color : var(--mainColor) ; 
    cursor: pointer ;
    font-size: 14px ;
}


.owner-action-right-div { 
    text-align: right; 

    margin : 10px 0 0 0 ;  
    /*    BLOCK  ELEMent   <DIV >  for   MARgin - TOP    ,  INNer   HORIzontal  SPACE  in   <a >    */
    
}

.owner-action { 
    text-decoration:  none ; 
    font-weight : bold ;

    margin : 0 20px 0 0 ; 
        /*    BLOCK  ELEMent   <DIV >  for   MARgin - TOP    ,  INNer   HORIzontal  SPACE  in   <a >    */
}

.owner-action:hover { 
    color : var(--mainColor) ; 
}

.ins-info-icons a { 
    text-decoration:  none ;
    
}
.ins-info-icons  a { 
    color : var(--mainColor) ; 
    font-size: 16px ;
    font-family:"Times New Roman", Times, serif , "Courier New" ;
    font-weight: bold ; 
    margin : 0 10px 0 10px ; 
    
    display : inline-block ;   
}

.ins-info-icons .not_bold  {    /* can  NOT   Have  a   as  in   .ins-info-icons .not_bold  a  ,   Because  a  is   .not_bold    */
    font-weight: normal ; 
    font-size : 15px ; 
}

.ins-info-icons i { 

    font-size: 18px ;
    font-weight: bold ;     
               /*  share  &&  report   are   NOT  BOLD   &&   STYLE   in  HTML 's   < a    style = "font-weight: normal;" >  */
    margin : 0 5px 0 10px ; 

    cursor:pointer ; 
}

.ins-info-icons i:not( .fa-star ) { 

    color : var(--mainColor) ; 

}

.ins-info-icons .not_bold i { 
    font-weight: normal ;     
}

.ins-info-icons  i:not(.fa-star):hover {   /*   i:not(.fa-star)    */
    color : var(--hoverLightBlue) ; 

}



.star_rating_static { 
    display : inline-block ;     
    margin : 0 0 0 15px!important ;  
}

.star_rating_static  text { 
    margin-left : 12px!important ;  
    margin-right : 3px!important ;
}

.star_rating_static  i { 
    font-size: 20px!important ;
}


.star_rating_clickable   {  
    display : inline-block ;   
    margin : 10px 0 0 4px!important ;    
            /*    MARGIN   NOT   PADding  ,  BECause   PADding  will  Make   HOVER   Highlight  ENtire  <DIV> 's  < I >    */  
}

.mouse_disabled { 
    pointer-events: none ;        /*     pointer-events: none ;        */
}

.star_rating_clickable  i  {  
    font-size: 22px!important ; 
    cursor : pointer ;  

    padding-left : 6px!important  ;    
    padding-right : 6px!important  ; 

}


.star_rating_clickable  .star_icon:hover  i { 
    color :rgb(255, 255, 149) ; 
}

.star_rating_clickable  .star_icon  i:hover ~ i { 
    color : var(--reallyLightPurple) ; 
}

.active_star { 
    color : yellow!important ;   
}


/*  .class : is ( elem_type )   MAKes   a   020   To   023   ,   WIll   be   MORE   SPECific    THan    .USerHOME-CONTainer  button { } 's   STYLE   ,  
    SO   Can   OVerRIDE   .USerHOME-CONTainer  button { } 's  STYLE   ;   ONLY  .star_button_edit    can   NOT   OVerRIDE   .USerHOME-CONTainer  button { } 's  STYLE   */
.star_button:is( button ) , .star_button_edit:is( button )  {  
    /* background-color: var(--purpleClickable);
    color:var(--hoverWhiteText); */
    border-radius : 8px  ; 

    display:inline-block;
    padding : 3px 8px ; 
    margin : 3px 2px ; 
    text-align:center ; 

    font-size : 15px ; 
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer ; 


    border: 1px solid var(--mainColor);
    
    display : none ; 

}  

.star_button_show:is( button ) {  
    display : inline-block ; 
}

.star_button_submit:is( button ) { 
    color:var(--mainColor)  ;  
    margin-left : 10px ; 
} 

.star_button_cancel:is( button ) { 
    color:red ; 
}

.star_button_submit:is( button ):hover { 
    background-color:var(--mainColor)  ;  
    color:var(--hoverWhiteText);
} 

.star_button_cancel:is( button ):hover { 
    background-color:red ;  
    color:var(--hoverWhiteText);  
}


/*    MUST  be  AFTER    ELEMents   INSide   is   DEFINED    */
@media (max-width:600px){
    .left-column-container { width:100% } 
    .middle-column-container { width: 100% }

    .right-column-container  { width : 100% }

}



/* @media only screen and (max-width: 420px) { 

    .status-input-box  { 
        font-size : 20px!important ;
    }
    
} */








/*    -----------------------       FRom    ALertMESSage_LIST_PAth  .HTML        -------------------------------    */         





.title_div {    
    text-align: center ;      
    display : block ;   
        /*    BLOCK    makes     < DIV > 's    backgroundColor       EXTEND   a   WHOLE   LINE       */

}    

.title_div  p {    
    font-size : 25px ;   
    color : purple ;   
    font-weight : bold  ;   
    display : inline-block ;  
        /* inline-block    makes     < P > 's    backgroundColor   NOT   EXTEND   a   WHOLE   LINE     */
    font-family: 'Times New Roman', Times, serif , 'Courier New' ;    
    margin-top: 30px ;    
    margin-bottom: 20px  ;  
}    


.message_container_div {
    text-align : center ;   

    min-height : calc( 100vh - 350px ) ;    
}   

.alert_list_p { 
    font-size : 20px ;   
    font-weight : bold ;   
    color : grey ; 

    margin-top : 50px ; 

}

.outter_center_div {  
    text-align : center ;  
}   

.outter_a {
    display : inline-block ;   
    cursor : pointer ;   

    margin : 10px 10px  ;   
}   

.outter_a:hover  .inner_center_div {  
    background-color :  inherit ;
    border : 1px solid var( --mainColor ) ; 
}

.inner_center_div { 
    background-color : var( --formInputBackgroundColor ) ;  text-align : center ;   display : inline-block ;   
    /* vertical-align : bottom ;     */
    padding :  8px  16px   ;  
    border-radius : 10px ;  
    border : 1px solid var( --formInputBackgroundColor ) ;   
}

.alert_content_span  {  
    margin :  0  20px  0  0  ;     padding : 0 ;  
                        
    color : var( --mainColor ) ;  
    font-size : 18px ;  font-weight : bold ;   
    display : inline-block ;   
    vertical-align : bottom ;  

    text-align : left ;  
}     

.alert_time_span {   
    margin : 0 ;   padding : 0 ;     
    color : grey ; 
    font-size : 13px ;  font-weight : bold ;   
    display : inline-block ;   
    vertical-align : bottom ;     
}     





/*    -----------------------       FRom    CHATter_LIST_PAth  .HTML        -------------------------------    */         


.message_container_div_chatter {
    text-align : center ;   

    min-height : calc( 100vh - 300px ) ;    
}   

.outter_a:hover  .inner_center_div_chatter {  
    background-color :  inherit ;
    border : 1px solid var( --mainColor ) ; 
}

.inner_center_div_chatter { 
    background-color : var( --formInputBackgroundColor ) ;  
    text-align : right ;   
    display : inline-block ;   
    /* vertical-align : bottom ;     */
    padding :  8px  16px   ;  
    border-radius : 10px ;  

    border : 1px solid var( --formInputBackgroundColor ) ;   
}

.alert_content_span_chatter  {  
    margin :  0  20px  0  0  ;     padding : 0 ;  
                        
    color : var( --mainColor ) ;  
    font-size : 18px ;  font-weight : bold ;   
    display : inline-block ;   
    vertical-align : bottom ;  
    text-align : left ;   

    overflow-wrap: break-word ; 
    text-overflow: ellipsis ;
    overflow: hidden;
    white-space: nowrap ;    

    max-width : calc( 98vw - 20px - 32px - 20px - 5px ) ;   
       /* MUST   DEFine   WIDTH / MAX-WIDth  ,   Or   IMage_DESCription   < P > 's    OVerFLOW : HIDden  
                          &&    TExt-OVerFLOW : ELLIPsis   Will   NOT   be   APPLied           */

    /* INLine-BLOCK && MAX-WIDTH && OVerFLOW : HIDDen && TEXT-OVerFLOW : ELLIPsis && WHITE-SPACE : NoWRAP */
}     

.alert_time_span_chatter {   
    margin : 0 ;   padding : 0 ;     
    color : red ; 
    font-size : 13px ;  font-weight : bold ;   
    display : inline-block ;   
    vertical-align : bottom ;     
}     









/*    -----------------------       For    PAY_INStitute_CHAT_PAth  .HTML    &&   PAY_ALbumIMAge_PAth .HTML      -------------------------------    */         






/* div:has(.input_radio ) {   */
.input_radio_div {  
    width : 22px!important ; height : 22px!important ; 
    /* cursor : pointer ; */

    appearance : none ; 
    background-color : transparent!important ;  
    border-radius : 50%!important ;  
    border-width : 2px!important ;  

    border : 2px solid purple!important ; 
    padding : 0px!important ;  

    margin : 0px 15px ;  

    display : inline-block!important ;  

    cursor : pointer ; 

    position :  relative ;   

    vertical-align : middle ;    
    
}   


.album_input_radio_div {  

    vertical-align : top!important ; 
    margin-top : 3px ;

}   

.input_radio {  

    width : 12px!important ; height : 12px!important ; 
    cursor : pointer ;

    appearance : none ; 
    background-color : transparent!important ;  
    border-radius : 50%!important ;  
    border : 0 solid transparent!important; 

    margin : 3px!important ;  
    /* border-width : 2px!important ;   */

    padding : 0!important ;  

    position : absolute ; 
    left : 0 ; 
    top : 0 ; 

}


.input_radio:checked ,  .input_radio_in_modal:checked {  

    /* 
    width : 14px!important ; height : 14px!important ; 
    cursor : pointer ;
    */

    appearance : none ; 
    background-color : purple!important ;  
    border-radius : 50%!important ;  
    border : 0 solid transparent!important; 
    /* border-width : 2px!important ;   */

    /* padding : 2px!important ;   */
}

/* .input_radio:checked {  
    appearance : initial!important ; 
    font-weight: bold ;
    accent-color : purple!important ;    

    background-color : purple!important ; 
    padding : 2px!important ; 
}   */


.elems_horizontal_div_left { 

    text-align : left ;       
                    /*          */

    vertical-align : middle !important  ;    

    max-width : 400px ;  

    margin : 30px 0 0px 0!important ; 
}

.elems_horizontal_div_left:first-of-type { 

    margin-top : 40px!important ; 
}

.pay_input_title_div {   

    display : inline-block ; 
    
    color : purple ; 

    margin-right : 10px ;   

    /* width : 250px!important ;  */

    text-align : left ;  

}

.pay_input_title_p {   

    display : inline-block ; 
    
    color : purple ; 
    font-weight : bold ; 
    font-size : 18px ;  
    /* margin-right : 10px ;    */
    margin-top : 0px!important ;  

    width : 100px!important ; 

}

.album_pay_input_title_p {   

    display : inline-block ; 

    color : purple ; 
    font-weight : bold ; 
    font-size : 18px ;  
    /* margin-right : 10px ;    */
    margin-top : 0px!important ;  

    width : 130px!important ; 

}   


.pay_input_price_div {  
    display : inline-block ;  
    vertical-align : top ; 
}


.elems_horizontal_div_right { 
    
    text-align: right!important ;   
    margin : 0 20px 0 0!important ;  

}

.elems_horizontal_div_right:last-of-type { 
    
    margin : 0 20px 15px 0!important ;  

}

.pay_summary_title_p { 

    display : inline-block ; 
    
    color : purple ; 
    font-weight : bold ; 
    font-size : 18px ;  

    /* margin : 0px 10px 0 70px ;   */


}

.pay_quantity_div { 

    color : purple ;   
    font-size: 14px!important ; 
    font-weight: bold ; 

    display : inline-block  ;   
    /* width :auto ;   */
    /* width : calc( 10vw +  75px ) ;   */
    /* width: 200px ;  */
    /* text-align:  left ;    */

    margin : 0px 0px 0px 15px ; 


    word-break: break-word;   

    width : 85px!important ; 

}   

.sign_span { 
    margin-right : 8px!important ;  
    font-weight : bold!important ; 
    vertical-align : middle!important ;  
    height : 28px!important ;  
    /*   MUST   SPEcify   Height  To   PX   &&   INLine  To   VERtical-ALign : MIDDle  ,   
            height : 100%   NOT  WORKing   To  VERtical-ALign   
    */
    display: inline-block;
}


.pay_quantity_input { 

    width : 50px ; 
    padding : 3px!important ;   
    text-align: center!important ;

    overflow: wrap ;
    text-overflow: wrap ; 
    white-space: wrap ;    


}   


.fake_input { 
    border : none!important ; 
    background : transparent!important ;  
    outline : none!important;   

    font-size: 17px ;   
}


.pay_form hr { 

    margin-top : 8px!important ; 
    margin-bottom : 8px!important ; 
}

.pay_form hr:first-of-type { 

    margin-top : 25px!important ;
} 




/*    -------     PAYment_CONFirm_MODAL    --------   */   

.payment_method_div {   

    display : block ; 

    font-weight : bold ;                                            
    /* font-size : 18px ;  */

    color : var( --mainColor ) ;  

    margin : 2px 0 8px 0  ;  

    /* max-width : 150px ;   */

    
}



.payment_method_title_p {   

    display : inline-block ; 
    
    color : purple ; 
    font-weight : bold ; 
    font-size : 18px ;  
    /* margin-right : 10px ;    */
    margin-top : 0px!important ;  

    width : 100px!important ; 

    vertical-align : top ;  

}


.input_radio_div_in_modal { 

    width : 19px!important ; height : 19px!important ; 
    /* cursor : pointer ; */

    appearance : none ; 
    background-color : transparent!important ;  
    border-radius : 50%!important ;  
    border-width : 2px!important ;  

    border : 2px solid purple!important ; 
    padding : 0px!important ;  

    margin : 0px 15px ;  

    display : inline-block!important ;  

    cursor : pointer ; 

    position :  relative ;  

    vertical-align : middle ;  

}



.input_radio_in_modal {  

    width : 9px!important ; height : 9px!important ; 
    cursor : pointer ;

    appearance : none ; 
    background-color : transparent!important ;  
    border-radius : 50%!important ;  
    border : 0 solid transparent!important; 

    margin : 3px!important ;  
    /* border-width : 2px!important ;   */

    padding : 0!important ;  

    position : absolute ; 
    left : 0 ; 
    top : 0 ; 
}



.payment_method_span {   

    font-size: 16px ;  
    vertical-align : middle ;
}   








/*    -----------------------       For    ORDers_INStitute_PAth  .HTML    &&   ORDers_USer_PAth .HTML      -------------------------------    */         




.title_div_order {    
    text-align: center ;      
    display : block ;   

}    

.title_div_order  p {    
    font-size : 25px ;   
    color : purple ;   
    font-weight : bold  ;   
    display : inline-block ;  
    font-family: 'Times New Roman', Times, serif , 'Courier New' ;    
    margin-top: 30px ;    
    margin-bottom: 20px  ;  
}    


.message_container_div_order {
    text-align : center ;   

    min-height : calc( 100vh - 300px ) ;    
}   

.outter_center_div_order {  
    text-align : center ;  
}   


.inner_center_div_order { 
    background-color : var( --formInputBackgroundColor ) ;  
    /* text-align : right ;    */
    text-align : left ;   
    display : inline-block ;   
    padding :  10px  20px   ;  
    margin : 11px 0 ;  

    border-radius : 10px ;  

    border : 1px solid var( --mainColor ) ;   

    box-shadow:  4px 4px 4px rgba(128, 128, 128 , 0.6 ) , 
                -4px -4px 4px rgba(128, 128, 128 , 0.6 ) ;  

}

.order_content_span  {  
    margin :  0  0  0  0  ;     padding : 0 ;  
                        
    color : var( --mainColor ) ;  
    font-size : 16px ;  font-weight : bold ;   
    display : block ;   
    vertical-align : bottom ;  
    text-align : left ;   

    overflow-wrap: break-word ; 
    text-overflow: ellipsis ;
    overflow: hidden;
    white-space: nowrap ;    

    max-width : calc( 98vw - 20px - 32px - 20px - 5px ) ;   
}     

.order_title_span  {  
    margin :  5px  12px  5px  5px  ;     
    padding : 0 ;  
                        
    color : var( --mainColor ) ;  
    font-size : 16px ;  font-weight : bold ;   
    display : inline-block ;   
    vertical-align : bottom ;  
    text-align : left ;   

    overflow-wrap: break-word ; 
    text-overflow: wrap ;
    overflow: wrap;
    white-space: normal ;    

    /* word-break: break-word!important; */
            /*    MUST    word-break: break-word;   or   word_connected_by_UNDERSCORE   will  NOT  WRAP    */

    max-width : calc( 98vw - 20px - 32px - 20px - 5px ) ;   
}     

.order_detail_title_span { 

    display : inline-block ;  

    font-size : 14px ;  
    font-weight : bold ;  
    color : var( --mainColor ) ;   
    /* rgb(99, 99, 99) ;  */

    overflow-wrap: break-word ;   
    text-overflow: wrap ;  
    overflow: wrap ;  
    white-space: normal ;    

    word-break: break-word!important;
            /*    MUST    word-break: break-word;   or   word_connected_by_UNDERSCORE   will  NOT  WRAP    */ 
}

.order_detail_title_span_width { 


    width : 80px!important ; 


}
.order_detail_span { 

    display : inline-block ;  

    font-size : 14px ;  
    /* font-weight : bold ;   */
    color : rgb(99, 99, 99) ; 

    overflow-wrap: break-word ;   
    text-overflow: wrap ;  
    overflow: wrap ;  
    white-space: normal ;    

    word-break: break-word!important;
            /*    MUST    word-break: break-word;   or   word_connected_by_UNDERSCORE   will  NOT  WRAP    */

}


.order_outter_a {
    display : inline-block ;   

    cursor : pointer ;   

    margin : 0 0px  ;   

    text-decoration : none ; 
}   

.order_outter_a:hover  .inner_center_a_div , .order_pay_button:hover   {  
    background-color :  inherit!important ;  
    color :  var( --mainColor )!important ;  
}  

.order_outter_a:hover  .order_content_span {  
    color :  var( --mainColor )!important ;
}

.inner_center_a_div , .order_pay_button { 

    background-color : var( --mainColor ) ;  
    /* text-align : right ;    */
    text-align : right ;   
    display : block ;  
    /* inline-block ;    */
    padding : 4px 16px ;   
    margin : 0px 10px ;   

    border-radius : 11px ;  

    border : 2px solid var( --mainColor ) ;   

    cursor : pointer ;  

    box-shadow:  2px 2px 2px rgba(128, 128, 128 , 0.9 ) ; 
                /* -4px -3px 3px rgba(128, 128, 128 , 0.6 ) ;   */


}



.order_fake_input { 
    border : none!important ; 
    background : transparent!important ;  
    outline : none!important;   

    font-size: inherit!important ;   
    color : inherit!important ; 
    font-weight : inherit!important ; 

    max-width : 40px!important ; 
    margin : inherit!important ; 
    padding : inherit!important ; 

}


.button_a button:hover {
    background-color : rgba( 128, 0, 128 , 0.35 )!important ; 
    /* color : white ;  */
}













/*    -----------------------       For    429_CAPtcha  .HTML        -------------------------------    */         


.captcha_right_div {  

    display : flex ;   
    min-width : 400px ;  
    align-items: center ; 
    justify-content: flex-end; 

}   


#captcha_image { 

    --captcha-height : 200px ;
    --captcha-width : 300px;
    --square-height : 80px ;  
    --square-width : 80px ; 
    --moved : 0px;  

    --rand-x : 100px;
    --rand-y : 100px;

    --square-space : 15px;  



    height : var( --captcha-height );
    width : var( --captcha-width );

    position : relative;
    display : block ; 

    border : 1px solid purple ;  

    /* background-image: url(/media/captcha/captcha.png);  */
    background-position: center;
    /* background-size : cover; */
    background-size : 300px 200px ; 
    
    box-shadow:0px 2px 4px rgba(185, 119, 185 , 0.6) ;
} 


/* #check-content {  */
#captcha_image::before   { /* , #captcha_image::after {   */

    width : var( --square-width ) ;  
    height : var( --square-width )  ;

    display : block ; 
    content : "" ;

    background : rgba( 0, 0, 0 , 0.5 ) ; 
    /* border : 4px solid rgb(128, 0, 128, 0.8 ); */
    box-shadow : 4px 4px 0px rgba(127, 0, 127 , 0.5 ) , 
                 4px -4px 0px rgba(127, 0, 127 , 0.5 ) , 
                 -4px -4px 0px rgba(127, 0, 127 , 0.5 ) , 
                 -4px 4px 0px rgba(127, 0, 127 , 0.5 ) ; 
    position : absolute;

    top : var( --rand-y ) ; 
    left : var( --rand-x ) ; 

    /* top : 40px ; 
    left : 50px; */


}


#captcha_image__::before ,     #captcha_image::after { 
    height : inherit;
    width : inherit;

    display : block; 
    content : "";

    position : absolute ; 


    background-color: rgba(26, 24, 24, 0.7) ;

    /* background-image: inherit;   */
    background-position: inherit;
    background-size: inherit;


    
    /* box-shadow:0px 2px 4px rgba(185, 119, 185 , 0.6) ; */


    /* 
    clip-path: inset( 
        
        calc( ( var( --captcha-height ) - var( --square-height) ) / 2  )
        var( --square-width) 
        calc( ( var( --captcha-height ) - var( --square-height) ) / 2  )
        calc( var( --captcha-width ) - var( --square-width) * 2  )
    
    ); 
    
    -webkit-clip-path: inset( 
        
        calc( ( var( --captcha-height ) - var( --square-height) ) / 2  )
        var( --square-width) 
        calc( ( var( --captcha-height ) - var( --square-height) ) / 2  )
        calc( var( --captcha-width ) - var( --square-width) * 2  )
    
    );

    */

    clip-path: inset( 
        
        calc( var( --rand-y ) )
        calc( var( --captcha-width ) - var( --rand-x ) - var( --square-width ) )
        calc( var( --captcha-height ) - var( --rand-y ) - var( --square-width ) )
        calc( var( --rand-x ) )
    
    );

    -webkit-clip-path: inset( 
        
        calc( var( --rand-y ) )
        calc( var( --captcha-width ) - var( --rand-x ) - var( --square-width ) )
        calc( var( --captcha-height ) - var( --rand-y ) - var( --square-width ) )
        calc( var( --rand-x ) )
    
    );

    

    filter : drop-shadow( 4px 4px 0px  black )
    drop-shadow( -10px 4px 0px  black )
    drop-shadow( 4px -4px 0px  black )
    drop-shadow( -4px -4px 0px  black ) ; 
    

    


} 


#captcha_image::after {   

    
    transform : translateX( 
        /* calc( var( --square-width )  - var( --captcha-width ) - var( --square-space ) )  */

        /* clamp( calc( var( --square-width )  - var( --captcha-width ) - var( --square-space ) )  , 
                calc( var( --square-width )  - var( --captcha-width ) - var( --square-space )  + var( --moved ) ) , 
                var( --square-width )   
        ) */

            /*  clamp( min , preferred , max )  */
        clamp(  
            calc( var( --square-width )  * ( -1 ) - var( --rand-x ) - var( --square-space )  ) , 
            calc( var( --square-width )  * ( -1 ) - var( --rand-x ) - var( --square-space )  + var( --moved ) ) , 
            calc( var( --captcha-width ) - var( --rand-x ) - var( --square-width )  )   

        )

    ) ;   


    background-image: inherit;  

    background-size: 300px 200px ;


    transition : 0.25s  all  ease-in-out ;  


    box-shadow : 4px 4px 4px rgba(127, 0, 127 , 0.6 ) , 
                 4px -4px 4px rgba(127, 0, 127 , 0.6 ) , 
                 -4px -4px 4px rgba(127, 0, 127 , 0.6 ) , 
                 -4px 4px 4px rgba(127, 0, 127 , 0.6 ) ; 

}


#captcha_image:active::after { 

    transition : none ; 
}



#captcha_image::before { 

    background-blend-mode: multiply; 
}



#captcha_image.ok::before , 
#captcha_image.ok::after , 
#captcha_image.ok #captcha_handle {
    display : none ;   
}


#captcha_handle { 

    width : calc( var( --square-width ) + var( --captcha-width ) + var( --square-space ) ) ;  

    height : 28px ;

    background-color : rgb( 225, 209, 240 , 0.5 );

    /* border : 2px solid rgb(128, 0, 128 , 0.3 ); */

    border-radius: 14px ;  

    box-shadow:  inset  5px 4px 6px rgba(185, 119, 185 , 0.8) , 
                        5px 4px 6px rgba(185, 119, 185 , 0.8)  ;


    /* display : block;   */

    position : absolute ; 

    /* top : calc( var( --captcha-height ) + var( --square-space ) ) ;  */
    bottom : -45px; 

    left : calc(  var( --square-width ) * ( -1 ) - var( --square-space ) );
}


.captcha_tips{ 
    position : absolute ;  

    display : flex ; 
    width : inherit ; 
    height : inherit ; 
    justify-content:center; 
    align-items: center;


    font-size : 16px ; 
    color : rgba(128, 0, 128 , 0.7 ); 
    font-weight : bold ; 
    padding-left : 15px ; 


    /* cursor : none ;   */

    user-select : none ;     /*   NOT  HIghLIght  TExt   */    

}


#captcha_button { 

    width : var( --square-width ) ;  

    height : inherit ;

    background-color :  rgb(212, 196, 228);

    border : 2px solid rgb(128, 0, 128 , 0.8 );

    border-radius: inherit ;  

    box-shadow:  inset  6px 3px 5px rgba(114, 109, 114, 0.8) , 4px 3px 4px rgba(114, 109, 114, 0.8) ;


    display : block;  

    /* position : absolute ;  */

    /* top : 0!important ; 
    bottom : 0!important ;   */

        /*    WHY   -2  ????    ,   BECause   Of   PARent-ELEMent 's   BORDer     */   
    /* top : -2px!important ; 
    bottom : 0!important ;  */

    /* left : calc(  var( --square-width ) * ( -1 ) - var( --square-space ) ); */


    cursor : move ;   


    transform : translateX(
        clamp(  
            1px, 
            var( --moved ) , 
            calc( var( --captcha-width ) + var( --square-space )  )   

        )
    ) ;  
        /*   can   NOT   0px ,   BECause   MINify   WIll   CHAnge  0px   to   0   ,   &&   WIthOUT   px   CLamp ( )  NOT   WORK   */


    
    transition : 0.25s  all  ease-in-out ;  


}

#captcha_image:active #captcha_button { 

    transition : none ; 
}



#ok_center_div{  

    display : none ;   /* flex ; */   
    justify-content: center;
    align-items: center;


    width : inherit;

    position : absolute;
    /* bottom : -49px; */

    top : calc( 100% + 20px ) ;
    
    flex-direction : column ; 

}

#ok , #reload_button {

    /* width : var( --square-width ) ;   */

    height : 28px ;


    background-color :  rgb(212, 196, 228);

    border : 2px solid rgb(128, 0, 128 , 0.8 );

    /* border : 2px solid rgb(128, 0, 128 , 0.3 ); */

    border-radius: 14px ;  

    box-shadow:  inset  6px 3px 5px rgba(114, 109, 114, 0.8) , 4px 3px 4px rgba(114, 109, 114, 0.8) ;


    display : flex;  
    align-items: center;
    justify-content: center;




    color : purple; 
    font-weight : bold; 
    font-size: 16px;
    
    padding : 0 5px;

    cursor:none;
    user-select : none ;   /*   NOT  HIghLIght  TExt   */    
    
    
    transition : 0.25s  all  ease-in-out ;          
}


#reload_button {
    margin-top: 30px;
    border-radius: 6px;
    padding: 14px 16px;
    cursor: pointer;
}