.center-text {


    padding: 15px;
    border: 1px;
    width: 70%;
    display: grid;
    grid-template-columns: auto auto;
    margin-left: auto;
    margin-right: auto;

  }
  .center-div {
    height: 5em;
    display: flex;
    align-items: center;
    justify-content: center;

  }
  .plancontainer{
    width: 90%;
    display: block;
    background: red;
    margin-right: 4rem;
    margin-left: 4rem;
}

.plan-grid {
    display: grid;
    grid-template-columns: 25.3% 25.3% 25.3% 25.3% ;
    background-color: white;
    grid-row-gap:15px;
    grid-column-gap:15px;
    align-items:center;

  }
  .plan-grid >div {
    background-color:#FFFFFF;;
    border: 1px;
    padding: 10px;
    font-size: 30px;
    height:-webkit-fill-available;
    border-radius: 5px;
    /* box-shadow: 0px 0px 15px rgba(0, 52, 89, 0.25); */
    /* box-shadow: 0px 0px 15px rgba(0, 52, 89, 0.25); */
    /* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
     /* box-shadow: 0px 50px 100px -20px rgba(50, 50, 93, 0.25) ; */
     /* box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px; */
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    /* box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px; */
    display: grid;
  }

  .icons1{
    padding-right: 0rem !important;
    padding:0.2vh;
   }
   .icons1-width{
       width:35px;
   }
   .grid-text{
     font-size: 15px;
     margin-bottom: 0rem;
     color: #AFA9A9;
     margin-left: 0.2rem;
   }
   .planhr{
       margin-top:1rem;
       border-top: 2px solid black;
   }
   .heading-box{
    display: inline;
    margin:2% 0% 1% 1%;
    font-size: 20px;
   }
   .sub-heading{
       font-size:20px;
       display: inline;
   }
   .date-box{

    width: fit-content;
    font-family: arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    outline: none;
    border: 0;
    color:black;
    margin-left: 5rem;
   }
   .startlabel{
       font-size: 0.8rem;
   }
   .date-section{
       margin-top:-1rem;
       display: grid;
       grid-template-rows:5% 80% 15% ;
       /* height:26vh */
   }
   .center-buttons{
    background-color: #fefefe;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    border: 1px;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
   }
   .open-button {
    background-color: #555;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    opacity: 0.8;
    position: fixed;
    bottom: 23px;
    right: 28px;
    width: 280px;
  }

  /* The popup form - hidden by default */
  .form-popup {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }

  /* Add styles to the form container */
  .form-container {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 25%; /* Could be more or less, depending on screen size */
    border-radius: 8px;
  }

  /* Full-width input fields */
  .form-container input[type=text],.form-container input[type=date]{
    width: 100%;
    padding: 2px 5px;
    margin: 5px 0;
    border: none;
    border-bottom: 2px solid black;
  }

  /* When the inputs get focus, do something */
  .form-container input[type=text]:focus {
    background-color: #ddd;
    outline: none;
  }
  .button-end{
      margin-left: 32%;
      padding: 1%;

  }
