/*  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;
    }
    


/* ---------------     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% ;  
}   


body {
  /* background-color: #935d8c; */
  /* background-image: url("images/overlay.png"), -moz-linear-gradient(45deg, #e37682 15%, #5f4d93 85%); */

  /* background-image: url(""), linear-gradient(45deg, #e37682 15%, #5f4d93 85%); */

  /* background-image: url("images/overlay.png"), -ms-linear-gradient(45deg, #e37682 15%, #5f4d93 85%);
  background-image: url("images/overlay.png"), linear-gradient(45deg, #e37682 15%, #5f4d93 85%); */



      /* background-image : linear-gradient( rgb(127, 219, 231) , rgb(243, 177, 243) ) ;  */
      /* background-image : linear-gradient( to right , rgb(127, 219, 231) , rgb(243, 177, 243) ) ;  */
      /* background-image : linear-gradient( to bottom right , rgb(127, 219, 231) , rgb(255, 255, 146) , rgb(243, 177, 243) ) ;  */
      background-image : linear-gradient(  rgb(194, 231, 236) , rgb(255, 255, 146) , rgb(216, 169, 216) ) ; 
         /* rgb(127, 219, 231) */

}


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(194, 231, 236) ;  /*hwb(195 71% 0%); */ /*  #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 ;    
  --formInputTitleFontSizeEn :  20px ;   

  --footerColor :  rgb(112, 112, 112) ;  
  --footerTitleColor :  rgb(102, 102, 102) ;  
  --footerHoverColor : rgb(145, 38, 233) ;

  /*  
    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% ; 
}







/*   ------------------------------------        FOOTer          ---------------------------------     */




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

}

.footerLinks { 
    text-decoration : none  ;    
    color : var( --footerColor ) ;  
    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:hover { 

    color : var( --footerHoverColor ) ;   ;  

}


.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 : var( --footerTitleColor ) ;  

    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 ;   
    }


} 





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

    .footer_title_p   {  
      display : block ;   
    }


} 

















/*   ------------------------------------        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(208, 177, 250) ;   /*   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 : 550px  ) {    /*  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 ; 
}

















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



/*  ---------------------------     Modal      Pop - Up  Window    &&    LANGuage_MODAL .HTML     ----------------------------  -*/

.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 ; 
}



    .language_button_modal {  


        background-color: inherit ;
        font-size:  20px ; 
        color : rgb(114, 111, 111) ;        /*    Then   CHange     FIRST-CHILD    */
        font-weight: bold ; 

        width : 110px!important ; 
        height : 45px!important ; 
        /* border : 2px solid rgb(114, 111, 111) ; */
        border : 2px solid purple ;

        border-radius:  10px ;

        margin :  30px 8px 20px 8px  ; 
        cursor : pointer ; 

    }    


    .language_button_modal:is( .active_lang ) {  

        background-color: rgb(185, 132, 185) ;
        color : white ; 

    }


    .language_button_modal:hover {  

        background-color: purple ;
        color : white ; 

    }


    .dropDownLiText_lang  a  {  

        font-size : 15px!important; 

        padding: 10px 6px 10px 10px!important; 

    }   
    

    .navlistDropdown_audio_site .active_lang  {  

        /* background-color: rgb(185, 132, 185) ; */
        background-color: rgb(161, 90, 161) ;

    }
    .navlistDropdown_audio_site .active_lang span  {  

        color : white ; 

    }









               /*   -------------------------------------     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 )!important  ;    

    } 
}    












/*   -----------------    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  ;  
} 











/*    ---------------------------------------      SIGN_IN_PATH .HTML    &&    REGister_PATH .HTML     -------------------------------------    */    
/*    ---------------------------------------      REQuest_PAssWOrd_PATH .HTML    &&    RESet_PAssWOrd_PATH .HTML     -------------------------------------    */    
/*    ---------------------------------------      VERify_CODE_PATH .HTML     -------------------------------------    */    





    /*    CENTER   the  FORM    &&   the  LINK  */
    .form_link_container_div { 
        text-align: center; 

        background-color: rgba(109, 107, 107, 0.35);

        border-radius: 12px;


        width: 54em;
		max-width: calc(100% - 4em);
		margin: 0 auto;

	}


    
    .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 )!important ;    
        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 ;   
    
    }   


    .upload_sample_form  .input_div  {   /*    ,  .elems_horizontal_div  div:first-of-type  {     */    
    
        margin-bottom : 6px!important ;   
    
    }   
    
    
    .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: rgba( 225, 209, 240 , 0.65 )!important ;   /* 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 , 
    .upload_sample_form   .shrinkable_input  , .upload_sample_form .input_div input {   
        width : calc( 95vw - 35px) ;  
        max-width : 200px ; 
    }
    
    .sign_in_form   .shrinkable_input  , .verify_code_form   .shrinkable_input  ,  .register_form  .shrinkable_input  , .add_institute_path  .shrinkable_input  {   
        width : calc( 95vw - 35px) ;  
        max-width : 250px ; 
    }
    
    .request_password_form .shrinkable_input , .reset_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 ,
    .upload_sample_form   .fa-check-circle , .upload_sample_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: 119px ; 
        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 : 15px 0px 0px 0px!important ;  
    
        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 : 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 ; 
    }
    
    .upload_sample_form   .errorMessage {  

        font-size: 15px!important ;  
        letter-spacing: 1px ;  
        
        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  ;  
    }



    .verify_code_form  #resend_button , .reset_password_form  #resend_button { 

        position : absolute ;   
        /* top : 0!important  ;  */
        bottom : 0!important ;   
        left : 100% ;  
        width: 85px ;  
        height : 25px ; 
        margin : 4px 0 4px 0 ;  padding : 0 ; 
        border-radius: 5px ; border-color: purple ;  border-width: 1px;
        font-weight: bold ; color : purple ;  font-size : 13px ;  

    }





