/***************************************************************************************************/
  /***************************************************************************************************/
  /**************************ARTICLE-EDIT*************************************************************************/
  /*TABLE  */

  /* START OF NOTIFICATIONS */
  .notification-bigdiv {
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 1rem;
    padding: 5px;
    margin: 5px;

  }


  





  .inc-div {
   
    background: linear-gradient(to right, rgb(24, 245, 208), rgb(107, 120, 177));
    margin: 2px;
    padding: 2px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 20px;
    min-width: 5%;
    max-width: 100%;
  
     min-height: 1400px;
    max-height: 2000px;

     
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    
    background: linear-gradient(to bottom, #12a2db, aqua);
    backdrop-filter: blur(10px);
  
    border-radius: 20px;
    border: 2px solid rgba(11, 217, 245, 0.5);
  

    
  }

  
   .inc-div:active {
    
    background-color: #134779;
  }

  .inc-div:visited {
    background-color: grey;
  }

  .inc-div:hover {

    
    background: rgb(12, 225, 233);
    color: rgb(15, 15, 15);
  }
  
   @media screen and (max-width: 800px) {
    .inc-div {

      margin: 2px;
      padding: 2px;

       margin-top: 10px;
      margin-bottom: 10px;
    
      border-radius: 20px;
    
  font-size: 16px;
      min-width: 90%;
      max-width: 100%;

    }


   
  }


  .title-suggestion2 {
    background: rgb(241, 241, 241);
    min-width: 65%;
    max-width: 65%;
    margin: 5px;
    padding: 5px;
    color: rgb(15, 15, 15);

    border: 1px rgb(162, 231, 243) solid;
    border-radius: 10px;

    border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    color: black;

    
    background: linear-gradient(135deg, rgba(9, 224, 231, 0.8), rgba(9, 224, 231, 0.8));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37);

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

   display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    
     margin: 0px;
    padding: 5px;
  
    
      border-radius: 30px;



    }

  }


  
  .votenotediv {
    color: navy;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
   
    border-radius: 10px;
    background-repeat: no-repeat;

    margin: 5px;
    padding: 5px;

    min-width: 60%;
    max-width: 100%;

  

    background: white;
    border-color: #c4cbcc;


     background: linear-gradient(to bottom, #12a2db, aqua);
    backdrop-filter: blur(10px);
  
    border-radius: 20px;
    border: 2px solid rgba(11, 217, 245, 0.5);

 @media screen and (max-width: 800px) {
     
     
      margin: 0px;
      padding: 0px;

      min-width: 80%;
      max-width: 100%;
    
      border-radius: 10px;
 

    }
    
  }



  .to-div {
  display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;

   
    
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 20px;
    margin: 2px;
       background: linear-gradient(to top, rgb(240, 245, 208), rgb(10, 243, 3));
    padding: 2px;
   min-width: 140px;
    max-width: 180px;
     min-height: 60px;
    max-height: 100px;
    background-color: white;
    font-size: 16px;



@media screen and (max-width: 800px) {
      padding: 2px;
      margin: 2px;
      
     min-width: 120px;
     max-width: 130px;

    min-height: 90px;
    max-height: 90px;
    
    }
  }
  

  
  .mychoice {

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


      border: 1px rgb(28, 214, 228) solid;
    border-radius: 200px;
    margin: 5px;
       background: linear-gradient(to top, rgb(240, 236, 20), rgb(231, 178, 3));
      padding: 5px;
   min-width: 140px;
    max-width: 140px;
      min-height: 60px;
    max-height: 60px;
    background-color: white;

    



@media screen and (max-width: 800px) {
        padding: 2px;
      margin: 2px;
      
     min-width: 120px;
     max-width: 130px;

    min-height: 90px;
    max-height: 90px;
    

    }
  }
  
  
  
  .to-div2 {
   display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;


      border: 1px rgb(28, 214, 228) solid;
    border-radius: 20px;
    margin: 2px;
      
      padding: 2px;
   min-width: 140px;
    max-width: 140px;
      min-height: 100px;
    max-height: 150px;
    background-color: white;
       background: linear-gradient(to top, rgb(240, 245, 208), rgb(10, 243, 3));
    



@media screen and (max-width: 800px) {
      padding: 2px;
      margin: 2px;
      
     min-width: 120px;
     max-width: 130px;

    min-height: 110px;
    max-height: 110px;

       margin-top: 10px;
       margin-bottom: 10px;
      padding-top: 15px;
      padding-bottom: 15px;

      margin-left: 3px;
       margin-right: 3px;
      padding-left: 3px;
      padding-right: 3px;

    
    }
  }
  

  
  .to-div3 {

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

    min-height: 100px;
    max-height: 100%;

    min-width: 300px;
    max-width: 300px;

    background-color: white;

    background: linear-gradient(to bottom, rgb(21, 194, 238), rgb(245, 246, 247));
    border-radius: 20px;
    
    padding: 5px;
    margin: 5px;
    border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    color: black;

   
  }

  @media screen and (max-width: 800px) {
    .to-div3 {
      margin-top: 5px;
       margin-bottom: 5px;
      padding-top: 5px;
      padding-bottom: 5px;

      margin-left: 1px;
       margin-right: 1px;
      padding-left: 5px;
      padding-right: 5px;

   
      border-radius: 20px;
      min-height: 140px;
      max-height: 100%;

      min-width: 50%;
      max-width: 50%;
      font-size: 16px;
    }
  }
  

  
  .to-div4 {

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

    min-height: 100px;
    max-height: 100%;

    min-width: 150px;
    max-width: 150px;

    background-color: white;

    background: linear-gradient(to bottom, rgb(21, 194, 238), rgb(245, 246, 247));
    border-radius: 20px;
    
    padding: 10px;
    margin: 10px;
    border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    color: black;

   
  }

  @media screen and (max-width: 800px) {
    .to-div4 {
      margin-top: 1px;
       margin-bottom: 1px;
      padding-top: 1px;
      padding-bottom: 1px;

      margin-left: 1px;
       margin-right: 1px;
      padding-left: 5px;
      padding-right: 5px;

   
      border-radius: 20px;
      min-height: 100px;
      max-height: 100%;

      min-width: 30%;
      max-width: 60%;
      font-size: 16px;
    }
  }
  

  
  
  .to-div5 {
   display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;


     
    margin: 2px;
      
      padding: 2px;
   min-width: 140px;
    max-width: 140px;
      min-height: 100px;
    max-height: 150px;
   background: linear-gradient(to bottom, rgb(21, 194, 238), rgb(245, 246, 247));
    border-radius: 20px;
       border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    



@media screen and (max-width: 800px) {
      padding: 2px;
      margin: 2px;
      
     min-width: 120px;
     max-width: 130px;

    min-height: 110px;
    max-height: 110px;

 

    
    }
  }
  

  
  .to-div6 {

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

    min-height: 100px;
    max-height: 100%;

    min-width: 200px;
    max-width: 200px;

    background-color: white;

    background: linear-gradient(to bottom, rgb(21, 194, 238), rgb(245, 246, 247));
    border-radius: 20px;
    
    padding: 2px;
    margin: 2px;
    border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    color: black;
    font-size: 16px;
   
  }

  @media screen and (max-width: 800px) {
    .to-div6 {
      margin-top: 1px;
       margin-bottom: 1px;
      padding-top: 1px;
      padding-bottom: 1px;

      margin-left: 1px;
       margin-right: 1px;
      padding-left: 1px;
      padding-right: 1px;

   
      border-radius: 20px;
      min-height: 100px;
      max-height: 100%;

     
      font-size: 16px;
    }
  }
  



  
  .to-div7 {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;

    margin: 10px;
    padding: 10px;

    min-width: 150px;
    max-width: 150px;

    min-height: 70px;
    max-height: 100%;
    background: linear-gradient(to bottom, rgb(21, 194, 238), rgb(245, 246, 247));
    border-radius: 20px;
    border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));




