.action {
    width: 100%;
    border: 1px solid blue;
    border-radius: 10px;
    margin: 30px;
    padding: 20px;
    background: rgb(49, 132, 214);
  }

  .accountstatusdiv {
    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: 99%;
    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) {
    .accountstatusdiv {

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

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

    }
  }




  .accountstatusdiv-a {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;

    align-self: center;
    border-radius: 10px;
    background: linear-gradient(to bottom, white, rgb(245, 246, 247));
    min-width: 95%;
    max-width: 100%;
    padding: 5px;
    margin: 5px;
    color: black;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }

  .accountstatusdiv-b {
    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;
  
    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(11, 125, 240, 0.9), rgba(9, 224, 231, 0.3));
    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) {
    .accountstatusdiv-b {

      margin: 10px;
      padding: 5px;

      margin-top: 8px;
      margin-bottom: 8px;
    
      border-radius: 10px;
    
  
      min-width: 90%;
      max-width: 100%;

    }
  }



   .accountstatusdiv-c {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
  
    border-radius: 10px;
  
    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(238, 203, 2, 0.9), rgba(231, 216, 9, 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) {
    .accountstatusdiv-c {

      margin: 2px;
      padding: 2px;

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

      border-radius: 10px;

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

    }
  }


  
  .accountstatusdiv-d {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to bottom, rgb(240, 241, 240), rgb(6, 121, 236));
    border-radius: 10px;
    min-width: 600px;
    max-width: 600px;
    padding: 10px;
    margin: 10px;
    border: 1px solid linear-gradient(to bottom, rgb(24, 245, 208), rgb(245, 246, 247));
    color: 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); 
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  
  


  }



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

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

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

    }
  }


  .accountstatusdiv1 {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    padding: 5px;
    align-self: center;
    border-radius: 10px;
    background: linear-gradient(to bottom, rgb(3, 221, 250), rgb(18, 129, 240));
    min-width: 70%;
    max-width: 90%;
    padding: 5px;
    margin: 5px;
    color: black;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }

  /*****************MEMBERS***********************************************************/
  .name-div{
    
    padding: 5px;
    margin: 5px;
    border: 2px aqua solid;
    border-radius: 10px;
    background: white;
    min-width: 150px;
    max-width: 150px;

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

      padding: 2px;
      margin: 2px;

      border-radius: 10px;
      min-width: 300px;
    max-width: 100%;
    border: 2px aqua solid;
    background: white;
    }
  }
  .accountstatusdiv-members1 {
        
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    
    align-self: center;
    border-radius: 10px;

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

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

    padding: 5px;
    margin: 5px;
    color: black;
    background: linear-gradient(to bottom, #1449aa, aqua);
    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.1), rgba(255, 255, 255, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 190, 160, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);   
    */

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

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

      margin-left: 5px;
      margin-right: 5px;
      min-width: 95%;
      max-width: 95%;

    }
  }

  .accountstatusdiv-members-g {
        
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    
    align-self: center;
    border-radius: 10px;

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

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

    padding: 5px;
    margin: 5px;
    color: black;
    background: linear-gradient(to bottom, #e08003, rgb(235, 252, 7));
    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.1), rgba(255, 255, 255, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(6, 190, 160, 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;
      min-width: 95%;
      max-width: 95%;

    }
  }
      .accountstatusdiv-members {
        
        display: flex;
        align-items: center;
        justify-content: center;
        justify-content: top;
        flex-wrap: wrap;
        
        align-self: center;
        border-radius: 10px;
      
        
        min-width: 300px;
        max-width: 50%;

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

        padding: 5px;
        margin: 5px;
        color: black;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     

        
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 20px;
       
        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;
          min-width: 95%;
          max-width: 95%;
      
        }
      }

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

        align-self: center;
        border-radius: 10px;
        background: linear-gradient(to bottom, rgb(236, 238, 238), rgb(3, 187, 233));
        
        min-width: 280px;
        max-width: 280px;

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

        padding: 5px;
        margin: 5px;
        color: black;
        border: 1px solid black;


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

  /*****************END OF MEMBERS***********************************************************/



  .paymentdiv {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    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: 10px;
    min-width: 5%;
    max-width: 100%;
  
     min-height: 5%;
    max-height: 2000px;

     
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    
    background: linear-gradient(to bottom, #1449aa, aqua);
    backdrop-filter: blur(10px);
  
    border-radius: 20px;
    border: 0px solid rgba(6, 190, 160, 0.18);
  
  }

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

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

  .paymentdiv:hover {
   background: linear-gradient(to bottom, #89dfda, rgb(4, 170, 221));
    color: rgb(15, 15, 15);
     border: 0px solid rgba(16, 154, 218, 0.8);

  }



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

      margin: 1px;
      padding: 1px;

       margin-top: 5px;
      margin-bottom: 5px;
    
      border-radius: 10px;
    
  font-size: 18px;
      min-width: 98%;
      max-width: 100%;

    }


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

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

  .paymentdiv:hover {

    
    background-color: rgb(233, 181, 9);
    color: rgb(8, 103, 228);
  }
  }



  

  .paymentdiv6 {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to right, rgb(24, 245, 208), rgb(107, 120, 177));
    margin: 1px;
    padding: 1px;
   
    border-radius: 30px;
    min-width: 90%;
    max-width: 100%;
  
     min-height: 5%;
    max-height: 2000px;

     
 
    font-weight: bold;
    background: linear-gradient(to bottom, #1449aa, aqua);
    backdrop-filter: blur(10px);
  
   
    border: 0px solid rgba(6, 190, 160, 0.18);
  
  }

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

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

  .paymentdiv6:hover {
   background: linear-gradient(to bottom, #89dfda, rgb(4, 170, 221));
    color: rgb(15, 15, 15);
     border: 0px solid rgba(16, 154, 218, 0.8);

  }



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

      margin: 1px;
      padding: 1px;

       margin-top: 1px;
      margin-bottom: 1px;
    
      border-radius: 25px;
    font-weight: bold;
  font-size: 18px;
    

    }