/*  --------------------------    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 ;  
        } */


        .upload_sample_form_parent { 


            max-width : 100% ; 

            margin: 0 0;

        }
    
    }  
    
    
    
    @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: 515px) { 
    
    
        .reset_password_form  .elems_horizontal_div  { 
                
            text-align : center ;       
    
            margin-right : 0!important ; 
                     
        }    
    
        .reset_password_form  .title_name { 
            display : block ;   
            text-align: left ;   
            margin-left : 4vw ; 
            margin-bottom : 3px ;   
        } 
    
        .reset_password_form  .shrinkable_input  {   /*    ,  .elems_horizontal_div  div:first-of-type  {     */    
    
    
            display : block ;   
    
        
        }   
    
        .reset_password_form  .input_and_buttons_div  , .reset_password_form .elems_horizontal_div  { 
            margin-right : 0!important ; 
        }
    
    }  
    
    
  
    @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  , .request_password_form .elems_horizontal_div  { 
            margin-right : 0!important ; 
        }
    
    }  
    
    
    
    @media only screen and (max-width: 570px) { 
    

                    /*    :has( .child_class )    SELects    the   PARent   ELEM   */     
        .form_link_container_div:has( .reset_password_form ) { 


            max-width : 100% ; 

            margin: 0 0;

        }
        
    
    }  

  

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

                    /*    :has( .child_class )    SELects    the   PARent   ELEM   */     
        .form_link_container_div:has( .sign_in_form ) { 


            max-width : 100% ; 

            margin: 0 0;

        }
        
    
    }  

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

                    /*    :has( .child_class )    SELects    the   PARent   ELEM   */     
        .form_link_container_div:has( .register_form ) { 


            max-width : 100% ; 

            margin: 0 0;

        }
        
    
    }  

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

                    /*    :has( .child_class )    SELects    the   PARent   ELEM   */     
        .form_link_container_div:has( .request_password_form ) { 


            max-width : 100% ; 

            margin: 0 0;

        }
        
    
    }  


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

                    /*    :has( .child_class )    SELects    the   PARent   ELEM   */     
        .form_link_container_div:has( .verify_code_form ) { 


            max-width : 100% ; 

            margin: 0 0;

        }
        
    
    }  




    @media only screen and (max-width: 460px) {   /* 300px */   

        .verify_code_form  .elems_horizontal_div { 
                
            text-align : center ;       
    
            margin-right : 0!important ; 
                    
        }    

        .verify_code_form  #resend_button , .reset_password_form  #resend_button { 
            /* display : block ;   
            text-align: left ;   
            margin-left : 4vw ; 
            margin-bottom : 3px ;    */


            top : 100%!important  ;   
            bottom : unset!important ;  
            right : 0!important ; 
            left : unset!important ; 


        } 
    
        .verify_code_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: 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: 353px) {   /* 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 ;  
        } */
    
    }  
    
    
    

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

        .upload_sample_form  .elems_horizontal_div { 
                
            text-align : left ;       
                    
        }    

        .upload_sample_form  .title_name { 
            display : block ;   
            text-align: left ;   
            margin-left : 5vw ; 
            margin-bottom : 3px ;   
        } 

        .upload_sample_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: 395px) { 

        .upload_sample_form  .elems_horizontal_div { 
                
            text-align : center ;       
            display : inline-block ;   
                    
        }    

        .upload_sample_form  .file_name_selected_span , .upload_sample_form  .file_name_selected_span_space_holder  { 
            display : inline-block!important ;   
            text-align: right ;   
            /* margin-left : 5vw ; 
            margin-bottom : 3px ;    */

            margin : 0 ;  
            width : 100%; 

        } 

        .upload_sample_form  .file_name_selected_span {

            margin-top : 6px ;    

        }

        .upload_sample_form  .input_div  ,  .upload_sample_form .add_file_button_verify   {   /*    ,  .elems_horizontal_div  div:first-of-type  {     */    


            display : block ;   

            text-align: center ;   



        }   

        /* .file_name_selected_span { 
            display : block!important ; 
            text-align : center!important ;  
        } */

    }  








            /* --------------    Form 's   BOTtom 's   LINK   STyle   To   DISTinguish   From   TEXT   --------------- */   

    .form_link_container_div  .nav_link_div   {   
        
        font-size: 15px!important ;   
        color : rgba(128, 0, 128 , 0.8 ) ;   

        vertical-align: middle;

    }    

    
    .form_link_container_div  .nav_link_div  .nav_link:last-child  {    

        /* text-decoration : underline!important ;  */
        /* font-style: italic!important ;     */

        margin-left: 12px ;    

    }    
   



