#codeFormIdentifier .grid-card{
    display: grid;
    grid-gap: 1em;
    margin: 0 auto;
    max-width: 100%;
    padding: 0;
    margin-left: 0;

 }
 @media (min-width: 42em) {
    #codeFormIdentifier .grid-card{
       grid-template-columns: repeat(2, 1fr);
    }
 }

 #codeFormIdentifier .plan-details-format img{
    width: 100%;
    height: auto;
 }

@media (max-width: 1100px) {
   .ecopharma-margin {
      margin: 0.5em 0 !important;
    }

    .navbar {
      margin-bottom: 0 !important;
   }
}

 @media (max-width: 1000px) {
   body{
      padding-bottom: 0;
   }

   .navbar {
      margin-bottom: 0 !important;
   }

   #code{
      margin-bottom: 8px !important;
   }

   .space{
      display: none;
   }

   #codeFormIdentifier .grid-card{
      max-width: 100%;
      grid-template-columns: repeat(1, 1fr);
   }

   #codeFormIdentifier .plan-details-format img{
      width: 50%;
      height: auto;
      margin: auto;
   }

   .ecopharma-margin {
      margin: 0.5em 0 !important;
   }
 }

 #codeFormIdentifier .card {
    background-color: #fff;
    border-radius: 0.5em;
    position: relative;
    height: fit-content;

 }
 #codeFormIdentifier .card:hover {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
 }

 #codeFormIdentifier .card-format{
    height: 100%;
    min-height: 100%;
 }

 #codeFormIdentifier .radio {
    font-size: inherit;
    margin: 0;
    position: absolute;
    right: calc(1em + 2px);
    top: calc(1em + 2px);
 }

 @supports (-webkit-appearance: none) or (-moz-appearance: none) {
    .radio {
       -webkit-appearance: none;
       -moz-appearance: none;
       background: #fff;
       border: 2px solid #e2ebf6;
       border-radius: 50%;
       cursor: pointer;
       height: 1.5em;
       outline: none;
       transition: background 0.2s ease-out, border-color 0.2s ease-out;
       width: 1.5em;
       display: none;


    }
    .radio::after {
       border: 2px solid #fff;
       border-top: 0;
       border-left: 0;
       content: "";
       display: block;
       height: 0.75rem;
       left: 25%;
       position: absolute;
       top: 50%;
       transform: rotate(45deg) translate(-50%, -50%);
       width: 0.375rem;
    }
    .radio:checked {
       background: #5AAB25;
       border-color: #5AAB25;
    }

    .card:hover .radio {
       border-color: #c4d1e1;

    }
    .card:hover .radio:checked {
       border-color: #5AAB25;
    }
 }

 #codeFormIdentifier .plan-details {
    border: 2px solid #e2ebf6;
    border-radius: 0.5em;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    padding: 1em;
    transition: border-color 0.2s ease-out;
 }

 #codeFormIdentifier .plan-details-format{
    height: 100%;
 }

 #codeFormIdentifier .card:hover .plan-details {
    border-color: #c4d1e1;
 }

 #codeFormIdentifier .radio:checked ~ .plan-details {
    border-color: #5AAB25;
 }

 #codeFormIdentifier .radio:checked ~ .plan-details-amount {
    background-color: #5AAB25;
    color: white;
 }

 #codeFormIdentifier .radio:focus ~ .plan-details {
    box-shadow: 0 0 0 2px #c4d1e1;
 }

 #codeFormIdentifier .radio:disabled ~ .plan-details {
    color: #c4d1e1;
    cursor: default;
 }

 #codeFormIdentifier .radio:disabled ~ .plan-details .plan-type {
    color: #c4d1e1;
 }

 #codeFormIdentifier .card:hover .radio:disabled ~ .plan-details {
    border-color: #e2ebf6;
    box-shadow: none;
 }

 #codeFormIdentifier .card:hover .radio:disabled {
    border-color: #e2ebf6;
 }

 #codeFormIdentifier .plan-type {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1em;
 }

 #codeFormIdentifier .plan-type-format{
    padding-top: 0 !important;
    padding-bottom: 1em;
 }