@media screen and (max-width: 800px) {
    padding: 2px;
    margin: 2px;

    min-width: 120px;
    max-width: 130px;

    min-height: 110px;
    max-height: 100%;

      margin-top: 10px;
      margin-bottom: 10px;
    padding-top: 15px;
    padding-bottom: 15px;

    margin-left: 3px;
      margin-right: 3px;
    padding-left: 3px;
    padding-right: 3px;

    
    }
  }
  

  
  .to-div8 {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;

    margin: 3px;
    padding: 5px;

    min-width: 150px;
    max-width: 250px;

    min-height: 30px;
    max-height: 100%;
    background: linear-gradient(to bottom, rgb(242, 243, 243), rgb(245, 246, 247));
    border-radius: 10px;
    border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));




@media screen and (max-width: 800px) {
    padding: 2px;
    margin: 5px;

    min-width: 120px;
    max-width: 200px;

    min-height: 40px;
    max-height: 100%;

     
    
    }
  }
  

  
  
  .to-div9 {
   display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;


     
    margin: 2px;
      
      padding: 2px;
   min-width: 140px;
    max-width: 140px;
      min-height: 100px;
    max-height: 100%;
   background: linear-gradient(to bottom, rgb(21, 194, 238), rgb(245, 246, 247));
    border-radius: 20px;
       border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    



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

  
     display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
      padding: 0px;
      margin: 0px;
      
     min-width: 90%;
     max-width: 100%;

   
      

    
    }
  }
  

  
  .to-div10 {
   display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;


     
    margin: 2px;
      
      padding: 2px;
   min-width: 140px;
    max-width: 250px;
      min-height: 100px;
    max-height: 100%;
   background: linear-gradient(to bottom, rgb(21, 194, 238), rgb(245, 246, 247));
    border-radius: 20px;
       border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    



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

  
     display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
      padding: 0px;
      margin: 0px;
      
     min-width: 90%;
     max-width: 100%;

   
      

    
    }
  }

  
  
  .to-div22 {
   display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;


     
    margin: 2px;
      
      padding: 2px;
   min-width: 200px;
    max-width: 200px;
      min-height: 100px;
    max-height: 100%;
   background: linear-gradient(to bottom, rgb(21, 194, 238), rgb(245, 246, 247));
    border-radius: 20px;
       border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    



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

  
     display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
      padding: 0px;
      margin: 0px;
      
     min-width: 300px;
     max-width: 100%;

   
      

    
    }
  }

  
  
  
  .to-div33 {
   display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;


     
    margin: 2px;
      
      padding: 2px;
   min-width: 300px;
    max-width: 300px;
      min-height: 100px;
    max-height: 100%;
   background: linear-gradient(to bottom, rgb(21, 194, 238), rgb(245, 246, 247));
    border-radius: 20px;
       border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    



@media screen and (max-width: 800px) {
      padding: 5px;
      margin: 5px;
      
     min-width: 170px;
     max-width: 170px;
font-size: 16px;
 

 

    
    }
  }
  


  
  .to-div44 {
   display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;


     
    margin: 2px;
      
      padding: 2px;
   min-width: 140px;
    max-width: 140px;
      min-height: 30px;
    max-height: 100%;
   background: linear-gradient(to bottom, rgb(21, 194, 238), rgb(245, 246, 247));
    border-radius: 20px;
       border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    



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

  
     display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
      padding: 0px;
      margin: 0px;
      
     min-width: 90%;
     max-width: 100%;

   
      

    
    }
  }
  
  .mychoice2 {

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


      border: 1px rgb(28, 214, 228) solid;
    border-radius: 20px;
    margin: 5px;
       background: linear-gradient(to top, rgb(240, 236, 20), rgb(231, 178, 3));
      padding: 5px;
   min-width: 140px;
    max-width: 140px;
      min-height: 100px;
    max-height: 150px;
    background-color: white;



@media screen and (max-width: 800px) {
       padding: 2px;
      margin: 2px;
      
     min-width: 120px;
     max-width: 130px;

   min-height: 110px;
    max-height: 110px;

       margin-top: 10px;
       margin-bottom: 10px;
      padding-top: 15px;
      padding-bottom: 15px;

      margin-left: 3px;
       margin-right: 3px;
      padding-left: 3px;
      padding-right: 3px;
    

    }
  }
  
  
  


.button-c{
    color: white;
    background: linear-gradient(to top, rgb(241, 241, 240), rgb(49, 132, 214));
}
  


  .new-div {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to bottom, rgb(240, 241, 240), rgb(245, 246, 247));
    border-radius: 10px;
    min-width: 400px;
    max-width: 400px;
    padding: 10px;
    margin: 10px;
    border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    color: black;

    
    background: linear-gradient(135deg, rgba(25, 154, 240, 0.9), rgba(145, 141, 141, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37); 
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  
  

    

@media screen and (max-width: 800px) {
   
      padding: 5px;
      margin: 5px;

      min-width: 95%;
      max-width: 100%;
    
      border-radius: 10px;


    }
  }


  

  .new-div3 {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to bottom, rgb(240, 241, 240), rgb(245, 246, 247));
    border-radius: 10px;
    min-width: 400px;
    max-width: 400px;
    padding: 2px;
    margin: 2px;
    border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    color: black;

    
    background: linear-gradient(135deg, rgba(25, 154, 240, 0.9), rgba(145, 141, 141, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37); 
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  
  

    

@media screen and (max-width: 800px) {
   
      padding: 5px;
      margin: 5px;

      min-width: 95%;
      max-width: 100%;
    
      border-radius: 10px;


    }
  }


  .new-div4 {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to bottom, rgb(240, 241, 240), rgb(245, 246, 247));
    border-radius: 10px;
    min-width: 300px;
    max-width: 300px;
    padding: 2px;
    margin: 2px;
    border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    color: black;

    
    background: linear-gradient(135deg, rgba(25, 154, 240, 0.9), rgba(145, 141, 141, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37); 
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  
  

    

@media screen and (max-width: 800px) {
   
      padding: 5px;
      margin: 5px;

      min-width: 95%;
      max-width: 100%;
    
      border-radius: 10px;


    }
  }

  
  .new-div-a {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to bottom, rgb(240, 241, 240), rgb(245, 246, 247));
    border-radius: 10px;
    min-width: 250px;
    max-width: 250px;


    padding: 20px;
    margin: 20px;
    border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    color: black;

    
    background: white;
    
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  
  

    

@media screen and (max-width: 800px) {
   
      padding: 2px;
      margin: 2px;

      min-width: 95%;
      max-width: 100%;
    
      border-radius: 10px;


    }
  }


  .new-div2 {
   
    background: linear-gradient(to bottom, rgb(240, 241, 240), rgb(245, 246, 247));
    border-radius: 10px;
    min-width: 850px;
    max-width: 40%;
    padding: 5px;
    margin: 5px;
    border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    color: black;

    
    background: linear-gradient(135deg, rgba(25, 154, 240, 0.9), rgba(145, 141, 141, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37); 
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  
  

    

@media screen and (max-width: 800px) {
   
      padding: 1px;
      margin: 1px;

       margin-top: 5px;
      margin-bottom: 5px;

      min-width: 80%;
      max-width: 100%;
    
      border-radius: 10px;


    }
  }

  
  .ticket-notif-div {
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(238, 239, 240, 0.9), rgba(9, 224, 231, 0.8));
    margin: 5px;
    padding: 10px;
    border: 1px rgb(154, 191, 197) solid;
    border-radius: 2rem;
    min-width: 80%;
    max-width: 95%;
    font-size: 18px;
    min-height: 20px;
    max-height: 100%;
  

    font-size: 16px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

       
    

  }


  
  .payment-notif-div {
   
  border: 0px rgb(28, 214, 228) solid;
    border-radius: 2rem;

    background: linear-gradient(to bottom, rgb(240, 241, 240), rgb(245, 246, 247));
    border-radius: 20px;
  
    padding: 5px;
    margin: 5px;
    border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    color: black;

    
    background: linear-gradient(135deg, rgba(238, 239, 240, 0.1), rgba(9, 224, 231, 0.8));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37); 



    