.divider{
    width:10%;
      height:auto;
      display:inline-block;
}
.closeButton {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    position: relative;
    float: right;
    top: 0;
    left:0;
    margin-top: -1rem;
  }

  .closeButton:hover,
  .closeButton:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
  /* .t1t1{
    font-size: 30px;
} */
.label-size-small>textarea{
    max-width: -webkit-fill-available;
    min-width: 30%;
}
@media screen and (max-width: 1800px) {
    .center-text {

        margin-left: auto;
        margin-right: auto;
        padding: 15px;
        border: 1px;
        width: 70%;

      }
      .center-div {
        height: 5em;
        display: flex;
        align-items: center;
        justify-content: center;

      }
      .plancontainer{
        width: 90%;
        display: block;
        background: red;
        margin-right: 4rem;
        margin-left: 4rem;
    }

    .plan-grid {
        display: grid;
        grid-template-columns: 25% 25% 25% 25% ;
        background-color: white;
        grid-row-gap:15px;
        grid-column-gap:15px;
        align-items:center;
      }
      .plan-grid >div {
        background-color:#FFFFFF;;
        border: 1px;
        padding: 10px;
        font-size: 30px;

        border-radius: 5px;
        box-shadow: 0px 0px 15px rgba(0, 52, 89, 0.25);
      }

      .icons1{
        padding-right: 0rem !important;
        padding:0.2vh;
       }
       .icons1-width{
           width:30px;
       }
       .grid-text{
         font-size: 14px;
         margin-bottom: 1rem;
         color: #AFA9A9;
         margin-left: 0.2rem;
       }
       .heading-box{
        display: inline;
        margin:5% 33% 10% 1%
       }
       .sub-heading{
           font-size:16px;
           display: inline;
       }
       .date-box{

        width: fit-content;
        font-family: arial, sans-serif;
        font-size: 15px;
        font-weight: bold;
        text-transform: uppercase;
        outline: none;
        border: 0;
        color:black;
        margin-left: 4rem;
       }
       .date-section{
           margin-top:-1rem;
       }
       .center-buttons{
        background-color: #fefefe;
        margin-left: auto;
        margin-right: auto;
        padding: 5px;
        border: 1px;
        width: 50%;
       }

}
@media screen and (max-width: 1500px) {
    .center-text {

        margin-left: auto;
        margin-right: auto;
        padding: 15px;
        border: 1px;
        width: 70%;

      }
      .center-div {
        height: 5em;
        display: flex;
        align-items: center;
        justify-content: center;

      }
      .plancontainer{
        width: 90%;
        display: block;
        background: red;
        margin-right: 4rem;
        margin-left: 4rem;
    }

    .plan-grid {
        display: grid;
        grid-template-columns: 25% 25% 25% 25% ;
        background-color: white;
        grid-row-gap:15px;
        grid-column-gap:15px;
        align-items:center;
      }
      .plan-grid >div {
        background-color:#FFFFFF;;
        border: 1px;
        padding: 10px;
        font-size: 30px;

        border-radius: 5px;
        box-shadow: 0px 0px 15px rgba(0, 52, 89, 0.25);
      }

      .icons1{
        padding-right: 0rem !important;
        padding:0.2vh;
       }
       .icons1-width{
           width:26px;
       }
       .grid-text{
         font-size: 12px;
         margin-bottom: 1rem;
         color: #AFA9A9;
         margin-left: 0.2rem;
       }
       .heading-box{
        display: inline;
        margin:5% 25% 10% 1%
       }
       .sub-heading{
           font-size:15px;
           display: inline;
       }
       .date-box{

        width: fit-content;
        font-family: arial, sans-serif;
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        outline: none;
        border: 0;
        color:black;
        margin-left: 4rem;
       }
       .date-section{
           margin-top:-1rem;
       }
       .center-buttons{
        background-color: #fefefe;
        margin-left: auto;
        margin-right: auto;
        padding: 5px;
        border: 1px;
        width: 60%;
       }

}
@media screen and (max-width: 1400px) {
    .center-text {

        margin-left: auto;
        margin-right: auto;
        padding: 15px;
        border: 1px;
        width: 70%;

      }
      .center-div {
        height: 5em;
        display: flex;
        align-items: center;
        justify-content: center;

      }
      .plancontainer{
        width: 90%;
        display: block;
        background: red;
        margin-right: 4rem;
        margin-left: 4rem;
    }

    .plan-grid {
        display: grid;
        grid-template-columns: 24% 24% 24% 24%;
        background-color: white;
        grid-row-gap:15px;
        grid-column-gap:15px;
        align-items:center;
      }
      .plan-grid >div {
        background-color:#FFFFFF;;
        border: 1px;
        padding: 10px;
        font-size: 30px;

        border-radius: 5px;
        box-shadow: 0px 0px 15px rgba(0, 52, 89, 0.25);
      }

      .icons1{
        padding-right: 0rem !important;
        padding:0.2vh;
       }
       .icons1-width{
           width:26px;
       }
       .grid-text{
         font-size: 12px;
         margin-bottom: 1rem;
         color: #AFA9A9;
         margin-left: 0.2rem;
       }
       .heading-box{
        display: inline;
        margin:5% 30% 10% 1%;
        font-size:17px;
       }
       .sub-heading{

           display: inline;
       }
       .date-box{

        width: fit-content;
        font-family: arial, sans-serif;
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        outline: none;
        border: 0;
        color:black;
        margin-left: 2rem;
       }
       .date-section{
           margin-top:-1rem;
       }
       .center-buttons{
        background-color: #fefefe;
        margin-left: auto;
        margin-right: auto;
        padding: 5px;
        border: 1px;
        width: 70%;
       }

}

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

        margin-left: auto;
        margin-right: auto;
        padding: 15px;
        border: 1px;
        width: 80%;

      }
      .center-div {
        height: 5em;
        display: flex;
        align-items: center;
        justify-content: center;

      }
      .plancontainer{
        width: 90%;
        display: block;
        background: red;
        margin-right: 4rem;
        margin-left: 4rem;
    }

    .plan-grid {
        display: grid;
        grid-template-columns: 24% 24% 24% 24%;
        background-color: white;
        grid-row-gap:15px;
        grid-column-gap:15px;
        align-items:center;
      }
      .plan-grid >div {
        background-color:#FFFFFF;;
        border: 1px;
        padding: 10px;
        font-size: 30px;

        border-radius: 5px;
        box-shadow: 0px 0px 15px rgba(0, 52, 89, 0.25);
      }

      .icons1{
        padding-right: 0rem !important;
        padding:0.2vh;
       }
       .icons1-width{
           width:26px;
       }
       .grid-text{
         font-size: 12px;
         margin-bottom: 1rem;
         color: #AFA9A9;
         margin-left: 0.2rem;
       }
       .heading-box{
        display: inline;
        margin:5% 30% 10% 1%;
        font-size:17px;
       }
       .sub-heading{

           display: inline;
       }
       .date-box{

        width: -webkit-fill-available;
        font-family: arial, sans-serif;
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        outline: none;
        border: 0;
        color:black;
        margin-left: 2rem;
       }
       .date-section{
           margin-top:-1rem;
       }
       .center-buttons{
        background-color: #fefefe;
        margin-left: auto;
        margin-right: auto;
        padding: 5px;
        border: 1px;
        width: 70%;
       }

}
@media screen and (max-width: 1200px) {
    .center-text {

        margin-left: auto;
        margin-right: auto;
        padding: 15px;
        border: 1px;
        width: 80%;

      }
      .centertextitem{
        font-size: 18px;
    }
      .center-div {
        height: 5em;
        display: flex;
        align-items: center;
        justify-content: center;

      }
      .plancontainer{
        width: 90%;
        display: block;
        background: red;
        margin-right: 4rem;
        margin-left: 3rem;
    }

    .plan-grid {
        display: grid;
        grid-template-columns: 33% 33% 33%;
        background-color: white;
        grid-row-gap:15px;
        grid-column-gap:15px;
        align-items:center;
      }
      .plan-grid >div {
        background-color:#FFFFFF;;
        border: 1px;
        padding: 10px;
        font-size: 30px;

        border-radius: 5px;
        box-shadow: 0px 0px 15px rgba(0, 52, 89, 0.25);
      }

      .icons1{
        padding-right: 0rem !important;
        padding:0.2vh;
       }
       .icons1-width{
           width:26px;
       }
       .grid-text{
         font-size: 12px;
         margin-bottom: 1rem;
         color: #AFA9A9;
         margin-left: 0.2rem;
       }
       .heading-box{
        display: inline;
        margin:5% 40% 10% 1%;
        font-size:17px;
       }
       .sub-heading{

           display: inline;
       }
       .date-box{

        width: -webkit-fill-available;
        font-family: arial, sans-serif;
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        outline: none;
        border: 0;
        color:black;
        margin-left: 2rem;
       }
       .date-section{
           margin-top:-1rem;
       }
       .center-buttons{
        background-color: #fefefe;
        margin-left: auto;
        margin-right: auto;
        padding: 5px;
        border: 1px;
        width: 50%;
       }
       .form-container {
        background-color: #fefefe;

        width: 40%; /* Could be more or less, depending on screen size */




      }

}


