.justify-center {
    display: flex; /* Make the container a flexbox */
    justify-content: center; /* Center the items horizontally */
    gap: 5rem; /* Space between the links */
    width: 100%; /* Make the div take full width */
    max-width: 300px; /* Set a max-width for better centering */
    margin: 0 auto; /* Center the div itself horizontally within its container */
}


/* .bg-xgreen{
    background-color:#006242; 
}
 */

/**                         button color utitlty                        **/
 
.text-green {
    color: #006242 !important;
}
.bg-green {
    background-color: #006242 !important;
}
.border-green {
    border-color: #006242 !important;
}
.btn-green {
    color: #fff;
    background-color: #006242;
    border-color: #006242;
}
.btn-green:hover {
    color: #fff;
    background-color: darken(#006242, 10%) !important;
    border-color: darken(#006242, 12%) !important;
}

.menu-title{
    color: white !important;
}

.error{
    color: #bd371c;
}
.menu-link:hover{
    background-color:#ffffff17;
}
 
.menu-active{
    background-color:#00000030;
}
 
.homeicon{
    display:flex;
    justify-content:space-between;
  
}

.app-sidebar-menu hr{
    border-color:#fff;
}

@media (min-width: 992px) {
    .app-container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}

.btn-group span{
    padding-left:10px !important;
    padding-bottom:10px !important;
}

.failx{
    font-size:24px; 
    color:red; 
    font-weight:bolder;
    display:block;  
    border:solid 1px black;
}


.homeheader{
    padding-top:15px; 
    padding-bottom:15px;
    height:auto !important;
    color: #fff;
}

.homeheader h1{
    color:#fff !important;
}

.cropimg > *{ 
    border:solid 7px #eaeaea;
    margin-right:20px;
    float:left;
}
.cropimg .bigimg{
    width:600px; 
}
.cropimg .smallimg{
    width:100px;  
    min-height:60px;
    overflow:hidden;
}



.bigimg > img{
    width:100%;
}

.xgroup{
    position:relative;
}

.addicon{
    border-radius:40px;
    padding:1px 7px;
    position:absolute;
    top:10px; 
    right:-10px;
    display:block; 
    font-size:15px;
    color:#fff;
    font-weight:bolder; 
}


.sidebm{
 
    flex-direction:column;
    height:100%; 
    justify-content:space-between;
}

.growbox{
    flex-grow: 1; 
    /* border:solid 3px yellow; */
}


.menutplg{
    display:flex; 
    flex-direction:column;
    justify-content:center;
    font-size:20px;
    color:#fff;
}

@media only screen and (max-width: 480px) {
   /* Styles for mobile devices */
    .menutplg{
       display:none;
    }
 }


 .step-line .mt-step-col {
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
}

.step-line .first .mt-step-title:before,
.step-line .last .mt-step-title:after {
    content: none;
}

.step-line .done .mt-step-number {
    color: #26C281 !important;
    border-color: #26C281 !important;
}

.step-line .done .mt-step-title {
    color: #26C281 !important;
}

.step-line .active .mt-step-number {
    color: #32c5d2 !important;
    border-color: #32c5d2 !important;
}

.step-line .active .mt-step-title {
    color: #32c5d2 !important;
}




/*** *******************************************************           progress bar.            ***************************************************88888  ***/

ol.stepper {
    --default-b: #eaeaea;
    --default-c: black;
    --active-b:  #006242 ;
    --active-c: white;
    --circle: 3em; /* size of circle */
    --b: 2px; /* line thickness */
    
    display: flex;
    list-style: none;
    justify-content: space-between;
    background: 
      linear-gradient(var(--default-b) 0 0) no-repeat
      50% calc((var(--circle) - var(--b))/2)/100% var(--b);
    counter-reset: step;
    margin: 20px;
    padding: 0;
    font-size: 15px;
    font-weight: bold;
    counter-reset: step;
    overflow: hidden;
  }
  ol.stepper li {
    display: grid;
    place-items: center;
    gap: 5px;
    font-family: sans-serif;
    position: relative;
  }
  ol.stepper li::before {
    content: counter(step) " ";
    counter-increment: step;
    display: grid;
    place-content: center;
    aspect-ratio: 1;
    height: var(--circle);
    border: 5px solid #fff;
    box-sizing: border-box;
    background: var(--active-b);
    color: var(--active-c);
    border-radius: 50%;
    font-family: monospace;
    z-index: 1;
  }

 

  ol.stepper li.active ~ li::before{
    background: var(--default-b);
    color: var(--default-c);
  }
  ol.stepper li.active::after {
    content: "";
    position: absolute;
    height: var(--b);
    right: 100%;
    top: calc((var(--circle) - var(--b))/2);
    width: 100vw;
    background: var(--active-b); 
  }

  ._2fainputs{
    padding-top:20px;
  }
  ._2fainputs > input{
    border:solid 6px #eaeaea !important;
 
  }
  
  
  @media (max-width: 600px) {
    ol.stepper {
     display: grid;
     gap: 20px;
    background: 
      linear-gradient(var(--default-b) 0 0) no-repeat
      calc((var(--circle) - var(--b))/2) 50%/ var(--b) 100%;
    }
    ol.stepper li {
      display: flex;
    }
    ol.stepper li.active::after {
      content: "";
      position: absolute;
      width: var(--b);
      bottom: 100%;
      left: calc((var(--circle) - var(--b))/2);
      top: auto;
      right: auto;
      height: 100vw;
      background: var(--active-b);
    }
  }


 
  .docfiles > a{
    display:block; 
    border:solid 8px #eff5f2;
    padding:25px 15px 25px 20px;
    border-radius:15px; 
    margin:5px;
  }

  .docfiles > a:hover{
    border-color: #006242;
  }

  .docfiles a b{
    font-weight:bolder; 
    margin-top:10px;
    padding-left:10px;
  }

  .docfiles a span{
    display:block;
    font-size:10px;
    padding-left:10px;
    color:#ccc;
  }

  .mlrmenu{
    display:flex !important;
    min-width:300px; 
    font-size:18px;
    justify-content: end;
    margin-right:10px;
    position:relative; 
    z-index:100000;
  }

  .mlrmenu span i{
    font-size:23px; 
  }

  .mlrmenu a{
    color:yellow !important; 
  }


  @media (min-width: 641px) {

  .mlrmenu{ 
    margin-top:15px;
  }

  }

  .prcbtn{
    padding:10px 20px !important; 
    font-size:30px !important;
  }

  .homeicon .iconx i
  {
    font-size:30px;
  }