@media screen and (max-width: 800px) {
   
      padding: 5px;
      margin: 5px;

      min-width: 90%;
      max-width: 95%;
    
    


    }

  }

  .notification-smalldiv {
    border: 0px rgb(28, 214, 228) solid;
    border-radius: 2rem;

    background: linear-gradient(to bottom, rgb(240, 241, 240), rgb(245, 246, 247));
    border-radius: 10px;
  
    padding: 3px;
    margin: 3px;
    border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    color: black;

    
    background: linear-gradient(135deg, rgba(238, 239, 240, 0.1), rgba(9, 224, 231, 0.8));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37); 



    
@media screen and (max-width: 800px) {
   
      padding: 1px;
      margin: 1px;

      min-width: 90%;
      max-width: 95%;
    
    


    }

  }


  
  .accountbiggerbox {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   
 
   
    border: 0px rgb(28, 214, 228) solid;
    border-radius: 20px;
    min-width: 400px;
    max-width: 100%;

  
 
    

    color: black;
  

  }


  
  
  .accountsmallerbox {
 
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   
 
   
    border: 0px rgb(28, 214, 228) solid;
    border-radius: 20px;
    min-width: 400px;
    max-width: 100%;

   margin: 5px;
   padding: 5px;
 
    color: black;
  
    min-height: 500px;
    max-height: 100%;


    
    @media screen and (max-width: 1000px) {
    
      min-width: 80%;
      max-width: 100%;
    
      border-radius: 10px;

  }

  }



  
  .answer-div {


    border: 1px rgb(28, 214, 228) solid;
    border-radius: 20px;
    min-width: 250px;
    max-width: 28%;

    padding: 10px;
    margin: 10px;
    background: white;
    color: black;
    font-size: 18px;

    
    background: linear-gradient(135deg, rgba(25, 154, 240, 1.2), rgba(145, 141, 141, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37); 
    
    

    @media screen and (max-width: 800px) {
   
      padding: 5px;
      margin: 5px;

      min-width: 80%;
      max-width: 90%;
    
      border-radius: 10px;


    }
    
  }

  .login-div {


    border: 1px rgb(28, 214, 228) solid;
    border-radius: 20px;
    min-width: 400px;
    max-width: 50%;

    padding: 20px;
    margin: 20px;
    background: white;
    color: black;
    font-size: 18px;

    
    background: linear-gradient(135deg, rgba(25, 154, 240, 1.2), rgba(145, 141, 141, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37); 
    
    

    @media screen and (max-width: 800px) {
   
      padding: 5px;
      margin: 5px;

      min-width: 80%;
      max-width: 90%;
    
      border-radius: 10px;


    }
    
  }


  
  .login-div2 {

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

    border: 1px rgb(28, 214, 228) solid;
    border-radius: 20px;
    min-width: 200px;
    max-width: 100%;

    padding: 5px;
    margin: 5px;
    background: white;
    color: black;
    font-size: 18px;

    
    background: linear-gradient(135deg, rgba(25, 154, 240, 1.2), rgba(145, 141, 141, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37);
    
    

    @media screen and (max-width: 800px) {
      display: flex;
      align-items: left;
      justify-content: top;
      flex-wrap: wrap;
      align-items: center;
      padding: 10px;
      margin: 10px;
      background: linear-gradient(to top, rgb(24, 120, 245), rgb(49, 132, 214));
      min-width: 350px;
      max-width: 450px;
    
      border-radius: 10px;


    }



  }



  .adminsmallbox {
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    margin: 5px;
    padding: 10px;


    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   
    
    
    background: linear-gradient(135deg, rgba(25, 154, 240, 1.2), rgba(145, 141, 141, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37);
    

  }

  .adminrow {
    display: flex;
    align-items: left;
    justify-content: top;
    flex-wrap: wrap;

  }

  .adminrowtitle {
   background: linear-gradient(to top, rgb(175, 204, 13), rgb(228, 229, 230));
    border: 1px solid linear-gradient(to top, rgb(24, 245, 208), rgb(24, 175, 180));;
    border-radius: 5px;
    margin: 2px;
    padding: 2px;
    color: black;
   min-width: 50px;
   max-width: 200px;
    min-height: 20px;
    max-height: 40px;

     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   
    
    
    background: linear-gradient(135deg, rgba(146, 219, 29, 0.8), rgba(250, 197, 24, 0.8));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 5px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37);



    
    @media screen and (max-width: 800px) {
     
      padding: 0px;
      margin: 0px;

      min-width: 20px;
      max-width: 100%;
     
      border-radius: 0px;


    }
    
  }


  
  .adminrowtitles {
   background: linear-gradient(to top, rgb(175, 204, 13), rgb(228, 229, 230));
    border: 1px solid linear-gradient(to top, rgb(24, 245, 208), rgb(24, 175, 180));;
    border-radius: 5px;
    margin: 2px;
    padding: 2px;
    color: black;
   min-width: 20px;
   max-width: 100px;
    min-height: 20px;
  

     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   
    
    
    background: linear-gradient(135deg, rgba(146, 219, 29, 0.8), rgba(250, 197, 24, 0.8));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 5px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37);
  }


  .adminrowtitle-recovery {
    display: flex;
    align-items: left;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(24, 175, 180));
   border-radius: 10px;
    margin: 2px;
    padding: 2px;
    color: black;
   min-width: 50px;
   max-width: 200px;
    min-height: 20px;
    max-height: 40px;

     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   
    
    
   
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 5px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37);
  }

  .adminrowtitle-client-db {
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(24, 175, 180));
    border: 1px solid rgb(115, 198, 209);
    border-radius: 5px;
    margin: 2px;
    padding: 2px;
    color: black;
    min-width: 150px;
    max-width: 200px;
    min-height: 10px;
    max-height: 100px;
    font-size: 16px;

    
    @media screen and (max-width: 800px) {
     
      padding: 1px;
      margin: 1px;

      min-width: 90%;
      max-width: 100%;
     
      border-radius: 10px;


    }
  }


  .adminrowtitle-recovery2 {
    background-color: #c1cad3;
    border: 1px solid white;
    border-radius: 5px;
    margin: 2px;
    padding: 5px;
    color: black;
    min-width: 60px;
    max-width: 70px;
    min-height: 25px;
    max-height: 50px;
  }

  .adminrowtitle2 {
    background: linear-gradient(to top, rgb(27, 200, 212), rgb(24, 175, 180));
    border: 1px solid white;
    border-radius: 10px;
    margin: 2px;
    padding: 5px;
    color: black;
    min-width: 80px;
    max-width: 140px;
    min-height: 25px;
    max-height: 50px;
  }

  .adminoutput {
    background: linear-gradient(to top, rgb(156, 156, 153), rgb(24, 175, 180));
    border: 1px solid grey;
    border-radius: 5px;
    margin: 2px;
    padding: 2px;
    color: black;
    min-width: 50px;
    max-width: 200px;
    min-height: 20px;
    max-height: 40px;

    
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   
    
    
    background: linear-gradient(135deg, rgba(25, 154, 240, 1.2), rgba(145, 141, 141, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 5px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37);


    
    @media screen and (max-width: 800px) {
     
      padding: 0px;
      margin: 0px;

      min-width: 20px;
      max-width: 100%;
     
      border-radius: 0px;


    }

  }


  
  .adminoutputs {
  background: linear-gradient(to top, rgb(24, 245, 208), rgb(24, 175, 180));
    border: 0px solid grey;
    border-radius: 5px;
    margin: 0px;
    padding: 0px;
    color: black;
    min-width: 20px;
    max-width: 170px;
    min-height: 15px;
   

    
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   
    
    
  }

  .adminoutput-recovery {
    background-color: #f5f5f5;
   background: linear-gradient(to top, rgb(245, 245, 243), rgb(119, 226, 230));
    border: 1px solid grey;
    border-radius: 5px;
    margin: 2px;
    padding: 2px;
    color: black;
    min-width: 50px;
    max-width: 200px;
    min-height: 20px;
    max-height: 40px;

    
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   
    
    
    
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 5px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37);
  }

  .adminoutput-client-db {
    background-color: #f5f5f5;
    border: 1px solid rgb(74, 216, 216);
    border-radius: 10px;
    margin: 2px;
    padding: 2px;
    color: black;
    min-width: 100px;
    max-width: 200px;
    min-height: 20px;
    max-height: 40px;

     @media screen and (max-width: 800px) {
     
      padding: 1px;
      margin: 1px;

      min-width:60%;
      max-width: 100%;
     
      border-radius: 10px;


    }
  }

  .adminoutput-client-db1 {
    background-color: #f7f32e;
    border: 0px solid rgb(127, 126, 129);
    border-radius: 10px;
    margin: 10px;
    padding: 10px;
    color: black;
    min-width: 180px;
    max-width: 100%;
    min-height: 25px;
    max-height: 50px;
  }

  .adminoutput-client-db-small {
    background-color: #f5f5f5;
    border: 1px solid rgb(127, 126, 129);
    border-radius: 5px;
    margin: 2px;
    padding: 2px;
    color: black;
    min-width: 45px;
    max-width: 55px;
    min-height: 20px;
    max-height: 50px;
  }

  .adminoutput-client-db-md {
    background-color: #f5f5f5;
    border: 1px solid rgb(127, 126, 129);
    border-radius: 5px;
    margin: 2px;
    padding: 2px;
    color: black;
    min-width: 80px;
    max-width: 100px;
    min-height: 20px;
    max-height: 50px;
  }


  .adminmember-box {

    align-items: center;
    padding: 10px;
    margin: 10px;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    min-width: 40%;
    max-width: 100%;
    border-radius: 10px;

    
    background: linear-gradient(135deg, rgba(25, 154, 240, 0.8), rgba(145, 141, 141, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37); 

    
    @media screen and (max-width: 800px) {
     
      padding: 1px;
      margin: 1px;

      min-width: 90%;
      max-width: 100%;
     
      border-radius: 10px;


    }
  }
  
  


  .admin-box {

    align-items: center;
    padding: 10px;
    margin: 10px;
    background: linear-gradient(to top, rgb(24, 120, 245), rgb(49, 132, 214));
    min-width: 350px;
    max-width: 450px;
    height: 600px;
    border-radius: 10px;



    @media screen and (max-width: 800px) {
      display: flex;
      align-items: left;
      justify-content: top;
      flex-wrap: wrap;
      align-items: center;
      padding: 10px;
      margin: 10px;
      background: linear-gradient(to top, rgb(24, 120, 245), rgb(49, 132, 214));
      min-width: 350px;
      max-width: 450px;
      height: 600px;
      border-radius: 10px;


    }
  }

  


  .admin-box-keys {

    
    padding: 10px;
    margin: 10px;
   
    min-width:800px;
    max-width: 700px;
   
    height: 1600px;
    border-radius: 10px;



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

        margin: 0px;
        padding: 0px;

        margin-top: 10px;
        margin-bottom: 10px;

        height: 1500px;

        min-width: 95%;
        max-width: 100%;

        border-radius: 10px;


    }
  }


  
  .admin-box-d {

    align-items: center;
    padding: 10px;
    margin: 10px;
    background: linear-gradient(to top, rgb(61, 229, 235), rgb(49, 132, 214));
    min-width: 350px;
    max-width: 450px;
  
    border-radius: 10px;



    @media screen and (max-width: 800px) {
      display: flex;
      align-items: left;
      justify-content: top;
      flex-wrap: wrap;
      align-items: center;
      padding: 10px;
      margin: 10px;
      background: linear-gradient(to top, rgb(85, 197, 231), rgb(49, 132, 214));
      min-width: 350px;
      max-width: 450px;
     
      border-radius: 10px;


    }
  }

  .admin-box2 {

    align-items: center;
    padding: 5px;
    margin: 5px;
    background: linear-gradient(to top, rgb(24, 120, 245), rgb(49, 132, 214));
    min-width: 350px;
    max-width: 420px;

    min-height: 500px;
    max-height: 500px;
    border-radius: 10px;



    @media screen and (max-width: 800px) {
      display: flex;
      align-items: left;
      justify-content: top;
      flex-wrap: wrap;
      align-items: center;
      padding: 10px;
      margin: 10px;
      background: linear-gradient(to top, rgb(24, 120, 245), rgb(49, 132, 214));
      min-width: 350px;
      max-width: 450px;
      height: 600px;
      border-radius: 10px;


    }
  }

  .adminoutput-recovery2 {
    background-color: #f5f5f5;
    border: 1px solid rgb(127, 126, 129);
    border-radius: 5px;
    margin: 2px;
    padding: 5px;
    color: black;
    min-width: 140px;
    max-width: 170px;
    min-height: 30px;
    max-height: 60px;
  }

  .adminscalarstable {
   
    background-color: rgb(24, 245, 208);
    margin: 5px;
    padding: 5px;
    border: 1px rgb(211, 220, 230) solid;
    border-radius: 10px;
    min-width: 90%;
    max-width: 100%;

    
    font-size: 16px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

    
  
    background: linear-gradient(135deg, rgba(182, 180, 180, 0.3), rgba(145, 141, 141, 0.3));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(1px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37);   
    
  }

  @media screen and (max-width: 800px) {
    .adminscalarstable {

      margin: 2px;
      padding: 2px;
    
      border-radius: 10px;
    
  
      min-width: 95%;
      max-width: 100%;

    }
  }

  #fee {
    background-color: #f5f5f5;
    border: 1px solid rgb(74, 216, 216);
    border-radius: 10px;
    margin: 2px;
    padding: 2px;
    color: black;
    min-width: 100px;
    max-width: 100px;
    min-height: 20px;
    max-height: 40px;
  }

  .admin-tips-table {

    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background-color: rgb(79, 116, 216);
    margin: 1px;
    padding: 2px;
    border: 1px rgb(25, 243, 80) solid;
    border-radius: 10px;

  }

  .admin-tips-tr {
    background-color: white;
    margin: 2px;
    padding: 3px;
    min-height: 50px;
    

  }

















  
  .account-top-container {
    background: linear-gradient(to bottom, rgb(15, 124, 43), rgb(245, 246, 247));
    padding: 10px;
    align-self: center;
  }

  .timediv {
    border: 2px white solid;
    border-radius: 5px;
    padding: 10px;
  }

  .perfdiv-archives {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    border-radius: 10px;
    min-width: 70%;
    max-width: 90%;
    padding: 20px;
    margin: 20px;
    border: 1px solid navy;
    color: white;
  }




  .account-status {
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(24, 133, 243));
    border-radius: 10px;
    padding: 10px;
    margin: 10px;

  }

  .perfdiv {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(165, 212, 208));
    border-radius: 10px;
    min-width: 400px;
    max-width: 100%;
    padding: 15px;
    margin: 20px;
    border: 1px solid navy;
    color: black;

    background: linear-gradient(135deg, rgba(25, 154, 240, 0.3), rgba(145, 141, 141, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37);   
  }


   @media screen and (max-width: 800px) {
    .perfdiv {

      margin: 2px;
      padding: 2px;
    
      border-radius: 10px;
    
  
      min-width: 95%;
      max-width: 100%;

    }
  }



  
  .perfdiv2 {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(165, 212, 208));
    border-radius: 20px;
    min-width: 400px;
    max-width: 100%;
    padding: 0px;
    margin: 5px;
    border: 1px solid navy;
    color: black;

    background: linear-gradient(135deg, rgba(25, 154, 240, 0.3), rgba(145, 141, 141, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37); 



     .perfdiv2:active {
    
    background-color: #134779;
  }

  .perfdiv2:visited {
    background-color: grey;
  }

  .perfdiv2:hover {

    
    background:  #134779;
  
  }



  }


   @media screen and (max-width: 800px) {
    .perfdiv2 {

      margin: 2px;
      padding: 2px;
    
      border-radius: 20px;
    
  
      min-width: 95%;
      max-width: 100%;


      

    }
  }
 .perfdiv2:active {
    
    background-color: #134779;
  }

  .perfdiv2:visited {
    background-color: grey;
  }

  .perfdiv2:hover {

    
    background: linear-gradient(to bottom, #12a2db, aqua);
   
  }


  .perfrow {

   
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(241, 243, 245));
    border-radius: 10px;
    min-width: 350px;
    max-width: 100%;

    min-height: 30px;
    max-height: 30px;

    padding: 15px;
    margin: 15px;
    border: 1px solid navy;
    color: black;

    
  
    background: linear-gradient(135deg, rgba(25, 154, 240, 0.3), rgba(145, 141, 141, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37);   
  }

  .alltickets {
    background-color: white;
    padding: 5px;
    align-self: center;
    border-radius: 10px;
    width: 80%;
  }

  .ticket-and-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(35, 218, 208));
    padding: 5px;
    align-self: center;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 50px;
    border-radius: 10px;
    min-width: 90%;
    max-width: 90%;

    
    
  
    background: linear-gradient(135deg, rgba(25, 154, 240, 0.9), rgba(145, 141, 141, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37); 
    
   
  }
  @media screen and (max-width: 800px) {
    .ticket-and-summary {

      margin: 5px;
      padding: 5px;
    
      border-radius: 20px;
      min-height: 300px;
      max-height: 100%;
      min-width: 95%;
      max-width: 95%;
      margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 50px;
    }
  }

  .ticket-and-summary2 {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(236, 238, 240));
    padding: 2px;
    align-self: center;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 50px;
    border-radius: 10px;
    min-width: 80px;
    max-width: 100%;
  }


  .ticketdiv {
    background: linear-gradient(to bottom, rgb(240, 241, 240), rgb(245, 246, 247));
    border-radius: 10px;
    min-width: 400px;
    max-width: 500px;
    padding: 10px;
    margin: 10px;
    border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    color: black;

    
    background: linear-gradient(135deg, rgba(25, 154, 240, 0.9), rgba(145, 141, 141, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37); 
  }

  @media screen and (max-width: 800px) {
    .ticketdiv {

      margin: 5px;
      padding: 5px;
   
      border-radius: 20px;
      min-height: 100%;
      max-height: 100%;
      min-width: 95%;
      max-width: 95%;
    }
  }

  .tickettable {
    background: linear-gradient(to bottom, rgb(21, 194, 238), rgb(245, 246, 247));
    border-radius: 10px;
    min-width: 300px;
    max-width: 100%;
    padding: 10px;
    margin: 10px;
    border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    color: black;

   
  }

  @media screen and (max-width: 800px) {
    .tickettable {
      margin-top: 10px;
       margin-bottom: 10px;
      padding-top: 15px;
      padding-bottom: 15px;

      margin-left: 1px;
       margin-right: 1px;
      padding-left: 1px;
      padding-right: 1px;

   
      border-radius: 10px;
      min-height: 100%;
      max-height: 100%;

      min-width: 310px;
      max-width: 100%;
      font-size: 16px;
    }
  }


  .tickettable2 {
    background: linear-gradient(to bottom, rgb(21, 194, 238), rgb(245, 246, 247));
    border-radius: 20px;
    min-width: 400px;
    max-width: 400px;
    padding: 10px;
    margin: 10px;
    border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    color: black;

   
  }

  @media screen and (max-width: 800px) {
    .tickettable2 {
      margin-top: 10px;
       margin-bottom: 10px;
      padding-top: 15px;
      padding-bottom: 15px;

      margin-left: 5px;
       margin-right: 5px;
      padding-left: 5px;
      padding-right: 5px;

   
      border-radius: 20px;
      min-height: 100%;
      max-height: 100%;

      min-width: 90%;
      max-width: 100%;
      font-size: 16px;
    }
  }



  
  .tickettable3 {
    background: linear-gradient(to bottom, rgb(21, 194, 238), rgb(245, 246, 247));
    border-radius: 20px;
    min-width: 400px;
    max-width: 400px;
    padding: 10px;
    margin: 10px;
    border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    color: black;

   
  }

  @media screen and (max-width: 800px) {
    .tickettable3 {
      margin-top: 10px;
       margin-bottom: 10px;
      padding-top: 15px;
      padding-bottom: 15px;

      margin-left: 1px;
       margin-right: 5px;
      padding-left: 5px;
      padding-right: 1px;

   
      border-radius: 20px;
      min-height: 100%;
      max-height: 100%;

      min-width: 60%;
      max-width: 70%;
      font-size: 16px;
    }
  }
  

  
  .tickettable4 {

  
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to bottom, rgb(21, 194, 238), rgb(245, 246, 247));
    border-radius: 20px;
    min-width: 70%;
    max-width: 70%;
    padding: 5px;
    margin: 10px;
    border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    color: black;

   
  }

  @media screen and (max-width: 800px) {
    .tickettable4 {
     

      padding: 5px;
      margin: 5px;

   
      border-radius: 20px;
      min-height: 100%;
      max-height: 100%;

      min-width: 95%;
      max-width: 100%;
      font-size: 16px;
    }
  }
  


  .tickethead {
    align-items: center;
    border: 1px rgb(28, 214, 228) solid;
    background-color: rgb(49, 132, 214);
    min-height: 10px;
  }

  @media screen and (max-width: 800px) {
    .tickethead {

       margin: 0px;
      padding: 0px;
   
      border-radius: 10px;
      min-height: 100%;
      max-height: 100%;
      min-width: 98%;
      max-width: 100%;
      font-size: 14px;
    }
  }
  .ticketrow {
    align-items: center;
    border: 1px rgb(28, 214, 228) solid;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(65, 133, 202));

  }

    @media screen and (max-width: 800px) {
    .ticketrow {

       margin: 0px;
      padding: 0px;
   
      border-radius: 10px;
      min-height: 100%;
      max-height: 100%;
      min-width: 98%;
      max-width: 100%;
      font-size: 14px;
    }
  }

  .tickettitle {
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    width: 200px;
    border: 1px rgb(28, 214, 228) solid;
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    align-items: center;
  }



  
  

  
  .betdiv {
    background-color: rgb(49, 132, 214);
    padding: 0px;
    align-self: center;
    margin: 0px;
    border-radius: 10px;
    min-width: 300px;
    max-width: 100%;
    color: #fafdfd;
    font-size: 12px;

    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    
    background: rgb(1, 81, 134);
    
  
    border-radius: 10px;
    border: 2px solid white;
  }


    @media screen and (max-width: 800px) {
    .betdiv {

      margin: 0px;
      padding: 0px;
   
      border-radius: 10px;
      min-height: 100%;
      max-height: 100%;
      min-width: 98%;
      max-width: 100%;
    }
  }

  .summarydiv {
    background-color: rgb(49, 132, 214);
    padding: 10px;
    align-self: center;
    margin: 10px;
    border-radius: 10px;
    min-width: 300px;
    max-width: 400px;
    color: #f1fcfc;
     font-size: 15px;

    
    background: black;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37); 
    
    