/*
    .paymentdiv6:active {
    
    background-color: #134779;
  }

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

  .paymentdiv6:hover {

    
    background:  #134779;
    color: rgb(18, 148, 235);
  }

  */
  }


  
  .paymentdiv5 {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    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: 5%;
    max-height: 10000px;

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

    
  }

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

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

  .paymentdiv5:hover {

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

      margin: 2px;
      padding: 2px;

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

    }


   
  }





  .paymentdiv3 {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    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: 10px;
    min-width: 5%;
    max-width: 100%;
  
     min-height: 5%;
    max-height: 2000px;

     
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    
    background: linear-gradient(to bottom, #1449aa, aqua);
    backdrop-filter: blur(10px);
  
    border-radius: 20px;
    border: 0px solid rgba(6, 190, 160, 0.18);
  
  }

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

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

  .paymentdiv3:hover {
   background: linear-gradient(to bottom, #11cef0, rgb(223, 184, 12));
    color: rgb(8, 103, 228);
     

  }



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

      margin: 1px;
      padding: 1px;

       margin-top: 5px;
      margin-bottom: 5px;
    
      border-radius: 10px;
    

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

    }


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

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

  .paymentdiv3:hover {

   
    background-color: rgb(247, 244, 244);
    color: rgb(8, 103, 228);
  }
  }

  .paymentdiv-new {

    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    margin: 10px;
    padding: 10px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    min-width: 400px;
    max-width: 420px;
    min-height: 95px;

  }

  .paymentdiv2 {
    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));
    margin: 5px;
    padding: 10px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    min-width: 300px;
    max-width: 300px;
    height: 100px;


    
    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: 2px;
      margin: 2px;

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


    }
    
    

  }

  .paymentdiv4 {
    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));
    margin: 5px;
    padding: 5px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    min-width: 350px;
    max-width: 400px;
    height: 100px;


  }


  
  .availablepaymentdiv {
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    margin: 5px;
    padding: 10px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    min-width: 60%;
    max-width: 100%;
  }


  .displayplaceholderdiv {
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    margin: 2px;
    color: #1449aa;
    padding: 5px;
    width: 110px;
    height: 30px;
    background-color: rgb(24, 245, 208);
    font-size: 20px;


  }

  .displayplaceholderdiv3 {
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    margin: 2px;
    color: #1449aa;
    padding: 5px;
    width: 70px;
    height: 25px;
    background-color: rgb(24, 245, 208);
    font-size: 18px;


  }

  .customer-details {
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 5px;
    margin: 2px;
    color: #1449aa;
    padding: 5px;
    width: 150px;
    height: 25px;
    background-color: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    font-size: 18px;


  }



  .paymentbuttondiv2 {
    background-color: rgb(24, 245, 208);
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 5px;
    margin: 2px;
    padding: 5px;
    color: black;
    min-width: 100px;
    max-width: 140px;
    min-height: 25px;
    max-height: 50px;

  }

  .paymentbuttondiv2 {
    margin: 2px;
    padding: 2px;


  }



  #paymentbutton {
    background-color: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    margin: 2px;
  }

  #pay {
    height: 40px;
    background-color: rgb(12, 234, 250);
    color: #1449aa;
    border: 2px solid #1a66d8;
    border-radius: 2rem;
    margin: 2px;
    width: 120px;
    font-size: 18px;
  }

  #pay-settings {
    height: 30px;
    background-color: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    color: white;
    border: 1px solid #1449aa;
    border-radius: 2rem;
    margin: 0px;
    min-width: 80px;
    max-width: 80px;
    font-size: 18px;

  }

  #paymentlogoimg {
    margin: 3px;
    border-radius: 2rem;
  }



  .choicebox {
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background-color: #1449aa;
    margin: 5px;
    padding: 10%;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;

  }





  .listbox {
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    margin: 5px;
    padding: 20px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;

  }


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

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

    }
  }

  .listbox-e {
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(247, 243, 3));
    margin: 2px;
    padding: 5px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;

  }



  .listbox-f {
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(211, 212, 211), rgb(246, 247, 246));
    margin: 2px;
    padding: 0px;

    min-width: 400px;
    max-width: 100%;


    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;

  }
  .listbox-a {

    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    margin: 5px;
    padding: 20px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    min-width: 60%;
    max-width: 60%;
  }

  .customer-details-listdiv {
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    margin: 20px;
    color: #1449aa;
    padding: 10px;
    min-width: 60%;
    max-width: 100%;
    background-color: white;

  }

  .listbox2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    margin: 5px;
    padding: 20px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;

  }


  .listdivpaymentcode2 {
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    margin: 10px;
    color: #1449aa;
    padding: 10px;
    min-width: 300px;
    max-width: 80%;
    height: 100%;
    background-color: white;

  }

  #feedback {
    height: 100px;
  }

  .input-control {
    
    padding-left: 5px;
    padding-right: 20px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin: 5px;
    border-radius: 10px;
    background-color: white;
  }

  .listdiv {
    border: 1px white solid;
    border-radius: 10px;
    margin: 20px;
    color: #1449aa;
    padding: 10px;
    min-width: 60%;
    max-width: 100%;
    background-color: white;

  }

  
  .listdiv2 {

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

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

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

    background-color: white;

    background: linear-gradient(to bottom, rgb(246, 246, 247), 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) {
    .listdiv2 {
      margin-top: 2px;
       margin-bottom: 2px;
      padding-top: 2px;
      padding-bottom: 2px;

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

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

    min-width: 80%;
    max-width: 100%;
      font-size: 18px;
    }
  }
  
  .listdiv-o {
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    margin: 5px;
    color: #1449aa;
    padding: 5px;
    min-width: 60px;
    max-width: 100%;
    background-color: aqua;

  }

  .listdiv-9 {

    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    margin: 5px;
    color: #1449aa;
    padding: 5px;
    min-width: 35%;
    max-width: 420px;
    background-color: rgb(255, 255, 255);

  }

  .wrap-div-prediction {

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background: dodgerblue;
    min-width: 300px;
    max-width: 400px;
    margin: 3px;
    padding: 3px;
    color: rgb(15, 15, 15);

    border: 1px rgb(28, 214, 228) solid;
    border-radius: 15px;

  }
  .predictiondiv {

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border: 2px rgb(220, 243, 9) solid;
    border-radius: 10px;
    margin: 5px;
    color: #f1f1f1;
    padding: 5px;
    min-width: 100px;
    max-width: 150px;

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

    background-color: rgb(7, 121, 228);

  }



  .listdiv-e {

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    margin: 10px;
    color: #1449aa;
    padding: 5px;
    min-width: 94%;
    max-width: 98%;
    background-color: rgb(8, 8, 8);

  }
  .listdiv-g {

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    margin: 10px;
    color: #1449aa;
    padding: 5px;
    min-width: 94%;
    max-width: 98%;
    background-color: white;

  }

  .listdiv2 {
    
    border-radius: 20px;
    margin: 3px;
    color: #1449aa;
    padding: 10px;
    min-width: 45%;
    max-width: 100%;
  

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

    
  }

  .listdiv_1 {
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    margin: 20px;
    background: #1fe218;
    padding: 10px;
    min-width: 60%;
    max-width: 100%;
    background-color: white;

  }

  .listdivpaymentcode {
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    margin: 20px;
    color: #1449aa;
    padding: 10px;
    min-width: 60%;
    max-width: 100%;
    height: 100%;
    background-color: white;

  }

  #submitpayment {
    background-color: rgb(18, 189, 241);
    color: white;
    border: 1px solid white;
    font-size: 18px;
    margin: 3px;
    padding: 3px;
    width: 130px;

  }


  .adminpayments-table {
    background: linear-gradient(to bottom, rgb(132, 132, 145), rgb(40, 121, 202));
    border-radius: 10px;
    min-width: 70%;
    max-width: 90%;
    padding: 20px;
    margin: 20px;
    border: 1px solid navy;
    color: white;

  }

  .adminpayments-row {
    border: 1px rgb(28, 214, 228) solid;
    width: 90%;
  }


  /*END OF PAYMENT METHODS*/



  /*RECOVERIES */

  .recoveries-bigcontainer {
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    margin: 0px;
    padding: 10px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    min-width: 100%;
    max-width: 100%;
  }

  .recoveries-wrapper {

    justify-content: top;
    background-color: whitesmoke;
    margin: 5px;
    padding: 5px;
    border: rgb(235, 231, 22) solid 2px;
    border-radius: 2rem;
    min-width: 400px;
    max-width: 100%;
    border-style: ridge;

  }

  .sub-button {
    width: 90px;
    padding: 0px;
  }

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


  }

  .recoveries-title {
    color: black;
    background-color: rgb(40, 121, 202);
    padding: 5px;
    margin: 5px;
    border-radius: 2rem;
    width: 150px;
    font-size: 18px;
    color: white;


  }

  .recoveries-output {
    color: black;
    background-color: white;
    padding: 5px;
    margin: 5px;
    border-radius: 2rem;
    width: 140px;
    font-size: 18px;
    color: rgb(40, 121, 202);
  }

  /* END OF RECOVERIES   */






  /* OVERVIEW   */
  .overview-bigcontainer {
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    margin: 5px;
    padding: 10px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    min-width: 95%;
    max-width: 100%;
  }

  .overview-bigcontainer-t {
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(248, 249, 250));
    margin: 10px;
    padding: 10px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 50px;
    min-width: 60%;
    max-width: 60%;
  }

  .overview-wrapper {

    justify-content: top;
    background-color: rgb(21, 121, 253);
    margin: 2px;
    padding: 10px;
    border: rgb(247, 247, 242) solid 2px;
    border-radius: 2rem;
    min-width: 280px;
    max-width: 100%;
    border-style: ridge;

  }

  .sub-button {
    width: 90px;
    padding: 0px;
  }

  .overview-div {
    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: 2px;
      margin-right: 2px;

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


    }


  }

  
  .overview-div2 {
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    min-width: 50%;
    max-width: 80%;
    /*glass effect*/
    background: linear-gradient(to top, rgb(248, 250, 250), rgb(3, 151, 250));
    
    margin-left: 2px;
      margin-right: 2px;

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

    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border-radius: 20px;
    border: 5px solid rgb(15, 86, 216);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);


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

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

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

       margin-top: 2px;
      margin-bottom: 20px;


    }


  }


  .overview-d {
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    width: 180px;

    border-radius: 10px;

    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 3px;
    padding-right: 3px;


    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 3px;
    margin-right: 3px;


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

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

      border-radius: 10px;

      padding-top: 5px;
      padding-bottom: 5px;
      padding-left: 10px;
      padding-right: 10px;


      margin-top: 5px;
      margin-bottom: 5px;
      margin-left: 10px;
      margin-right: 10px;


    }



  }

  .overview-di {
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;

    background: linear-gradient(to top, rgb(241, 241, 240), rgb(49, 132, 214));
    
    border: 2px solid white;
    border-radius: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 5px;
    padding-right: 5px;


    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;

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

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

      padding-top: 5px;
      padding-bottom: 5px;
      padding-left: 10px;
      padding-right: 10px;


      margin-top: 5px;
      margin-bottom: 5px;
      margin-left: 10px;
      margin-right: 10px;


    }


  }

  /*background: linear-gradient(to top, rgb(241, 241, 240), rgb(49, 132, 214));*/
  .overview-di-t {
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;

    background: yellow;

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

    min-height: 40px;
    max-height: 80px;

    margin: 2px;
    padding: 2px;
    
    border-radius: 10px;


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


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

      padding-top: 5px;
      padding-bottom: 5px;
      padding-left: 1px;
      padding-right: 1px;


      margin-top: 5px;
      margin-bottom: 5px;
      margin-left: 1px;
      margin-right: 1px;


    }

  }



  

  .sidebaritem {
    color: black;
    background-color: rgb(23, 236, 236);
    padding: 3px;
    margin: 3px;
    border: white solid 2px;
    border-radius: 2rem;

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

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

    font-size: 18px;



  }


   .h3sidebar {
    margin: 5px;
  }
  
  .sidebarite {
    border: 1px solid white;
    border-radius: 5px;
    min-width: 130px;
    max-width: 130px;
    height: 30px;
    padding: 2px;
    background: linear-gradient(to top, rgb(125, 233, 227), rgb(4, 68, 243));
    color: white;
    margin: 3px;

  }

  .sidebaritemc {
    border: 1px solid rgb(78, 139, 12);
    border-radius: 25px;
    min-width: 130px;
    max-width: 130px;
    height: 40px;
    padding: 5px;
    background: linear-gradient(to top, rgb(13, 240, 88), rgb(4, 70, 50));
    color: rgb(229, 233, 9);
    margin: 5px;

  }


  

  .sidebar-details {
    background: rgb(241, 241, 241);
    min-width: 340px;
    max-width: 340px;
    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;


      min-height: 600px;
      max-height: 1000px;
    
  
    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) {

   
      
      min-width: 280px;
      max-width: 100%;

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


    }

  }
 

  

  .sidebar-details-container {
  
    min-width: 350px;
    max-width: 350px;
    margin: 5px;
    padding: 5px;
    color: rgb(15, 15, 15);

    
    border-radius: 10px;

    color: black;


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

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

   
      
      min-width: 280px;
      max-width: 100%;

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


    }

  }
  /*
  .overview-title {

    color: black;
          background-color: rgb(24, 245, 208);
          padding: 3px;
          margin: 3px;
          border-radius: 2rem;

          min-width: 152px;
          max-width: 152px;

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

          font-size: 18px;
          color: white;


  }
  */

  .overview-title-t {

    color: black;
          background-color: rgb(24, 245, 208);
          padding: 3px;
          margin: 6px;
          border-radius: 2rem;

          min-width: 152px;
          max-width: 152px;

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

          font-size: 18px;
          color: white;


  }
  .overview-titl {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    color: black;
    background-color: rgb(227, 243, 7);
    padding: 6px;
    margin: 5px;
    border-radius: 2rem;
    ;
    min-width: 152px;
    max-width: 152px;
    font-size: 18px;
    color: white;


  }

  .overview-titlc {

    color: black;
    background-color: rgb(60, 248, 12);
    padding: 6px;
    margin: 5px;
    border-radius: 2rem;
    min-width: 152px;
    max-width: 152px;
    font-size: 18px;
    color: white;


  }

  .overview-title-next {

    color: black;
    background-color: rgb(15, 247, 46);
    padding: 5px;
    margin: 5px;
    border-radius: 2rem;
    min-width: 120px;
    max-width: 130px;
    font-size: 18px;
    color: white;


  }

  .overview-output {
    color: black;
    background-color: white;
    padding: 5px;
    margin: 2px;
    border-radius: 1rem;
    min-width: 100px;
    max-width: 100px;
    font-size: 14px;
    color: rgb(40, 121, 202);
  }

  /* END OF OVERVIEW   */

  
  .admintips-table {
    background: linear-gradient(to top, rgba(232, 235, 232, 0.596), rgb(245, 246, 247));
    border-radius: 10px;
    align-self: center;
    padding: 10px;
    margin: 5px;
    border: 1px solid navy;

  }

  admintips-row {
    width: 300px;
  }

  admintips-td {
    width: 100px;
  }



  /*END OF TABLE  */





  .newstake {
    min-width: 40%;
    max-width: 40%;
    background-color: #1449aa;
    color: white;
    margin: 5px;
  }

  #newstake {
    min-width: 200px;
    max-width: 200px;
    margin: 5px;
    padding: 5px;
  }

  #number_of_tickets {
    width: 100px;
    margin: 5px;
  }


  .to-account-button {
    width: 150px;
    height: 80px;
    font-size: 20;
    background-color: #111;
    color: #f1fcfc;

  }

  .oneoutput-div {
    background-color: white;
    min-width: 160px;
    max-width: 160px;
    min-height: 100px;
    max-height: 100px;
    margin: 5px;
    padding: 5px;
    border-radius: 1rem;

  }

  .headline-stakediv {
    border: 1px solid white;
    padding: 5px;
    border-radius: 1rem;
    background-color: whitesmoke;
    margin: 10px;
  }


  .stake-div {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to right, rgb(238, 240, 238), rgb(240, 236, 236));
    border-radius: 0px;
    min-width: 180px;
    max-width: 100%;
    min-height: 420px;
    max-height: 100%;
    padding: 10px;
    margin: 10px;
    border: 1px solid navy;
    border-radius: 10px;
    color: black;

  }


  .feedbackthanks-main-div {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(24, 133, 243));
    min-width: 70%;
    border-radius: 0px;
    min-width: 180px;
    max-width: 100%;
    min-height: 420px;
    max-height: 100%;
    padding: 10px;
    margin: 10px;
    border: 1px solid navy;
    border-radius: 10px;
    color: black;

  }

  .stake-div-terms {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to right, rgb(238, 240, 238), rgb(240, 236, 236));
    border-radius: 0px;
    min-width: 180px;
    max-width: 100%;
    min-height: 420px;
    max-height: 100%;
    padding: 10px;
    margin: 10px;
    border: 1px solid navy;
    color: black;

  }


  .confirm-button {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(24, 133, 243));
    min-width: 70%;
    max-width: 100%;
    margin: 5px;
    padding: 5px;
    color: white;
    border-radius: 10px;
  }

  .confirm-button2 {
    /* display: flex;
            align-items: center;
            justify-content: center;
            justify-content: top;
            flex-wrap: wrap;*/
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(24, 133, 243));
    min-width: 70%;
    max-width: 100%;
    margin: 10px;
    padding: 10px;
    color: white;
    border-radius: 10px;
  }


  .confirm-button-settings {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(24, 133, 243));
    min-width: 40%;
    max-width: 40%;
    margin: 5px;
    padding: 5px;
    color: white;
    border-radius: 10px;
  }

  .error-text {
    color: rgb(110, 20, 20);
  }

  .to-account-button {
    color: rgb(59, 56, 56);
    background: linear-gradient(to top, rgb(250, 246, 1), rgb(3, 82, 240));
    font-size: 25px;
  }

  #confirm-button {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(18, 19, 18), rgb(7, 78, 7));
    min-width: 70px;
    max-width: 80px;
    margin: 5px;
    padding: 5px;
    color: white;
    font-size: 28px;
  }

  .timezone-settings-div {
    min-width: 300px;
    max-width: 300px;
    border: 2px solid rgb(24, 245, 208);
  }

  .feedbackthanks-div {
    min-width: 420px;
    max-width: 100%;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(244, 244, 245));
    border: 5px solid rgb(24, 245, 208);
    padding: 20px;
    margin: 10px;
    border-radius: 20px;
  }

 
  .settings-bigcontainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }


  .settings-head-div {
    width: 90%;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(24, 133, 243));
    margin: 5px;
    padding: 10px;
    border-radius: 20px;
  }


  .minimum-stake {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background-color: #dee0e2;
    width: 300px;
    border: 1px solid navy;
    margin: 3px;
    padding: 3px;
    color: white;
    font-size: 28px;
    border-radius: 10px;

  }

  .currency-stake {
    width: 100px;
    border: 2px solid navy;
    margin: 10px;
    padding: 10px;
    color: navy;
    font-size: 18px;
    border-radius: 10px;
  }


  .amount-stake {
    width: 100px;
    border: 2px solid navy;
    margin: 10px;
    padding: 10px;
    color: navy;
    font-size: 28px;
    border-radius: 10px;

  }


  #confirm-changes {
    width: 150px;
    background-color: yellow;
    border: 1 px solid navy;
    padding: 5px;
    height: 40px;
    font-size: 17px;
    margin: 10px;

  }



  #region-button {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(242, 243, 242), rgb(236, 240, 236));
    min-width: 110px;
    max-width: 110px;
    margin: 3px;
    padding: 3px;
    color: rgb(15, 15, 15);
    font-size: 18px;
  }

  #to-account-button {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(24, 205, 236), rgb(243, 243, 243));
    min-width: 150px;
    max-width: 150px;
    margin: 3px;
    padding: 3px;
    color: rgb(15, 15, 15);
    font-size: 18px;
  }

  .region-form {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(24, 133, 243));
    min-width: 70%;
    max-width: 100%;
    margin: 5px;
    padding: 5px;
    color: white;
    border-radius: 10px;
  }

  /* END OF NOTIFICATIONS  */






  /*************************************FLUCTUATION******************************/


  .fluctuation_entry {
    width: 70px;
    height: 32px;
    padding: 3px;
    margin: 0px;
  }


   .f-button {


   
    min-width: 100px;
    max-width: 180px;
    margin: 5px;
    padding: 5px;
    color: white;
    background-color: #1449aa;
    border: 1px aqua solid;
    border-radius: 10px;


    
  
    background: linear-gradient(135deg, rgba(5, 120, 197, 0.8), rgba(30, 144, 255, 0.3));
    
    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);   
  }





  .members-div {
    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));
    margin: 10px;
    padding: 10px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    min-width: 150px;
    max-width: 300px;
    min-height: 50px;
    max-height: 200px;


  }




  /*TICKETS*/
  .kickoff {
    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;
  }






  /*FOOTER FOOTER */

  .footerbigbox {


    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    width: 100%;

  }




  .footersmallbox {
    border: 0px solid;
    color: navy;
    margin: 10px;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(211, 220, 230));
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-width: 40%;
    max-width: 100%;
    min-height: 130px;
    max-height: 130px;
    border-color: #a7a4a4;
    padding: 50px;

  }





  .footer-logo {

    height: 50px;

  }

  /*flexx*/
  .footernav-container {
    display: flex;
   
    top: 500px;
    flex-direction: row;

    height: 100px;
    width: 100%;
    bottom: 5px;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    margin: 5px;
    color: #f5f5f5;
    background-color: rgb(15, 124, 43);


  }

  .footer-nav1 {
    width: 100px;
    margin: 10px;

  }

  .footer-nav2 {
    width: 200px;
    margin: 10px;

  }

  .footer-nav3 {
    width: 100px;
    margin: 10px;

  }

  .footer-nav4 {
    width: 100px;
    margin: 10px;

  }

  @media screen and (max-width: 800px) {
    .footernav-container {
     
      top: 1000px;

    }

  }

  /*FOOTERMAIN-FLEX  */

  .footermain-flex {

    height: 100px;
    width: 90%;
    bottom: 5px;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: center;
    margin: 10px;

  }

  .footer-flex1 {
    width: 300px;
    margin: 10px;
    border: 1px solid whitesmoke;

  }

  .footer-flex2 {
    width: 300px;
    margin: 10px;
    border: 1px solid whitesmoke;
  }

  .footer-flex3 {
    width: 300px;
    margin: 10px;
    border: 1px solid whitesmoke;
  }

  .social-icon {
    height: 30px;
    margin: 5px;
  }


  /*END OF FOOTERMAIN-FLEX  */


  /*IMAGES  */

  .details {
    height: 150px;


  }

  /***************AGENT*******************/

  .frontpage_image {
    height: 200px;

    outline: 2px solid whitesmoke;
  }


  .agentbanner {

    border: 1px rgb(25, 243, 80) solid;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    border-radius: 10px;
    min-width: 200px;
    max-width: 100%;

    padding: 5px;
    margin: 5px;

  }


  .adminsmallbox-a {

    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    margin: 20px;
    padding: 20px;
    border-radius: 20px;
    min-width: 400px;
    max-width: 500px;
  }

  .adminbigcontainer-a {

    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    margin: 10px;
    padding: 10px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    min-width: 500px;
    max-width: 100%;
  }

  .spaceholder {
    width: 180px;
  }

  .requirement-a {
    margin: 5px;
    padding: 5px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    min-width: 200px;
    max-width: 100%;
    background-color: #34d6f3;
  }



  /**************AGENT DASHBOARD***************************************/
  .time-div1 {
    background-color: white;
    min-width: 160px;
    max-width: 160px;
    height: 60px;
    border: dodgerblue solid 2px;
    border-radius: 10px;
    margin: 5px;
    padding: 5px;
  }

  .time-div2 {
    display: flex;
    align-items: center;
    justify-content: left;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(24, 205, 236), rgb(243, 243, 243));
    min-width: 60%;
    max-width: 60%;
    height: 100px;
    border: grey solid 2px;
    border-radius: 10px;
    margin: 20px;
    padding: 10px;
  }

  .time-div3 {

    background: linear-gradient(to top, rgb(24, 205, 236), rgb(243, 243, 243));
    min-width: 60%;
    max-width: 60%;
    height: 80px;
    border: grey solid 2px;
    border-radius: 5px;
    margin: 5px;
    padding: 5px;
  }

  .time-div4 {

    background: linear-gradient(to top, rgb(24, 205, 236), rgb(243, 243, 243));
    min-width: 150px;
    max-width: 150px;
    height: 80px;
    border: grey solid 2px;
    border-radius: 5px;
    margin: 5px;
    padding: 5px;
  }


  .action-div {

    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(24, 205, 236), rgb(243, 243, 243));
    min-width: 350px;
    max-width: 100%;
    margin: 5px;
    padding: 5px;
    color: rgb(15, 15, 15);
    font-size: 18px;
    border: 1px solid aqua;
    border-radius: 10px;

  }

  .workmanager {


    background: white;
    min-width: 90%;
    max-width: 100%;
    margin: 10px;
    padding: 5px;
    color: black;
    font-size: 18px;
    border: 1px grey solid;
    border-radius: 15px;


  }

  .action-div-a {


    background: linear-gradient(to top, rgb(24, 205, 236), rgb(243, 243, 243));
    min-width: 350px;
    max-width: 100%;
    margin: 10px;
    padding: 10px;
    color: rgb(15, 15, 15);
    font-size: 18px;
    border-radius: 15px;

  }

  
   @media screen and (max-width: 800px) {
    .action-div-a {

      margin: 2px;
      padding: 2px;

       margin-top: 5px;
      margin-bottom: 5px;
    
      border-radius: 10px;
    
  
      min-width: 95%;
      max-width: 100%;

    }
  }
  .clients-div {


    background: dodgerblue;
    min-width: 350px;
    max-width: 100%;
    margin: 3px;
    padding: 3px;
    color: rgb(15, 15, 15);
    font-size: 18px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 5px;

  }


   
  .db-wrap-div {

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

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


    margin: 2px;
    padding: 2px;
    color: rgb(22, 22, 22);
    background-color:  #e6d708;
    border: 2px rgb(14, 216, 243) solid;
    border-radius: 15px;

  }

  

  .db-wrap-div:active {
    
    background-color: #134779;
     color: white;
  }

  .db-wrap-div:visited {
    background-color: rgb(12, 207, 233);
     color: #141518;
  }

  .db-wrap-div:hover {
    background: linear-gradient(to top, rgb(221, 217, 5), rgb(9, 122, 197));
    color: rgb(9, 52, 145);
  }



  
  
  .db-wrap-div-article {


    background: dodgerblue;
    min-width: 400px;
    max-width: 450px;
    margin: 10px;
    padding: 10px;
    color: rgb(15, 15, 15);

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

  }


  .db-wrap-div-e {


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

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


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

  }


  .db-wrap-divv {


    background: dodgerblue;
    min-width: 310px;
    max-width: 320px;
    margin: 5px;
    padding: 5px;
    color: white;
    background-color: #1449aa;
    border: 1px aqua solid;
    border-radius: 10px;


    
  
    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) {
    .db-wrap-divv {

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

  .db-wrap-div3 {


    background: dodgerblue;
    min-width: 270px;
    max-width: 270px;
    margin: 5px;
    padding: 5px;
    color: white;
    background-color: #1449aa;
    border: 2px aqua solid;
    border-radius: 15px;

  }

  @media screen and (max-width: 800px) {
    .db-wrap-div3 {

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

  .db-wrap-div4 {
    min-width: 280px;
    max-width: 290px;
    margin: 3px;
    padding: 3px;
    color: white;
    background-color: dodgerblue;
    border: 1px black;
    border-radius: 15px;

  }

  @media screen and (max-width: 800px) {
    .db-wrap-div4 {

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


  .db-wrap-div5 {
    min-width: 280px;
    max-width: 290px;

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

    margin: 3px;
    padding: 3px;
    color: white;
    background-color: dodgerblue;
    border: 1px aquamarine solid;
    border-radius: 15px;

  }

  @media screen and (max-width: 800px) {
    .db-wrap-div5 {

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


   
  .db-wrap-div6 {

    
    
    background: dodgerblue;
    min-width: 60px;
    max-width: 250px;

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


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

  }

  

  .db-wrap-div6:active {
    
    background-color: #134779;
  }

  .db-wrap-div6:visited {
    background-color: grey;
  }

  .db-wrap-div6:hover {
    background-color: black;
    color: white;
  }





  
  .db-wrap-div7 {

    
    

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

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


    margin: 5px;
    padding: 5px;
    color: white;
    background-color: #4cdf12;
    border: 2px rgb(170, 173, 173) solid;
    border-radius: 15px;

  }

  

  .db-wrap-div7:active {
    
    background-color: #134779;
  }

  .db-wrap-div7:visited {
    background-color: grey;
  }

  .db-wrap-div7:hover {
    background-color: black;
    color: white;
  }

  .wrap-div-e {

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

    background: linear-gradient(to top, rgb(24, 205, 236), rgb(243, 243, 243));
    min-width: 60%;
    max-width: 450px;



    margin: 10px;
    padding: 5px;
    color: white;
    background-color: dodgerblue;
    border: 1px aquamarine solid;
    border-radius: 10px;

  }


  .db-wrap-div8 {

    
    
    background: dodgerblue;
    min-width: 20px;
    max-width: 200px;

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


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

  }



  @media screen and (max-width: 800px) {
    .db-wrap-div8 {


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

      margin: 1px;
      padding: 5px;
    
      border-radius: 30px;
     
   
   
    }
  }
  

  .db-wrap-div8:active {
    
    background-color: #134779;
  }

  .db-wrap-div8:visited {
    background-color: grey;
  }

  .db-wrap-div8:hover {
    background-color: black;
    color: white;
  }



  
  .db-wrap-div9 {

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

    
 background: dodgerblue;
    min-width: 20px;
    max-width: 120px;

    min-height: 20px;
    max-height: 60px;


    margin: 1px;
    padding: 1px;
    color: white;
    background-color: #1449aa;
    border: 1px aqua solid;
    border-radius: 30px;
    font-size: 18px;


    
@media screen and (max-width: 800px) {
   
    min-height: 15px;
    max-height: 100%;

   

    
    }
  }

  

  .db-wrap-div9:active {
    
    background-color: #134779;
  }

  .db-wrap-div9:visited {
    background-color: grey;
  }

  .db-wrap-div9.action {
    background-color: black;
    color: white;
  }


  .wrap-div5 {

    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(24, 205, 236), rgb(243, 243, 243));
    min-width: 270px;
    max-width: 275px;



    margin: 5px;
    padding: 5px;
    color: white;
    background-color: dodgerblue;
    border: 1px aquamarine solid;
    border-radius: 10px;

  }


  .sidebaritem1 {
    border: 1px solid dodgerblue;
    border-radius: 5px;
    min-width: 120px;
    max-width: 120px;
    height: 40px;
    padding: 10px;
    margin: 10px;
    background: white;
    color: black;
    margin: 5px;
    background-color: yellow;

  }

  .sidebaritem2 {
    border: 1px solid dodgerblue;
    border-radius: 20px;
    min-width: 90px;
    max-width: 100px;
    height: 40px;
    padding: 10px;
    margin: 10px;
    background: white;
    color: black;
    margin: 5px;
    font-size: 20px;
  }

  .sidebaritem3 {
    border: 1px solid dodgerblue;
    border-radius: 5px;

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

  .sidebaritem4 {
    border: 1px solid dodgerblue;
    border-radius: 5px;
    min-width: 90px;
    max-width: 90px;

    min-height: 20px;
    max-height: 50px;
    padding: 2px;
    margin: 2px;
    background: white;
    color: black;
    font-size: 18px;
  }


  .sidebaritem5 {
    border: 1px solid dodgerblue;
    border-radius: 5px;
    min-width: 150px;
    max-width: 150px;

    min-height: 20px;
    max-height: 50px;
    padding: 2px;
    margin: 2px;
    background: white;
    color: black;
    font-size: 18px;
  }

  .sidebaritem6 {
    border: 1px solid dodgerblue;
    border-radius: 5px;
    min-width: 100px;
    max-width: 100px;

    min-height: 20px;
    max-height: 50px;
    padding: 3px;
    margin: 3px;
    background: white;
    color: black;
    font-size: 18px;
  }

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

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

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

  .agentbanner1 {
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    min-width: 300px;
    max-width: 100%;

    padding: 10px;
    margin: 10px;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    color: black;
    font-size: 18px;
  }