/*  MENU BAR   */

  .menubar-button {
    width: 80px;
  }

  .page-button {
    width: 150px;
    background-color: #1449aa;
    color: whitesmoke;
  }

  .large-1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    margin: 40px;
    padding: 40px;
    border-radius: 20px;
    min-width: 150px;
    max-width: 190px;
    font-size: 60px;
    min-height: 150px;
    max-height: 190px;
    background: linear-gradient(to top, rgb(82, 231, 231), rgb(234, 235, 236));

  }

  
  .large-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    margin: 5px;
    padding: 5px;
    border-radius: 20px;
    min-width: 80px;
    max-width: 80px;
    font-size: 18px;
    min-height: 20px;
    max-height: 20px;
    background: linear-gradient(to top, rgb(247, 248, 248), rgb(240, 241, 241));


    
 @media screen and (max-width: 800px) {
     
      padding: 1px;
      margin: 1px;
      
      min-width: 100px;
      max-width: 100px;
    
      border-radius: 10px;


 }
  }


  
  .large-3 {
   
    margin: 10px;
    padding: 10px;
    border-radius: 20px;
    min-width: 70px;
    max-width: 70px;
    font-size: 30px;
    min-height: 20px;
    max-height: 40px;
    background: linear-gradient(to top, rgb(247, 248, 248), rgb(240, 241, 241));


    
 @media screen and (max-width: 800px) {
     
   
     
    
      border-radius: 10px;


 }
  }

  /* GLOBAL PROPERTIES 
        1. LINK COLORS     */
  body {
    font-size: 18px;
 
  }


  a:link {
    color: navy;
  }

  a:active {
    color: rgb(25, 243, 80);
  }

  a:visited {
    color: #134779;
  }

  a:hover {
    color: rgb(235, 20, 20);
  }


  .error {

    color: rgb(114, 8, 8);
  }



  /* SUBMIT BUTTONS  */
  #submit {
    background-color: rgb(42, 120, 223);
    color: white;
    border: 1px solid rgb(236, 240, 5);
    font-size: 18px;
    margin: 5px;
    padding: 5px;
    min-width: 80px;
    max-width: 180px;
    min-height: 18px;
    max-height: 50px;
    border-radius: 15px;
  }

  #team-div-submit {
    background-color: rgb(18, 189, 241);
    color: white;
    border: 1px solid whitesmoke;
    font-size: 18px;
    margin: 3px;
    padding: 3px;
    min-width: 80px;
    max-width: 120px;
    min-height: 25px;
    max-height: 50px;
  }

  .client_input {
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    color: white;
    border: 1px solid whitesmoke;
    border-radius: 10px;
    font-size: 18px;
    margin: 3px;
    padding: 3px;
    min-width: 60%;
    max-width: 90%;
    min-height: 25px;
    max-height: 70px;
  }


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

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

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

  #member-nav-button {
    color: white;
    background-color: navy;
    font-size: 18px;
  }

  /*HEADER NAVBAR HEADER */
  /*NAVBAR*/


  .headerbutton {
    margin-top: 5px;
    padding: 5px;
    color: whitesmoke;
    border: 1px solid white;
    background-color: rgb(226, 213, 213);
    width: 100px;
    font-size: 18px;

  }


  .headerbutton:active {
    background-color: #dee0e2;
  }

  .headerbutton:visited {
    background-color: rgb(226, 220, 220);
  }

  .headerbutton:hover {
    background-color: rgb(26, 193, 235);
    color: white;
  }






  .headerbutton2 {

    margin-top: 5px;
    padding: 5px;
    color: white;
    border: 2px solid rgb(25, 243, 80);
    background-color: yellow;
    width: 180px;
    font-size: 14px;
    height: 80px;

  }


  .headerbutton2:active {
    background-color: #dee0e2;
  }

  .headerbutton2:visited {
    background-color: rgb(226, 220, 220);
  }

  .headerbutton2:hover {
    background-color: rgb(26, 193, 235);
    color: white;
  }




  #payment-link-button {

    margin-top: 5px;
    padding: 5px;
    color: black;
    border: 1px solid rgb(25, 243, 80);
    background-color: white;
    width: 120px;
    font-size: 15px;
    height: 35px;

  }


  #payment-link-button:active {
    background-color: #dee0e2;
  }

  .payment-link-button:visited {
    background-color: rgb(226, 220, 220);
  }

  .payment-link-button:hover {
    background-color: rgb(26, 193, 235);
    color: white;
  }

  .whitetext {
    color: white;
    font-size: 20px;
  }
  
  .whitetext1 {
    color: white;
    font-size: 30px;
  }
  .bluetext {
    color: rgb(31, 59, 218);
    font-size: 40px;
  }

  .nav-wrapper {
    display: flex;
    position: relative;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    margin: 0px;
    width: 100%px;
    height: 80px;
    border-radius: 0 0 15px 15px;
    padding: 0 25px;
    z-index: 2;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  .logo-container {
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .logo {
    height: 30px;

    outline: 2px solid whitesmoke;
  }

  @media screen and (max-width: 800px) {
    .logo {
      height: 35px;


    }

  }


  .icon {
    height: 50px;

    outline: 2px solid whitesmoke;
    background-color: white;
  }

  @media screen and (max-width: 800px) {
    .icon {
      height: 35px;


    }

  }

  .social-media {
    height: 100px;

    outline: 2px solid whitesmoke;
  }

  @media screen and (max-width: 800px) {
    .social-media {
      height: 100px;


    }

  }

  .nav-tabs {
    display: flex;
    font-weight: 600;
    border-color: rgb(25, 243, 80);
    font-size: 18px;
    list-style: none;
    color: rgb(12, 96, 250);

  }

  .nav-tab:not(:last-child) {
    background-color: whitesmoke;
    border: 1px solid white;
    border-radius: 20px;
    padding: 10px;
    margin: 5px;
    font-size: medium;

  }

  .nav-tab:last-child {
    background-color: whitesmoke;
    padding: 10px;
    border: 1px solid white;
    border-radius: 20px;
    border-bottom-right-radius: 20px;
    margin: 5px
  }

  .nav-tab,
  .menu-btn {
    cursor: pointer;
    color: black
  }

  .hidden {
    display: none;
  }

  @media screen and (max-width: 800px) {
    .nav-container {
      position: fixed;
      display: none;
      overflow-y: initial;
      z-index: -1;
      top: 0;
      right: 0;
      width: 280px;
      height: 100%;
      background: linear-gradient(to top, rgb(24, 245, 208), rgb(233, 234, 235));
      box-shadow: -1px 0 2px rgba(0, 0, 0, 0.2);
    }

    .nav-tabs {
      flex-direction: column;
      align-items: flex-end;
      margin-top: 80px;
      width: 250px;

    }

    .nav-tab:not(:last-child) {
      background-color: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
      padding: 20px 25px;
      margin: 5px;
      border-right: unset;
      border-bottom: 1px solid #f5f5f5;
      width: 120px;
    }

    .nav-tab:last-child {
      background-color: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
      padding: 15px 25px;
      margin: 5px;
      border-right: unset;
      border-bottom: 1px solid #f5f5f5;
      width: 120px;
    }

    .menu-btn {
      position: relative;
      display: block;
      margin: 0;
      width: 20px;
      height: 15px;
      cursor: pointer;
      z-index: 2;
      padding: 10px;
      border-radius: 10px;
    }

    .menu-btn .menu {
      display: block;
      width: 100%;
      height: 2px;
      border-radius: 2px;
      background: #111;
    }

    .menu-btn .menu:nth-child(2) {
      margin-top: 4px;
      opacity: 1;
    }

    .menu-btn .menu:nth-child(3) {
      margin-top: 4px;
    }

    #menuToggle:checked+.menu-btn .menu {
      transition: transform 0.2s ease;
    }

    #menuToggle:checked+.menu-btn .menu:nth-child(1) {
      transform: translate3d(0, 6px, 0) rotate(45deg);
    }

    #menuToggle:checked+.menu-btn .menu:nth-child(2) {
      transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
      opacity: 0;
    }

    #menuToggle:checked+.menu-btn .menu:nth-child(3) {
      transform: translate3d(0, -6px, 0) rotate(-45deg);
    }

    #menuToggle:checked~.nav-container {
      z-index: 1;
      display: flex;
      animation: menu-slide-left 0.3s ease;
    }

    @keyframes menu-slide-left {
      0% {
        transform: translateX(200px);
      }

      to {
        transform: translateX(0);
      }
    }
  }


  body {
    font-family: 'Ubuntu', sans-serif;
   /* background-image: url('IMAGES/football-stadium-3404535_1280.jpg');*/
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    color: black;
    margin: 0px;

  }


  .kickoff-text {
    color: white;
  }


  */ h1 {
    margin: 20px 0;
    color: black;
  }




  /*form {
    position: relative;
    height: 100%px;
    width: 95%;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-right: 40%;
    color: #134779;
    background-color: white;

    border: 1px solid;
    border-color: whitesmoke;
    border-radius: 10px;
  }*/

  button {
    margin-top: 50px;
    width: 150px;
    background-color: navy;
    color: white;
    padding: 5px 5px;
    font-size: 24px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    border: rgb(25, 243, 80);
    height: 40px;

  }

  /*START OF INPUTS  */

  input {
    display: block;
    height: 40px;
    width: 100%;
    background-color: white;
    border-radius: 5px;
    padding: 10px 10px;
    margin-top: 5px;
    margin-bottom: 0px;
    font-size: 18px;
    font-weight: 100;
    outline: none;
    border: #c1cad3 solid 1px;
    color: #080000;
    box-sizing: border-box;

    &::placeholder {
      color: #134779;
    }
  }


  select {
    display: block;
    height: 40px;
    width: 70%;
    background-color: white;
    border-radius: 5px;
    padding: 10px 10px;
    margin-top: 5px;
    margin-bottom: 0px;
    font-size: 18px;
    font-weight: 100;
    outline: none;
    border: #c1cad3 solid 1px;
    color: #080000;
    box-sizing: border-box;

    &::placeholder {
      color: #134779;
    }

  }

  .radiobuttons {
    height: 20px;
    margin: 1px;
    align-items: flex-end;
  }



  /*END OF INPUTS   */




  /*WRAPS & BOX DIVS  */



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


  
 
    
  

  .bigcontainer2 {

    
    padding: 0px;
    margin: 0px;
   
    min-width:800px;
    max-width: 700px;
   
    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;
     
      margin: 0px;
padding: 0px;

      margin-top: 10px;
        margin-bottom: 10px;
     
        
        height: 100%;

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


    }
  }



  

  .bigcontainer3 {

    
    padding: 10px;
    margin: 10px;
   
    min-width:800px;
    max-width: 1000px;
   
    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;
     
      margin: 0px;
      padding: 0px;

      margin-top: 10px;
      margin-bottom: 10px;
     
      height: 100%;

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


    }
  }

  
  

  .bigcontainer4 {

    
    padding: 0px;
    margin: 0px;
   
    min-width:900px;
    max-width: 1000;
   
    min-height: 675px;
    max-height: 100%;
    border-radius: 10px;



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

      margin-top: 10px;
        margin-bottom: 10px;
     
        
        height: 100%;

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


    }
  }


  
  .bigcontainer5 {

     display: flex;
      align-items: left;
      justify-content: top;
      flex-wrap: wrap;
     
    padding: 0px;
    margin: 0px;
   
    min-width:500px;
    max-width: 1000px;
   
    height: 700px;
    height: 700px;
    border-radius: 10px;



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

      margin-top: 10px;
        margin-bottom: 10px;
     
        
        height: 100%;

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


    }
  }

  .bigcontainer-div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    min-width: 100%;
    max-width: 100%;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

  }

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

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

    min-height: 100%;
    max-height: 100%;
    background: linear-gradient(to top, rgb(3, 247, 247), rgba(12, 247, 208, 0.74));
    padding: 5px;
    margin: 5px;
    border-radius: 10px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }

  .bigcontainer-payments {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border: 1px solid;
    color: navy;
    margin: 10px;
    border-radius: 2rem;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    background-attachment: fixed;
    padding: 5px;
    min-width: 90%;
    max-width: 100%;
    border-color: #a7a4a4;
  }


  .smallbox {
    border: 1px solid;
    color: navy;
    margin: 10px;
    border-radius: 2rem;

    background: linear-gradient(to top, rgb(49, 132, 214), rgb(24, 245, 208));
    background-attachment: fixed;
    padding: 5%;
    min-width: 300px;
    max-width: 100%;
    border-color: #a7a4a4;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }

  .smallbox-recovery {
    border: 1px solid;
    color: navy;
    margin: 10px;
    border-radius: 2rem;
    background: linear-gradient(to top, rgb(49, 132, 214), rgb(24, 245, 208));
    background-attachment: fixed;
    padding: 10px;
    min-width: 300px;
    max-width: 100%;
    border-color: #a7a4a4;

  }


  .smallbox-new {

    border: 1px solid;
    color: navy;
    margin: 5px;
    border-radius: 2rem;

    background: linear-gradient(to top, rgb(49, 132, 214), rgb(24, 245, 208));
    background-attachment: fixed;
    padding: 5%;
    min-width: 300px;
    max-width: 400px;
    border-color: #a7a4a4;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  



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

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

      border-radius: 10px;


    }
  
  }

  .logo-payment {
    margin: 5px;
    padding: 10px;
    width: 60px;

  }

  .summary-head {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    color: rgb(45, 187, 45);
    margin: 10px;
    border-radius: 10px;
    background-color: #f1fcfc;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 10px;
    min-width: 300px;
    max-width: 400px;
    min-height: 150px;
    max-height: 200px;
    border-color: #a7a4a4;

  }


  .member-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    color: navy;
    margin: 5px;


  }
  .member-nav1 {
    color: white;
    margin: 5px;
    padding: 5px;
    border: 1px solid white;
    min-width: 100px;
    max-width: 200px;
    background-color: #1449aa;


  }

  .member-nav-team {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    color: navy;
    margin: 1px;
    padding: 2px;
  }

  .member-nav-team1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    color: navy;
    margin: 5px;
    padding-left: 5px;
    padding-right: 5px;
  }


  .member-nav-team2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    color: navy;
    margin: 5px;
    padding-left: 5px;
    padding-right: 5px;

    background-color: #0bfafa;
    min-width: 180px;
    max-width: 180px;

    min-height: 180px;
    max-height: 180px;

    border: 1px solid rgb(23, 45, 240);
    border-radius: 10px;
  }

    .member-nav-team-a {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      color: navy;
      margin: 5px;
      padding-left: 5px;
      padding-right: 5px;

      background: linear-gradient(to top, rgb(24, 120, 245), rgb(49, 132, 214));
      min-width: 180px;
      max-width: 180px;

      min-height: 180px;
      max-height: 180px;

      border: 1px solid rgb(23, 45, 240);
      border-radius: 10px;


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

        min-width: 95%;
        max-width: 95%;
      
        min-height: 30px;
        max-height: 100px;

        border-radius: 10px;


      }
    }
    .member-nav-team3 {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      color: navy;
      margin: 5px;
      padding-left: 5px;
      padding-right: 5px;

      background-color: #95e009;
      min-width: 180px;
      max-width: 100%;

      min-height: 180px;
      max-height: 180px;

      border: 1px solid rgb(23, 45, 240);
      border-radius: 10px;
    }

  .member-nav-team1-image {
    color: navy;
    margin: 5px;
    padding: 2px;
    border: 1px solid white;
  }

  .member-nav-team1-username {
    background:  rgb(24, 245, 208);
    color: rgb(12, 12, 12);
    margin: 5px;
    padding: 5px;
    border: 1px solid white;
    min-width: 100px;
    max-width: 200px;
    border-radius: 1rem;
    
  }

  .inside-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    width: 80%;
  }



  .mymain-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    width: 100%;
    background-color: darkgreen;
  }



  .mymenu-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    color: navy;
    margin: 10px;


  }


  .two-buttons-form {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    margin: 10px;
    width: 80%;

  }

  .form-div {

     display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
   
    margin: 2px;
    padding: 2px;
    border-radius: 10px;


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

 

    background: linear-gradient(to top, rgb(24, 245, 208), rgb(7, 111, 230));



    
 @media screen and (max-width: 800px) {
     
      padding: 1px;
      margin: 1px;
      
      min-width: 95%;
      max-width: 100%;
    
      border-radius: 10px;



    }

    
  }


  .form-div1 {

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


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

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

    background: linear-gradient(to top, rgb(24, 245, 208), rgb(7, 111, 230));



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



    }

    
  }
  


  .long-button {
    width: 200px;
    size: 12px;
  }

  .words {
    color: navy;
    margin: 10px;
    border-radius: 3px;
    background-color: rgb(25, 243, 80);
    padding: 10px;
  }


  .homepagecontainer {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: top;
    flex-wrap: wrap;
    background: linear-gradient(to bottom, rgb(18, 223, 206), rgb(245, 246, 247));
    border-radius: 10px;
    min-width: 90%;
    max-width: 100%;
    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(12, 235, 235, 0.9), rgba(53, 158, 172, 0.9));
    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(13, 212, 196, 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;
      
      min-width: 95%;
      max-width: 100%;
    
      border-radius: 10px;



    }
    
    
  }

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

    border-radius: 10px;
    min-width: 350px;
    max-width: 99%;
    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(8, 243, 165, 0.1), rgba(23, 180, 233, 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(13, 212, 196, 0.37); 
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }



  .homepagebiggerbox {
    color: navy;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 10px;
    border-radius: 10px;
    background-repeat: no-repeat;
    padding: 50px;
    min-width: 380px;
    max-width: 380px;

  

    background: white;
    border-color: #c4cbcc;


    background: linear-gradient(135deg, rgba(8, 243, 165, 0.3), rgba(20, 190, 247, 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(13, 212, 196, 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: 10px;
      margin: 10px;
      
      min-width: 80%;
      max-width: 90%;
    
      border-radius: 10px;
  min-height: 300px;
    max-height: 600px;


    }
    
  }


  .homepagebiggerbox2 {
  
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    margin: 5px;
    border-radius: 10px;
    background-repeat: no-repeat;
    padding: 5%;
    min-width: 90%;
    max-width: 100%;
    min-height: 450px;
    max-height: 100%;
    border-color: #a7a4a4;

  }



  .homepagebiggerbox3 {
    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: 90%;
    max-width: 100%;
    min-height: 450px;
    max-height: 100%;
    border-color: #a7a4a4;

  }

  .paragraph-list-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(35, 218, 208));
    padding: 20px;
    align-self: center;

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

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

    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    
  
    background: linear-gradient(135deg, rgba(14, 226, 208, 0.9), rgba(14, 169, 216, 0.5));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(34, 154, 228, 0.18);
    box-shadow: 0 2px 2px 0 rgba(162, 163, 173, 0.37); 
    
    
     @media screen and (max-width: 800px) {
    
      padding: 5px;
      margin: 5px;
    
    
      height: 100%;
    

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


    }
    
   
  }



  .paragraph-list-div-a {
    display: flex;
    align-items: left;
    justify-content: top;
    flex-wrap: wrap;
    color: navy;
    margin: 22px;
    border-radius: 0px;
    background-color: #f9fafa;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 10px;
    padding: 15px;
    border: 1px rgb(214, 210, 210) solid;
    border-radius: 10px;
    margin: 5px;

  }


  .disclaimer-div {

    color: black;
    margin: 22px;
    border-radius: 0px;
    background-color: #f9fafa;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 20px;
    border: 1px rgb(214, 210, 210) solid;
    border-radius: 20px;
    margin: 5px;

  }


  .disclaimer-title {
    padding: 20px;
    margin: 20px;
    background-color: rgb(49, 132, 214);
    border: 1px solid black;
    border-radius: 10px;
  }



  .disclaimer-text {
    padding: 20px;
    margin: 20px;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    border: 1px solid black;
    border-radius: 10px;
  }




  .paragraph-title {

    
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
   
    min-width: 200px;
    max-width: 100%;

    padding: 5px;
    margin: 5px;


  font-size: 18px;
      
    background: linear-gradient(135deg, rgba(253, 253, 253, 0.1), rgba(18, 224, 224, 0.9));
    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: 5px;
      margin: 5px;
    
    
      height: 100%;
      border-radius: 20px;

      

      


    }
  }




  .paragraph-title:hover {
    background: rgb(3, 183, 189);
    color: rgb(246, 247, 248);
  }


  .paragraph-title2 {

    border: 1px rgb(24, 245, 208) solid;
    background: white;
    
    min-width: 70%;
    max-width: 400px;
    padding: 5px;
    margin: 5px;

    
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    
  
  
    background: linear-gradient(135deg, rgba(72, 226, 226, 0.9), rgba(248, 246, 246, 0.9));
    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); 

 border-radius: 20px;
    
    @media screen and (max-width: 800px) {
     
   
    min-width: 95%;
    max-width: 100px;
    
     border-radius: 20px;
    
    padding: 2px;
    margin: 2px;



    }

    
  }
  

  .paragraph-title3 {

    
    border: 1px rgb(24, 245, 208) solid;
    background: white;
    border-radius: 10px;
    min-width: 400px;
    max-width: 400px;
    padding: 10px;
    margin: 10px;

    
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    
  
  
    background: linear-gradient(135deg, rgba(72, 226, 226, 0.9), rgba(248, 246, 246, 0.9));
    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) {
     
   
    min-width: 90%;
    max-width: 100px;
    
    
    
    padding: 10px;
    margin: 10px;



    }

  }

  .homepagesmallbox {
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    color: navy;
    margin: 22px;
    border-radius: 20px;
    background-color: #f9fafa;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 15px;
    
    min-width: 300px;
    max-width: 300px;

    min-height: 350px;
    max-height: 350px;
    border-color: #277bc9;

    
    
      
  
    background: linear-gradient(135deg, rgba(8, 243, 165, 0.9), rgba(20, 190, 247, 0.9));
    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) {
       border: 1px rgb(24, 245, 208) solid;
    background: white;
    border-radius: 10px;
    min-width: 70%;
    max-width: 400px;
    
    min-height: 200px;
    max-height: 600px;
    
    
    padding: 5px;
    margin: 5px;

    
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    
  
  
    background: linear-gradient(135deg, rgba(72, 226, 226, 0.9), rgba(248, 246, 246, 0.9));
    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); 


   


    }

  }


  .fullpagebox {
    width: 100%;
    height: 100%;
    padding: 20px;
  }


  /* ADMIN DASHBOARD   */

  .adminbigcontainer {
    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: 10px;
    padding: 2px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    min-width: 95%;
    max-width: 99%;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }

  .memberbigcontainer {
    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;
    min-width: 60%;
    max-width: 90%;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }

  .memberbigcontainer1 {
    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: 20px;
    padding: 20px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    min-width: 90%;
    max-width: 100%;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }
  .memberbigcontainer2 {
   
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(239, 240, 241));
    margin: 20px;
    padding: 20px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    min-width: 60%;
    max-width: 100%;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }

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

  }



  .adminform {

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

    background: linear-gradient(to top, rgb(247, 248, 248), rgb(49, 132, 214));
    min-width: 90%;
    max-width: 95%;
    padding: 3px;
    margin: 3px;
     border-radius: 10px;

  }

  .adminlongstripleft {
    background-color: #1449aa;
    width: 200px;
    margin: 5px;
    padding: 5px;

  }



  .adminpayments-divbox {
    display: flex;
    align-items: left;
    justify-content: left;
    flex-wrap: wrap;
    min-width: 50%;
    max-width: 100%;
    background-color: #34d6f3;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    min-height: 100px;
    max-height: 300px;


  }


  .adminsubmissions-button {
    width: 80px;
    margin: 5px;
    padding: 3px;
    height: 30px;
    background-color: #f7c111;
  }

  .adminpayments-div {
    display: flex;
    align-items: left;
    justify-content: left;
    flex-wrap: wrap;

    margin: 2px;
    padding: 2px;
    border-radius: 5px;
    min-width: 120px;
    max-width: 120px;
    font-size: 18px;
    min-height: 30px;
    max-height: 50px;
    background: linear-gradient(to top, rgb(82, 231, 231), rgb(234, 235, 236));

  }

  .adminpayments-div-id {
    display: flex;
    align-items: left;
    justify-content: left;
    flex-wrap: wrap;

    margin: 2px;
    padding: 2px;
    border-radius: 5px;
    min-width: 20px;
    max-width: 50px;
    font-size: 18px;
    min-height: 30px;
    max-height: 50px;
    background: linear-gradient(to top, rgb(82, 231, 231), rgb(234, 235, 236));
  }


  .adminpayments-div-email {
    display: flex;
    align-items: left;
    justify-content: left;
    flex-wrap: wrap;
    background-color: #f1fcfc;
    margin: 2px;
    padding: 2px;
    border-radius: 5px;
    min-width: 250px;
    max-width: 250px;
    font-size: 18px;
    min-height: 30px;
    max-height: 50px;
    background: linear-gradient(to top, rgb(238, 241, 241), rgb(234, 235, 236));
  }




  .topnav {
    background-color: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    border: 1px #ffffff solid;
    border-radius: 10px;
    margin: 10px;
    padding-bottom: 20px;
  }

  .middlenav {
    background-color: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    margin: 10px;
    padding-bottom: 20px;
  }

  .bottomnav {
    background-color: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    margin: 10px;
    padding-bottom: 20px;
  }

 

  .adminbutton {
    width: 100px;
  }

  #welcome-button1 {
    width: 80px;
    background-color: #1449aa;
    color: whitesmoke;
  }



  #submit-goals {
    width: 80px;
    background-color: rgb(25, 243, 80);
  }

  .tips-team-td {
    background-color: white;
    border: 1px solid rgb(25, 243, 80) solid;
  }

  /*END OF WRAPS & BOX DIVS  







        /*CLIENT DASHBOARD */

  .clientdashboard-bigdiv {
    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: 2px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    min-width: 80%;
    max-width: 100%;
  }

  .clientdashboard-smalldiv-1 {
    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: 2px;
    border: 1px rgb(28, 214, 228) solid;
    border-radius: 10px;
    min-width: 80%;
    max-width: 100%;

    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    box-shadow: -1px 0 2px rgba(2, 0.5, 1.5, 0.005);
  }

  .clientdashboard-smalldiv-2 {
    min-width: 40%;
    max-width: 40%;
    min-height: 200px;
    background-color: rgba(255, 255, 0, 0.575);
    box-shadow: -1px 0 2px yellow;
    margin: 10px;


  }

  .clientdashboard-smalldiv-3 {
    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    margin-top: 20px;
    margin-left: 10px;
    padding: 10px;
    border: 1px rgb(54, 54, 54) solid;
    border-radius: 10px;
    min-width: 90%;
    max-width: 90%;
    min-height: 300px;
  }









  @media screen and (max-width: 700px) {
    .clientdashboard-bigdiv {
      display: flex;
      align-items: center;
      justify-content: top;
      flex-wrap: wrap;
      background-color: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
      margin: 5px;
      padding: 2px;
      border: 1px rgb(28, 214, 228) solid;
      border-radius: 10px;
      min-width: 80%;
      max-width: 100%;
    }


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

      width: 100%;
      height: 100%;
      background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
      box-shadow: -1px 0 2px rgba(2, 0.5, 1.5, 0.005);
    }

    .clientdashboard-smalldiv-2 {
      min-width: 40%;
      max-width: 40%;
      min-height: 200px;
      background-color: rgba(255, 255, 0, 0.575);
      box-shadow: -1px 0 2px yellow;
      margin: 10px;
    }


    .clientdashboard-smalldiv-3 {

      background-color: rgba(255, 255, 0, 0.575);
      margin-top: 20px;
      margin-left: 10px;
      padding: 10px;
      border: 1px rgb(54, 54, 54) solid;
      border-radius: 10px;
      min-width: 90%;
      max-width: 90%;
      min-height: 300px;
    }

  }

  /*END OF CLIENT DASHBOARD */



  /* INVOICE */
  .invoicediv {
    background-color: #f5f5f5;
    border: 1px solid rgb(79, 116, 216);
    border-radius: 10px;
    margin: 20px;
    padding: 10px;

  }

  .invoice-table {
    background-color: rgb(79, 116, 216);
    margin: 10px;
    padding: 10px;
    border: 1px swhite solid;
    border-radius: 10px;
    min-width: 70%;
    max-width: 70%;

  }

  .invoice-tr {
    background-color: white;
    margin: 10px;
    padding: 10px;
  }


  .invoicerow {
    background-color: white;
    margin: 10px;
    padding: 10px;
  }



  /* END OF INVOICE */


  /* RECOVERIES   */


  .recoverybutton {
    width: 100px;
  }

  #submit-recovery {
    max-width: 130px;
    min-width: 60px;
    color: #f5f5f5;
    background-color: #1449aa;
  }


  .recoverysmallbox {
    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;

  }

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

  }

  .recoveryrowtitle {
    background-color: #c1cad3;
    border: 1px solid white;
    border-radius: 5px;
    margin: 2px;
    padding: 5px;
    color: black;
    width: 160px;
    height: 25px;
  }

  .recoveryoutput {
    background-color: #f5f5f5;
    border: 1px solid rgb(127, 126, 129);
    border-radius: 5px;
    margin: 2px;
    padding: 5px;
    color: black;
    width: 60px;
    height: 25px;
  }

  .recoveryscalarstable {
    display: flex;
    align-items: center;
    justify-content: top;
    flex-wrap: wrap;
    background-color: rgb(79, 116, 216);
    margin: 2px;
    padding: 3px;
    border: 1px rgb(25, 243, 80) solid;
    border-radius: 10px;
    min-width: 90%;
    max-width: 100%;
  }

  #fee {
    width: 80px;
  }

  .recovery-tips-table {

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

  }

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

  }






  /* PAYMENT METHODS PAGES */

  .choicebox-paymentreg {

    background: linear-gradient(to top, rgb(24, 245, 208), rgb(49, 132, 214));
    margin: 10px;
    padding: 20px;
    border: 1px yellow;
    border-radius: 10px;
    min-width: 90%;
    max-width: 90%;

  }

  .choicebox-paymentreg2 {

    background-color: white;
    margin: 10px;
    padding: 10px;
    border: 1px rgb(25, 243, 80) solid;
    border-radius: 10px;
    min-width: 80%;
    max-width: 80%;

  }




  .choicebox-paymentreg3 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background: linear-gradient(to top, rgb(23, 235, 199), rgb(239, 240, 241));
    margin: 5px;
    padding: 10px;
    border: 2px yellow;
    border-radius: 10px;
    min-width: 80%;
    max-width: 100%;


  }


  .next {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    min-width: 1%;
    max-width: 1%;
    color: rgb(49, 132, 214);
    font-size: 1px;


  }

  #next {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    min-width: 1%;
    max-width: 1%;
    color: rgb(49, 132, 214);
    font-size: 1px;


  }

  #next1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    min-width: 1%;
    max-width: 1%;
    color: rgb(49, 132, 214);
    font-size: 1px;


  }