/*    ---------------------------------------      BASE_EN .HTML 's    ENGlish   VERSion 's   CSS      -------------------------------------    */    



.en_div  .navList li a {
    font-size:  17px!important ;  /*  large; */   

    /* padding: 15px  calc( ( 100vw - 600px ) * 0.01 + 15px ) ; */
    
  }
  


.selected_lang {  

	font-size : 16px!important ;
}

.en_div  .selected_lang {  

	font-size: 18px!important ;

}



.en_div  .nav-section a {   

	font-size : 20px!important ;   


}    

.sticky {  

    text-align : center ;   

}   



.en_div  .download_button {   

    /* width : var( --square-width ) ;   */

    height : unset ;

	width : unset ;  

    font-size: 15px!important;

    padding: 5px 9px;   

}

/*    MUST   Be   AFTer    .en_div  .download_button    ,   OR   WIll  Be  OVerRIDen   By   .download_button   */
.en_div  .upload_button {   


    font-size : 18px!important ;   

	width : unset!important ;  

	padding: 14px 17px!important;   

}   




.en_div  .title_name { 

    font-size: var( --formInputTitleFontSizeEn )!important ;    

}   

.en_div  .consent_doc_link {   

    font-style : italic ;   
}   

.en_div  .submit_button_form_html {    

    font-size:  18px ; 
    padding : 9px 14px ; 

    margin :  30px 8px 20px 8px  ; 

}



.en_div  .verify_code_form  #resend_button , .en_div  .reset_password_form  #resend_button { 

    width: 100px ;  

}



.en_div  .footer_title_p {   

    color : var( --footerTitleColor )!important ;  
   
    font-size : calc( 0.2vw + 15px ) ; 

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

}   



.en_div  .contact_form_container_div  .terms_header_h1 {    

    font-size : 32px ;     

    letter-spacing : 1px ;    
}     