@media screen and (max-width: 1100px) {
    .center-text {

        margin-left: auto;
        margin-right: auto;
        padding: 15px;
        border: 1px;
        width: 80%;

      }
      .centertextitem{
        font-size: 18px;
    }
      .center-div {
        height: 5em;
        display: flex;
        align-items: center;
        justify-content: center;

      }
      .plancontainer{
        width: 90%;
        display: block;
        background: red;
        margin-right: 4rem;
        margin-left: 3rem;
    }

    .plan-grid {
        display: grid;
        grid-template-columns: 32% 32% 32%;
        background-color: white;
        grid-row-gap:15px;
        grid-column-gap:15px;
        align-items:center;
      }
      .plan-grid >div {
        background-color:#FFFFFF;;
        border: 1px;
        padding: 10px;
        font-size: 30px;

        border-radius: 5px;
        box-shadow: 0px 0px 15px rgba(0, 52, 89, 0.25);
      }

      .icons1{
        padding-right: 0rem !important;
        padding:0.2vh;
       }
       .icons1-width{
           width:26px;
       }
       .grid-text{
         font-size: 12px;
         margin-bottom: 1rem;
         color: #AFA9A9;
         margin-left: 0.2rem;
       }
       .heading-box{
        display: inline;
        margin:5% 20% 10% 1%;
        font-size:17px;
       }
       .sub-heading{

           display: inline;
       }
       .date-box{

        width: -webkit-fill-available;
        font-family: arial, sans-serif;
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        outline: none;
        border: 0;
        color:black;
        margin-left: 2rem;
       }
       .date-section{
           margin-top:-1rem;
       }
       .center-buttons{
        background-color: #fefefe;
        margin-left: auto;
        margin-right: auto;
        padding: 5px;
        border: 1px;
        width: 70%;
       }


}

  @media screen and (max-width: 870px) {
    .center-text {
        padding: 0px;
        border: 1px;
        margin-left: 14%;
        font-size: 10px;
        margin-top: 15px;
      }
    .centertextitem{
        font-size: 15px;
    }

      .plancontainer{
        width: 90%;

        display: block;
        background: red;
        margin-right: 1rem;
        margin-left: 2.9rem;
    }
    .plan-grid {
        display: grid;
        grid-template-columns: 45% 45%;
        background-color: white;
        grid-row-gap:15px;
        grid-column-gap:15px;
        align-items:center;
      }
      .plan-grid >div {
        background-color:#FFFFFF;;
        border: 1px;
        padding: 10px;
        font-size: 30px;

        border-radius: 5px;
        box-shadow: 0px 0px 15px rgba(0, 52, 89, 0.25);
      }
      .icons1{
        padding-right: 0rem !important;
        padding:0.2vh;
       }
       .grid-text{
         font-size: 15px;
         margin-bottom: 1rem;
         color: #AFA9A9;
         margin-left: 0.2rem;
       }
       .icons1-width{
           width: 27px;
       }
       .heading-box{
        display: inline;
        margin:3% 30% 10% 1%;
        font-size: 18px;
       }
       .sub-heading{
           font-size:15px;
           display: inline;
       }
       .date-box{
        display: block;
        width: -webkit-fill-available;
        font-family: arial, sans-serif;
        font-size: 15px;
        font-weight: bold;
        text-transform: uppercase;
        outline: none;
        border: 0;
        color:black;
        margin-left: 7rem;
        margin-top: -2rem;
       }
       .date-section{
           margin-top:-1rem;
       }
       .center-buttons{
        background-color: #fefefe;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0.6rem;
        padding: 5px;
        border: 1px;
        width: 70%;
       }
       .open-button {
        background-color: #555;
        color: white;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        opacity: 0.8;
        position: fixed;
        bottom: 23px;
        right: 28px;
        width: 280px;
      }
      .form-popup {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
      }

      /* Add styles to the form container */
      .form-container {
        background-color: #fefefe;
        margin: 15% auto; /* 15% from the top and centered */
        padding: 20px;
        border: 1px solid #888;
        width: 55%; /* Could be more or less, depending on screen size */
        border-radius: 8px;



      }


      .form-container input[type=text],.form-container input[type=date]{
        width: 100%;
        padding: 2px 5px;
        margin: 5px 0;
        border: none;
        border-bottom: 2px solid black;
      }

      /* When the inputs get focus, do something */
      .form-container input[type=text]:focus {
        background-color: #ddd;
        outline: none;
      }

  }
  @media screen and (max-width: 600px) {
    .center-text {
        padding: 0px;
        border: 1px;
        margin-left: 10%;
        font-size: 10px;
        width: 80%;
      }
    .centertextitem{
        font-size: 16px;
    }

      .plancontainer{
        width: 90%;

        display: block;
        background: red;
        margin-right: 1rem;
        margin-left: 1rem;
    }
    .plan-grid {
        display: grid;
        grid-template-columns: auto;
        background-color: white;
        grid-row-gap:15px;
        grid-column-gap:15px;
        align-items:center;
      }
      .plan-grid >div {
        background-color:#FFFFFF;;
        border: 1px;
        padding: 10px;
        font-size: 30px;

        border-radius: 5px;
        box-shadow: 0px 0px 15px rgba(0, 52, 89, 0.25);
      }
      .icons1{
        padding-right: 0rem !important;
        padding:0.2vh;
       }
       .grid-text{
         font-size: 15px;
         margin-bottom: 1rem;
         color: #AFA9A9;
         margin-left: 0.2rem;
       }
       .icons1-width{
           width: 30px;
       }
       .heading-box{
        display: inline;
        margin:3% 30% 10% 1%;
        font-size: 18px;
       }
       .sub-heading{
           font-size:15px;
           display: inline;
       }
       .date-box{
        display: block;
        width: -webkit-fill-available;
        font-family: arial, sans-serif;
        font-size: 15px;
        font-weight: bold;
        text-transform: uppercase;
        outline: none;
        border: 0;
        color:black;
        margin-left: 7rem;
        margin-top: -2rem;
       }
       .date-section{
           margin-top:-1rem;
       }
       .center-buttons{
        background-color: #fefefe;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0.6rem;
        padding: 5px;
        border: 1px;
        width: 70%;
       }
       .open-button {
        background-color: #555;
        color: white;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        opacity: 0.8;
        position: fixed;
        bottom: 23px;
        right: 28px;
        width: 280px;
      }
      .form-popup {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
      }

      /* Add styles to the form container */
      .form-container {
        background-color: #fefefe;
        margin: 15% auto; /* 15% from the top and centered */
        padding: 20px;
        border: 1px solid #888;
        width: 55%; /* Could be more or less, depending on screen size */
        border-radius: 8px;



      }


      .form-container input[type=text],.form-container input[type=date]{
        width: 100%;
        padding: 2px 5px;
        margin: 5px 0;
        border: none;
        border-bottom: 2px solid black;
      }

      /* When the inputs get focus, do something */
      .form-container input[type=text]:focus {
        background-color: #ddd;
        outline: none;
      }

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

    .centertextitem{
        font-size: 12px;
    }
    .center-text {
        padding: 0px;
        border: 1px;
        margin-left: 12%;
        font-size: 10px;
        width: 70%;
      }

      .icons1{
        padding-right: 0rem !important;
        padding:1vh;
       }
       .grid-text{
         font-size: 9px;
         margin-bottom: 1rem;
         color: #AFA9A9;
         margin-left: 0.2rem;
       }
       .icons1-width{
           width: 27px;
           margin-top:  5%;
       }
       .heading-box{
        display: inline;
        margin:10% 20% 10% 1%;
        font-size: 14px;
       }
       .sub-heading{
           font-size:15px;
           display: inline;
       }
       .startlabel{
        font-size: 0.6rem;
    }
       .date-box{
        display: block;
        width: -webkit-fill-available;
        font-family: arial, sans-serif;
        font-size: 8px;
        font-weight: bold;
        text-transform: uppercase;
        outline: none;
        border: 0;
        color:black;
        margin-left: 4.5rem;
        margin-top: -1.5rem;
       }
       .date-section{
           margin-top:-1rem;
       }
       .center-buttons{
        background-color: #fefefe;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0.6rem;
        padding: 5px;
        border: 1px;
        width: 46%;
       }
       .open-button {
        background-color: #555;
        color: white;
        padding: 16px 20px;
        border: none;
        cursor: pointer;
        opacity: 0.8;
        position: fixed;
        bottom: 23px;
        right: 28px;
        width: 280px;
      }
      .h1-size-small{
        font-size: 12px;
        font-weight: bolder;
    }
    .label-size-small{
        font-size: 10px;
    }
    .button-end{
        margin-left: 10%;
        padding: 1%;

    }
    .form-container{
        margin-top: 50%;
    }
    .divider{
        width:5%;
          height:auto;
          display:inline-block;
    }
    }