@media screen and (max-width: 800px) {
   
   padding: 0px;
    align-self: center;
    margin: 0px;

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

      min-width: 98%;
      max-width: 98%;
    
 


    }
    
    
  }

  .summary {
    background: linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    border-radius: 10px;
    min-width: 300px;
    max-width: 100%;
    padding: 10px;
    margin: 10px;
    border: 1px solid navy;
    color: black;
  }

    @media screen and (max-width: 800px) {
    .summary {

      margin: 0px;
      padding: 0px;
   
      border-radius: 10px;
      min-height: 100%;
      max-height: 100%;
      min-width: 98%;
      max-width: 100%;
    }
  }

  .summaryhead {
    align-items: center;
    border: 1px rgb(28, 214, 228) solid;
    background-color: rgb(49, 132, 214);
    min-height: 30px;

    
@media screen and (max-width: 800px) {
   
      padding: 0px;
      margin: 0px;

      min-width: 100%;
      max-width: 100%;
    
}


  }

  .summaryrow {
    align-items: center;
    border: 1px rgb(28, 214, 228) solid;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(244, 245, 247));
    min-height: 30px;

     
@media screen and (max-width: 800px) {
   
      padding: 0px;
      margin: 0px;

      min-width: 100%;
      max-width: 100%;
    
}

  }

  .summarytitle {
    background-color: white solid;
    border: 1px rgb(28, 214, 228) solid;
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    align-items: center;

     
@media screen and (max-width: 800px) {
   
      padding: 0px;
      margin: 0px;

      min-width: 100%;
      max-width: 100%;
    
}

  }






  .account-table {
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    border-radius: 10px;
    align-self: center;
    padding: 20px;
    margin: 10px;
    font-size: 18px;

    background: linear-gradient(135deg, rgba(25, 154, 240, 0.3), rgba(145, 141, 141, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0.2, 0, 0, 0.37);
  }

  .performance-table {
    background: linear-gradient(to top, white, rgb(245, 246, 247));
    border-radius: 10px;
    align-self: center;
    padding: 20px;
    margin: 20px;
    border: 1px solid rgb(49, 132, 214);
    min-width: 96%;
    max-width: 100%;
    
    background: linear-gradient(135deg, rgba(25, 154, 240, 0.8), rgba(145, 141, 141, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37);   
    
    
  }

  
  
  .topay-div {
    background: linear-gradient(to bottom, rgb(240, 241, 240), rgb(245, 246, 247));
    border-radius: 10px;
    min-width: 350px;
    max-width: 400px;
    padding: 10px;
    margin: 10px;
    border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    color: black;

    
    background: linear-gradient(135deg, rgba(43, 235, 241, 0.9), rgba(145, 141, 141, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37); 


@media screen and (max-width: 800px) {
   
      padding: 5px;
      margin: 5px;

      min-width: 80%;
      max-width: 90%;
    
      border-radius: 10px;


    }

  }

  .topay-div2 {
    min-width: 300px;
    max-width: 300px;
    background-color: yellow;
  }

  
  
  .group-accountdiv {
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(239, 240, 241));
    margin: 10px;
    padding: 10px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }

  .group-div {

    align-items: center;
    padding: 5px;
    margin: 5px;
    background: linear-gradient(to top, rgb(243, 245, 245), rgb(104, 207, 211));

    min-height: 200px;
    max-height: 200px;

    min-width: 150px;
    max-width: 150px;
    border-radius: 10px;
  }
  
  
  @media screen and (max-width: 800px) {
    .group-div {

      margin: 5px;
      padding: 5px;
      border: 1px rgb(223, 225, 228) solid;
      border-radius: 20px;
      min-height: 100%;
      max-height: 100%;
      min-width: 95%;
      max-width: 95%;
    }
  }
  
  .instruction-div{
font-size: 20px;
margin: 5px;
      padding: 5px;
  }   
  .paragraph1{
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    
        margin: 0px;
        padding: 0px;
       
       
      }
      .paragraph2{
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        background-color: white;
        padding: 0px;
       
       
      }
      .title-slogan{
      
      
        align-items: center;
        justify-content: top;
        flex-wrap: wrap;
        margin: 0px;
        padding: 0px;

        border-radius: 10px;
        min-width: 400px;
        max-width: 90%;
      }
      .groupinfo-table{
        
        
          background-color: rgb(24, 245, 208);
          margin: 2px;
          padding: 3px;
          border: 1px rgb(211, 220, 230) solid;
          border-radius: 10px;
          min-width: 400px;
          max-width: 90%;
        }
  
    .groupinfo-title{
      background: dodgerblue;

      min-width: 130px;
      max-width: 130px;

      min-height: 50px;
      max-height: 50px;

      margin: 5px;
      padding: 5px;
      color: white;
      background-color: #1449aa;
      border: 2px aqua solid;
      border-radius: 5px;


      

   
    }
    .groupinfo-div{
      min-width: 130px;
      max-width: 130px;
      
      min-height: 50px;
      max-height: 50px;

      margin: 5px;
      padding: 5px;
      color: #1449aa;
      background-color: white;
      border: 2px aqua solid;
      border-radius: 5px;

         @media screen and (max-width: 800px) {
   
          display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
      padding: 5px;
      margin: 5px;

      min-width: 90px;
      max-width: 120px;
    
      border-radius: 10px;


    }
    }
 

  .game-bios {
    background-color: navy;
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(72, 115, 209), rgb(173, 241, 13));
    margin: 1px;
    padding: 1px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 5px;
    color: white;
    min-width: 80px;
    max-width: 80px;

    min-height: 30px;
    max-height: 60px;
    font-size: 15px;
  }
  .game-bios2 {
    background-color: rgb(24, 202, 178);
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(4, 156, 226), rgb(10, 255, 255));
    margin: 1px;
    padding: 1px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 5px;
    color: white;
    min-width: 280px;
    max-width: 280px;

    min-height: 30px;
    max-height: 60px;
    font-size: 15px;
  }
  .t-td-div_h {
    background-color: navy;
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(72, 115, 209), rgb(48, 49, 49));
    margin: 1px;
    padding: 1px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 5px;
    color: white;
    min-width: 70px;
    max-width: 70px;

    min-height: 20px;
    max-height: 80px;
    font-size: 15px;
  }

  .t-td-div {
    background-color: navy;
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(246, 247, 246), rgb(233, 234, 235));
    margin: 1px;
    padding: 1px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 5px;

    min-width: 75px;
    max-width: 75px;

    min-height: 20px;
    max-height: 60px;
    font-size: 15px;
  }

  .t-td-div2 {
    background-color: navy;
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(236, 240, 9), rgb(233, 234, 235));
    margin: 10px;
    padding: 10px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 20px;

    min-width: 80px;
    max-width: 200px;

    min-height: 20px;
    max-height: 40px;
    font-size: 15px;
  }

  .t-td-div_d {
    background-color: navy;
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(246, 247, 246), rgb(49, 132, 214));
    margin: 1px;
    padding: 1px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 5px;

    min-width: 80px;
    max-width: 80px;

    min-height: 20px;
    max-height: 50px;
    font-size: 15px;
  }

  .t-td-div_t {
    background-color: navy;
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(246, 247, 246), rgb(49, 132, 214));
    margin: 1px;
    padding: 1px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 5px;

    min-width: 80px;
    max-width: 150px;

    min-height: 20px;
    max-height: 50px;
    font-size: 15px;
  }

  .t-td-div_r {
    background-color: navy;
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(246, 247, 246), rgb(49, 132, 214));
    margin: 1px;
    padding: 1px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 5px;

    min-width: 40px;
    max-width: 40px;

    min-height: 20px;
    max-height: 50px;
    font-size: 15px;
  }


  #chat-a {
    height: 100px;
  }
  
  #chat {
    min-width: 500px;
      max-width: 100%;

      min-height: 100px;
      max-height: 100%;

      font-size: 16px;
  }

  
  @media screen and (max-width: 800px) {
    #chat {
      
      
     
      min-width: 90%;
      max-width: 95%;

      min-height: 100px;
      max-height: 100%;
      font-size: 16px;
    }

  }

  .drop-down-div {

    background: linear-gradient(to top, rgb(246, 247, 246), rgb(49, 132, 214));
    margin: 5px;
    padding: 20px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 40px;

    min-width: 100px;
    max-width: 100px;
  }

  .chat-container-div {

    background: linear-gradient(to top, rgb(246, 247, 246), rgb(202, 28, 100));
    margin: 5px;
    padding: 10px;
   
    border-radius: 50px;
    min-height: 700px;
    max-height: 100%;
    
    min-width: 500px;
    max-width: 600px;
   
    font-size: 16px;



    background: linear-gradient(135deg, rgba(25, 154, 240, 0.3), rgba(145, 141, 141, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37); 
  }

  @media screen and (max-width: 800px) {
    .chat-container-div {

  
      margin: 2px;
      padding: 2px;
    
      min-height: 100%;
      max-height: 100%;
      min-width: 95%;
      max-width: 100%;
    }
  }

  .display-blocks {
    background-color: navy;
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    margin: 5px;
    border-radius: 10px;
    background-repeat: no-repeat;
    padding: 5%;
    min-width: 600px;
    max-width: 600px;

    border-color: #a7a4a4;

  }

  .chat-timestamp {


    margin-left: 100px;
    padding: 0px;
    border: 0px rgb(212, 209, 28) solid;
    border-radius: 0px;
    min-width: 60%;
    max-width: 100%;

    min-height: 10px;
    max-height: 100%;
    font-size: 12px;
  }



  .chat-div {
  
     background: rgb(0, 0, 0);
    margin: 3px;
    padding: 3px;
   
    border-radius: 20px;
    min-width: 80%;
    max-width: 100%;

    min-height: 300px;
    max-height: 100%;
    font-size: 16px;
  }

  @media screen and (max-width: 800px) {
    .chat-div {
      
      
     
      min-width: 95%;
      max-width: 100%;

      min-height: 100px;
      max-height: 100%;
      font-size: 16px;
    }

  }

  
  .chat-div4 {
  
     background: rgb(0, 0, 0);
    margin: 3px;
    padding: 3px;
   
    border-radius: 20px;
    min-width: 300px;
    max-width: 100%;

   min-height: 95%;
      max-height: 100%;

    font-size: 16px;


    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    
        background: linear-gradient(to bottom, #12a2db, aqua);
        backdrop-filter: blur(10px);
    
  }

  @media screen and (max-width: 800px) {
    .chat-div4 {
      
      
     
      min-width: 95%;
      max-width: 100%;

   
      font-size: 16px;
    }

  }

  

  .chat-div3 {
  
     background: rgb(0, 0, 0);
    margin: 5px;
    padding: 5px;
   
    border-radius: 20px;
    min-width: 80%;
    max-width: 100%;

    min-height: 300px;
    max-height: 100%;
    font-size: 16px;
  }

  @media screen and (max-width: 800px) {
    .chat-div3 {
      
      
     
      min-width: 95%;
      max-width: 100%;

      min-height: 300px;
      max-height: 100%;
      font-size: 16px;
    }

  }



  .mydiv {
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(12, 230, 230, 0.9), rgba(244, 246, 247, 0.9));
    margin: 5px;
    padding: 3px;
    border: 1px rgb(136, 136, 132) solid;
    border-radius: 10px;
    font-size: 16px;
    min-width: 95%;
    max-width: 100%;
    min-height: 10px;
    max-height: 100%;
  }

  .me {
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background-color: rgb(240, 224, 6);
    margin: 1px;
    padding: 3px;
    border: 1px rgb(136, 136, 132) solid;

    font-size: 16px;
    min-width: 9%;
    max-width: 10%;

    
    background: linear-gradient(135deg, rgba(236, 235, 238, 0.4), rgba(244, 248, 5, 0.5));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(9, 231, 220, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37); 
  }

  .my-message-div {
    align-items: left;
    
    margin: 0px;
    padding: 5px;

    
    border-radius: 20px;

    font-size: 16px;
    white-space: pre-wrap;

    min-height: 20px;
    max-height: 100%;

      min-width:55%;
      max-width: 85%;

    color: black;

    
    background: white;
    

    
  @media screen and (max-width: 800px) {
    
       min-width:60%;
      max-width: 82%;
    
  }




}









  


  /***************************/
  .others-div {
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background-color: rgb(247, 250, 250);
    margin: 0px;
    padding: 2px;
    border: 1px rgb(136, 136, 132) solid;
    border-radius: 10px;
    font-size: 16px;
  
    min-height: 20px;
    max-height: 95%;

    min-width: 250px;
    max-width: 100%;
    
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

    background: linear-gradient(135deg, rgba(26, 182, 221, 0.3), rgba(15, 103, 218, 0.3));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(1px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37); 
  }

  

  .other {
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    
    margin: 2px;
    padding: 2px;
    border: 1px linear-gradient(135deg, rgba(236, 233, 6, 0.3), rgba(11, 111, 241, 0.3)) solid;
    border-radius: 20px;
    font-size: 16px;
    min-width: 15%;
    max-width: 40%;

    font-size: 16px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

    background: linear-gradient(135deg, rgba(26, 182, 221, 0.8), rgba(234, 235, 236, 0.3));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(1px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37);  
  }
  

  .other-message-div {
    align-items: right;
   
    margin: 1px;
    padding: 3px;
    border: 1px rgb(241, 241, 239) solid;
    border-radius: 10px;
    font-size: 16px;
    width: 60%;
    min-height: 20px;
    max-height: 100%;
    min-width: 70%;
    max-width: 85%;
    color:aqua;

      background: linear-gradient(135deg, rgba(23, 199, 199, 0.3), rgba(13, 110, 236, 0.3));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(1px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37); 
  }

  /*****************************************/














  .article-edit-div {
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background-color: rgb(245, 247, 245);
    margin: 10px;
    padding: 10px;
    border: 1px rgb(228, 235, 234) solid;
    border-radius: 10px;
    min-width: 50%;
    max-width: 50%;
    font-size: 18px;

    
    background: linear-gradient(135deg, rgba(182, 180, 180, 0.1), rgba(145, 141, 141, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.37); 
  }

  @media screen and (max-width: 800px) {
    .article-edit-div {
      min-width:85%;
      max-width: 95%;
      

    }

  }


  .article-title-div {
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background-color: rgb(13, 207, 233);
    margin: 5px;
    padding: 5px;
    border: 1px rgb(177, 179, 178) solid;
    border-radius: 5px;
    min-width: 80%;
    max-width: 95%;
    font-size: 18px;
    min-height: 20px;
    max-height: 100%;
   

    font-size: 16px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

    
  
    background: linear-gradient(135deg, rgba(26, 182, 221, 0.3), rgba(15, 103, 218, 0.3));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(1px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37);   
    

  }

  

  .article-title-di {

    background-color: rgb(234, 238, 237);
    margin: 5px;
    padding: 5px;
    border: 1px rgb(212, 209, 28) solid;
    border-radius: 5px;
    min-width: 90%;
    max-width: 100%;
    font-size: 18px;
    height: 200px;
    font-size: 18px;

  }



  .process-div-box {
   
    background-color: rgb(13, 207, 233);
    margin: 15px;
    padding: 15px;
    border: 1px rgb(177, 179, 178) solid;
    border-radius: 5px;

    min-width: 250px;
    max-width: 95%;
    font-size: 18px;
    min-height: 20px;
    max-height: 100%;


    font-size: 16px;


    
  
    background: linear-gradient(135deg, rgba(5, 226, 241, 0.3), rgba(145, 141, 141, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(10, 56, 206, 0.37);   
    
    
    
@media screen and (max-width: 800px) {
   
      padding: 2px;
      margin: 0px;

      min-width: 100%;
      max-width: 100%;
    
      border-radius: 10px;


    }

  }

  
  .process-div {
   
    background-color: rgb(37, 109, 241);
    margin: 5px;
    padding: 10px;
    border: 1px rgb(44, 224, 236) solid;
    border-radius: 5px;
    min-width: 80%;
    max-width: 100%;
    font-size: 16px;
    min-height: 20px;
    max-height: 100%;


    font-size: 16px;


 
  
    background: linear-gradient(135deg, rgba(25, 154, 240, 0.3), rgba(145, 141, 141, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37);   
    
    
    
@media screen and (max-width: 800px) {
   
      padding: 2px;
      margin: 5px;

      min-width: 80%;
      max-width: 100%;
    
      border-radius: 10px;


    }

  }


  
  .process-div2 {
   
    background-color: rgb(37, 109, 241);
    margin: 5px;
    padding: 10px;
    border: 1px rgb(44, 224, 236) solid;
    border-radius: 5px;
    min-width: 750px;
    max-width: 750px;
    font-size: 16px;
    min-height: 20px;
    max-height: 100%;



 
  
    background: linear-gradient(135deg, rgba(25, 154, 240, 0.3), rgba(145, 141, 141, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37);   
    
    
    
@media screen and (max-width: 800px) {
   
      padding: 2px;
      margin: 2px;

      min-width: 80%;
      max-width: 100%;
    
      border-radius: 10px;


    }

  }


  
  .process-div-tickets {
   
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    min-width: 200px;
    max-width: 100%;
    /*glass effect*/
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);


    @media screen and (max-width: 800px) {
      padding: 2px;
      margin-left: 5px;
      margin-right: 5px;


    }

  }
  .action-button {
    width: 124px;
    padding: 5px;
    margin: 6px;
    background-color: #1fe218;
  }


  .label-div {
    min-width: 150px;
    max-width: 400px;
    padding: 10px;
    margin: 10px;
    background-color: #2f83e2;
    color: white;
  }




  #submit-a {
      
    background: dodgerblue;
    min-width: 70px;
    max-width: 70px;

    min-height: 25px;
    max-height: 35px;


    margin: 1px;
    padding: 1px;
    color: rgb(65, 33, 179);
  background: linear-gradient(135deg, rgba(5, 226, 241, 0.9), rgba(243, 245, 247, 0.8));
    border: 1px rgb(73, 75, 75) solid;
    border-radius: 15px;


     backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0.2, 0, 0, 0.37);
    
   
  }

  
   #submit-a:active {
    background-color: #134779;
  }

  #submit-a:visited {
    background-color: grey;
  }

  #submit-a:hover {
    background-color: rgb(246, 250, 12);
    color: black;
  }


  #submit-b {
 background: linear-gradient(135deg, rgba(212, 226, 7, 0.9), rgba(38, 230, 198, 0.8));
    color: rgb(8, 8, 8);
    border: 2px solid rgba(7, 112, 231, 0.8);
    font-size: 16px;
    font-weight: bold;
    margin: 2px;
    padding: 2px;
    min-width: 80px;
    max-width: 250px;
    min-height: 15px;
    max-height: 30px;
    border-radius: 15px;

      @media screen and (max-width: 800px) {
        min-width: 50px;
        max-width: 250px;

    }
  }

  

   #submit-b:active {
    background-color: #134779;
  }

  #submit-b:visited {
    background-color: grey;
  }

  #submit-b:hover {
     background: linear-gradient(135deg, rgba(236, 194, 4, 0.9), rgba(221, 224, 2, 0.8));
    color: rgb(8, 8, 8);
  }


  
  #submit-bb {
  background-color: rgb(243, 239, 8);
    color: rgb(8, 8, 8);
    border: 1px solid rgb(16, 176, 240);
    font-size: 16px;
    margin: 2px;
    padding: 2px;
    min-width: 100px;
    max-width: 250px;
    min-height: 15px;
    max-height: 30px;
    border-radius: 15px;

    background: linear-gradient(135deg, rgba(5, 226, 241, 0.9), rgba(3, 72, 151, 0.8));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(10, 56, 206, 0.37);   
    

      @media screen and (max-width: 800px) {
        min-width: 70px;
        max-width: 250px;

    }
  }

  

   #submit-bb:active {
    background-color: #134779;
  }

  #submit-bb:visited {
    background-color: grey;
  }

  #submit-bb:hover {
    background-color: black;
    color: white;
  }



  #submit_intro {
    width: 100px;
    padding: 5px;
    margin: 5px;
    background: rgb(218, 241, 3);
  }

  #submit_chat {
    width: 100px;
    padding: 5px;
    margin: 5px;
    background: rgb(218, 241, 3);
  }



  #submit-c {
 background: linear-gradient(135deg, rgba(212, 226, 7, 0.9), rgba(38, 230, 198, 0.8));
    color: rgb(8, 8, 8);
    border: 0px solid rgba(7, 112, 231, 0.8);
    font-size: 16px;
    margin: 0px;
    padding: 0px;
    min-width: 60px;
    max-width: 60px;
    min-height: 15px;
    max-height: 18px;
    border-radius: 10px;

      @media screen and (max-width: 800px) {
       min-width: 60px;
    max-width: 60px;

    }
  }

  

   #submit-c:active {
    background-color: #134779;
  }

  #submit-c:visited {
    background-color: grey;
  }

  #submit-c:hover {
     background: linear-gradient(135deg, rgba(236, 194, 4, 0.9), rgba(221, 224, 2, 0.8));
    color: rgb(8, 8, 8);
  }


  .suggestion-div {
     display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to bottom, rgb(240, 241, 240), rgb(245, 246, 247));
    border-radius: 20px;
    min-width: 90px;
    max-width: 400px;
    padding: 2px;
    margin: 2px;
    border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    color: black;

    
    background: linear-gradient(135deg, rgba(238, 223, 7, 0.9), rgba(14, 204, 211, 0.8));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  
    
  

  }



  
    
 @media screen and (max-width: 800px) {
    .suggestion-div{ 
      padding: 1px;
      margin: 1px;
      
      min-width: 95%;
      max-width: 98%;
    
    
    }


    }


  .title-suggestion {
    background: rgb(241, 241, 241);
    min-width: 80px;
    max-width: 240px;
    margin: 5px;
    padding: 5px;
    color: rgb(15, 15, 15);

    border: 1px rgb(162, 231, 243) solid;
    border-radius: 10px;

    border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    color: black;

    
    background: linear-gradient(135deg, rgba(238, 239, 240, 0.9), rgba(9, 224, 231, 0.8));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 100, 160, 0.18);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37);

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

   display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    
      padding: 3px;
      margin: 3px;
      
      min-width: 60%;
      max-width: 80%;
    
      border-radius: 10px;



    }

  }

  
  .title-suggestion-a {
    background: rgb(241, 241, 241);
    min-width: 500px;
    max-width: 500px;
    margin: 2px;
    padding: 5px;
    color: rgb(15, 15, 15);

    border: 1px rgb(162, 231, 243) solid;
    border-radius: 10px;

    border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    color: black;

    
    background: linear-gradient(135deg, rgba(238, 239, 240, 0.9), rgba(9, 224, 231, 0.8));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 3px solid rgba(250, 227, 18, 0.8);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.37);

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

   display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    
      padding: 5px;
      margin: 6px;
      
      min-width: 60%;
      max-width: 100%;
    
      border-radius: 20px;



    }

  }

  .action-button1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    
    width: 90px;
    padding: 2px;
    margin: 2px;
    background-color: #1fe218;

  }

  #intro {
    width: 90%;
    border: gainsboro 5px solid;
    height: 50px;

  }

  /**************************************************************************************************/
  /**************************************************************************************************/
  /**************************************************************************************************/