.en_div  .contact_form_container_div  .info_p {   

    font-size : 15px ;   
    color : rgba(128, 0, 128, 0.7) ;  

    margin : 7px 0 0 0 ;   

    line-height : 27px ;   

    letter-spacing : 0px ;    
}   


.en_div  .contact_form_container_div  .input_header {   

    font-size : 20px!important ;   
    /* color : var( --mainColor ) ;   */
    /* font-weight : bold ;    */

    /* margin : 35px 0 7px 0 ;    */


    letter-spacing : 0px!important ;    
}   

.en_div  .contact_submit_button { 
    font-size:  18px ; 
    padding : 10px 42px ; 

    letter-spacing : 1px ;   

    width : unset ;  

}    



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

    .en_div  .footer_title_p   {  
      display : block ;   
    }


} 


@media only screen and (max-width: 389px) {   /* 300px */   
    
    .en_div .sign_in_form  .elems_horizontal_div { 
            
        text-align : center ;       
        margin-right : 0!important ; 
    }    

    .en_div .sign_in_form  .title_name { 
        display : block ;   
        text-align: left ;   
        margin-left : 3vw ; 
        margin-bottom : 3px ;   
    } 

    .en_div .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 ;  
    } */

}  



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

                    /*    :has( .child_class )    SELects    the   PARent   ELEM   */     
        .en_div  .form_link_container_div:has( .request_password_form ) { 


            max-width : 100% ; 

            margin: 0 0;

        }
        
    
    }  



    @media only screen and (max-width: 523px) { 
    
    
        .en_div  .request_password_form  .elems_horizontal_div { 
                
            text-align : center ;       
    
            margin-right : 0!important ; 
                     
        }    
    
        .en_div  .request_password_form  .title_name { 
            display : block ;   
            text-align: left ;   
            margin-left : 4vw ; 
            margin-bottom : 3px ;   
        } 
    
        .en_div  .request_password_form  .shrinkable_input  {   /*    ,  .elems_horizontal_div  div:first-of-type  {     */    
    
    
            display : block ;   
    
        
        }   
    
        .request_password_form  .input_and_buttons_div  , .request_password_form .elems_horizontal_div  { 
            margin-right : 0!important ; 
        }
    
    }  
    


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

                    /*    :has( .child_class )    SELects    the   PARent   ELEM   */     
        .en_div  .form_link_container_div:has( .verify_code_form ) { 


            max-width : 100% ; 

            margin: 0 0;

        }
        
    
    }  



    @media only screen and (max-width: 480px) {   /* 300px */   

        .en_div  .verify_code_form  .elems_horizontal_div { 
                
            text-align : center ;       
    
            margin-right : 0!important ; 
                    
        }    

        .en_div  .verify_code_form  #resend_button , .reset_password_form  #resend_button { 
            /* display : block ;   
            text-align: left ;   
            margin-left : 4vw ; 
            margin-bottom : 3px ;    */


            top : 100%!important  ;   
            bottom : unset!important ;  
            right : 0!important ; 
            left : unset!important ; 


        } 
    
        .en_div  .verify_code_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: 610px) { 
    

                    /*    :has( .child_class )    SELects    the   PARent   ELEM   */     
        .en_div  .form_link_container_div:has( .reset_password_form ) { 


            max-width : 100% ; 

            margin: 0 0;

        }
        
    
    }  



    @media only screen and (max-width: 555px) { 
    
    
        .en_div  .reset_password_form  .elems_horizontal_div  { 
                
            text-align : center ;       
    
            margin-right : 0!important ; 
                     
        }    
    
        .en_div  .reset_password_form  .title_name { 
            display : block ;   
            text-align: left ;   
            margin-left : 4vw ; 
            margin-bottom : 3px ;   
        } 
    
        .en_div  .reset_password_form  .shrinkable_input  {   /*    ,  .elems_horizontal_div  div:first-of-type  {     */    
    
    
            display : block ;   
    
        
        }   
    
        .en_div  .reset_password_form  .input_and_buttons_div  , .reset_password_form .elems_horizontal_div  { 
            margin-right : 0!important ; 
        }
    
    }  



    .en_div  .order_detail_title_span_width { 

        width : 150px!important ; 

    }