* {
    padding: 0;
    margin: 0;
}
.form-sec{
    display: inline-flex;
    /* width: 120%; */
    /* width: 45%; */
    border: 0.1px solid gray;
    border-radius: 20px;
    /* background-color: greenyellow; */
    
}

.main{
    padding: 5%;
    width: 200%;
    background-color: white;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border: #636465 1px solid;
}
.main div{
   margin-bottom: 4%;
}
.left{
    background-color: #08B479;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    padding: 5%;
    position: relative;
    z-index: 1;
    
}

.step{
    display: block;
    
}

.left .col{
    position: relative;
    z-index: 1;
}
.step .circle{
    background-color: white;
    height: 50px; width: 50px;
    border-radius: 50%;
    margin: 0 auto;
    position: relative;

}
.step .circle .check-img{
    margin: 30% 25%;
    display: inline-flex;
    transform: scale(0.8);
}
.step .circle .circle-text{
   margin-top: 20%;margin-left: 40%;
   text-align: center;
   color: #08B479;
   font-size: 120%;
   font-weight: 400;
   position: absolute;
}

.cirlce-below-text{
    text-align: center;
    color: white;
}

.top{
    padding: 1% 0%;
    border-bottom: 2px solid lightslategray;
    margin-bottom: 1%;
}
.headings{
    font-size: 150%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #08B479;
}
.headings span{
    color: #474747;
}

#Step1B,#Step2B,#Step3B{
    background-color: #08B479;
    border-color: #08B479;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#stp1{
    margin-bottom: 120%;
}
#stp2{
    margin-bottom: 120%;
}

#flexRadioDefault1,flexRadioDefault1 {
    color: #08B479 !important;
}
/* .line{
    width: 4%;
    height: 30%;
    background-color: red;
    position: relative;
    z-index: 2;
    margin-top: 0%;
    margin-left: 50%;
} */

.btn-align{
    margin-top: 10% !important;
    margin: 5% 10%;

}

.center-circle{
    /* margin-left: 3vw !important; */
    margin: auto;
    border-radius: 20%;
    height: 18vh !important;
    width: 18vh;
    background-color: #08B479;
    display: block;
    position: relative;
    padding: 20% 0%;
}

.big-check{
    justify-content: center;
    vertical-align: middle;
    position: absoulte;
    /* margin-left: 6vh;
    margin-top: 8vh; */
    margin: auto;
    display: block;
    transform: scale(1);
}

h1,h2,h3{   
    color: #08B479 !important;
}
.text-sec{
    padding: 2%;
}

.para{
    margin: 5% 0;
    color: #636465;
}

#ac1,#ac2,#ac3 {
    background-color: #08B479 !important;
}
#ac1,#ac2,#ac3 p{
    color: white !important;
    font-size: 2vh;
}
.accordion-item{
    margin: 5% 0%;
}


footer{
    height: 10vh;
    width: 100%;
    background-color: #03583b;
    margin-top: 2%;
}

    footer p{
        font-size: 2.5vh;
        text-align: center;
        padding-top: 2%;
        color: white;
    }

#upload{
    background-color: #08B479;
    border-color: #08B479;
}



#disp {
   visibility: hidden;
  }

.cal-icon{
    height: 12%;
    width: 12%;
}
.dummy{
    height: 0.1vh;width: 14vw;
    /* background-color: green; */
    margin: 0% 8%;
}
#dum1{
    width: 20vw !important;
    height: 2px;
} 
#dum1{
    width: 25vw !important;
    
}

.button-bar{
    margin: 5% 5%;
}
#activeCampaign,#concludedCampaign{
    background-color: #08B479;
    border: #08B479 solid;
    border-radius: 2%;
    font-size: 1.5vh;
    font-weight: 600;
}

@media screen and (max-width: 480px) {
    #disp {
      display: none;
    }
    .center-circle{
        /* margin-left: 3vw !important; */
        margin: auto;
        border-radius: 20%;
        height: 18vh !important;
        width: 18vh;
        background-color: #08B479;
        display: block;
        position: relative;
        padding: 20% 0%;
    }
  }

  @media screen and (max-width: 1000px) {
    #disp {
      display: none;
    }
    .center-circle{
        /* margin-left: 3vw !important; */
        margin: auto;
        border-radius: 23%;
        height: 12vh !important;
        width: 12vh;
        background-color: #08B479;
        display: block;     
        position: relative;
        padding: 15% 0%;
    }
    .big-check{
        justify-content: center;
        position: absoulte;
        /* margin-left: 6vh;
        margin-top: 8vh; */
        margin: auto;
        display: block;
        transform: scale(0.7);
    }
  }  
  #Fpass{
      color: #08B479;
      text-decoration: none;
      text-align: center;
  }
  #Fpass:hover{
    text-decoration: underline;
  }
  
  /*----------------------------END OF LAYOUT.HTML-----------------------------------------*/

  /*----------------------------------START OF CAMPAIGNVIEW.HTML---------------------------------*/


  .main-section{
      margin: 5% 8%;
  }
  .main-section .line {
    background-color: #08B479;
    border-radius: 1px;
    height: 2px;
    margin-top: 2%;
    margin-bottom: 2%;
  }
  .heading1{
    font-size: 150%;
    font-weight: 600;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #08B479;
  }
  .heading2{
    font-size: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    color: #08B479;
  }
  .heading3{
    font-size: 110%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    color: #08B479;
    margin-top: 1%;
    margin-bottom: 1%;
  }
  .heading3 span{
    font-size: 110%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    color: #525252;
  }

  .section{
      margin-top: 3%;
      margin-bottom: 5%;
  }
  #search-sec{
      border-radius: 10px;
      background-color: white;
      box-shadow: 1px 1px 2px rgb(139, 139, 139);
      margin: 3% 3%;
      padding: 3% 5%;
  } 
  .example input[type=text] {
    padding: 10px;
    font-size: 17px;
    border: 0.5px solid #08B479;
    float: left;
    width: 80%;
    background: #f1f1f1;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  
  /* Style the submit button */
  .example button {
    float: left;
    width: 20%;
    padding: 10px;
    background: #08B479;
    color: white;
    font-size: 17px;
    border: 5.0px solid #08B479;
    border-left: none; /* Prevent double borders */
    cursor: pointer;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  
 .example button:hover {
    background: #08B479;
  }
  
  /* Clear floats */
  .example::after {
    content: "";
    clear: both;
    display: table;
  }
  
  #createCampaign{
    /* background: red; */
  }
    #createCampaignButton{
        background-color: #08B479 !important;
        display: inline-block;
        border-radius: 20px;
        /* width: 50%; */
    }
    #createCampaignButton .fa,.fas{
    margin-left: 1%;
    margin-right: 2%;
    }
  .search #example,#createCampaignButton{
      margin-top: 2%;
      margin-bottom: 2%;
  }     
    
  .campaign-card{
      border: 1px solid rgb(177, 177, 177);
      border-radius: 20px;
      background-color: white;
      /* height: 50vh; */
      margin: 2% 2%;
      box-shadow: 2px 2px 3px #b6b6b6;
  }  
  
    .campaign-card #image-section-card img{
        /* background-image: url("assets/Program-Adopt-A-Student.jpeg"); */
        width: 100%;
        border-radius: 20px;
    }

    .campaign-card #details-section-card{
        margin: 5% 4%;
    }
    .campaign-card .italic-text{
        font-size: 70%;
        font-style: italic;
    }
    .campaign-card .progress{
        height: 4.6vh;
        border-radius: 20px;
        border: 0.2px solid #e6e6e6;
    }

    .campaign-card .progress-bar{
        background-color: #08b479 !important;
        
    }

    /* .campaign-card #viewMore-section-card{
        background-color: #08B479;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        text-align: center;
        color: white;
        padding: 4%;
        cursor: pointer;
        font-weight: 700;
    } */
    .campaign-card #viewMoreButton{
        width: 100%;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        color: white;
        background-color: #08B479;
        border: #08B479 1px solid ;
        padding: 4%;
        font-weight: 700;
    }
   /*----------------------------------END OF CAMPAIGNVIEW.HTML----------------------------------*/

   /*----------------------------------START OF CAMPAIGNDASH.HTML----------------------------------*/
   #italic-text{
       font-size: 12px;
       font-weight: 300;
       font-style: italic;
   }
   #image-section{

   }
    #image-section img{
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;   
        width: 100%;
    }
    .campaign-card #head-bar{
        background-color: #08B479;
        text-align: center;
        color: white;
        font-style: italic;
        font-size: 3.8vh;
        padding: 2% 0%;
    }
    .campaign-card #campaignOverview-section{
        padding: 1% 2%;
    }
        .campaign-card #campaignOverview-section p{
            font-size: 2.3vh;
            text-align: justify;
            color: rgb(112, 112, 112);
        }

        .campaign-card .line1{
            height: 0.1vh;
            width: 100;
            background-color: #757575;
        }
        .campaign-card #campaign-date p{
            font-size: 2.3vh;
            text-align: justify;
            color: rgb(83, 83, 83);
            font-weight: 600;
        }
        .campaign-card #campaign-date #Date-Heads{
            display: flex;
            width: 100%;
            padding: 3%;
            justify-content: flex-start;
            
        }
        /* .campaign-card #campaign-date #Date-Heads .col-md-4{
            display: inline-flex;
            
        } */
        .campaign-card #campaign-date #Date-Vals{
            /* display: inline-flex; */
            width: 100%;
            margin: 3% 5%;
            
        }
        /* .campaign-card #campaign-date #Date-Vals .col1,.col2,.col3{
            display: inline-flex;
            
        } */
        .col1{
            /* margin-right: 15%; */
            width: 33%;
        }
        .col2{
            /* margin-right: 15%; */
            width: 33%;
        }
        .col3{
            width: 33%;  
        }
        .Lsec p{
            text-align: left !important;
        }
        .Csec p{
            text-align: center !important;
        }
        .Rsec p{
            text-align: right !important;
        }
        .col2 #CamDateVal{
            color: #08B479 !important;
            font-size: 2.5vh !important;
            font-weight: 700;
        }
        #StartDateVal,#EndDateVal{
            font-size: 1.5vh !important;
            font-weight: 600 !important;
        }

      /*-----Second Dash------*/
      .second-dash{
          background-color: white;
          border-radius: 20px;
          box-shadow: 2px 2px 3px #b6b6b6;
          border: 1px solid rgb(177, 177, 177);

      }
      .second-dash #PeopleNo{
        padding: 5%;
        /* background-color: red; */
      }
      .second-dash #PeopleNo #pep{
        margin: auto;
        display: block;
        /* background-color: red; */
      }
      .second-dash #PeopleNo h1{
          font-size: 4vh;
        text-align: center;
      }
      .second-dash #PeopleNo p{
        font-size: 1.3vh;
        text-align: center;
      }
      
     #Circle-graph{
         padding: 5%;
         border-left:1px solid #f5f4f4 ;
         border-right:1px solid #f5f4f4 ;
         display: block;
     }
     #Circle-graph p{
        padding: 2% 0%;
        text-align: center;
    }
    #Circle-graph img{
        display: block;
        margin: auto;
        position: relative;
    }
     
     #stat-section{
        padding: 2% 5%;
    }
    #stat-section .heading2{
         font-size: 1.7vh !important;
     }
     #stat-section .heading2{
         font-size: 1.7vh !important;
     }

     #stat-section .heading3{
        font-size: 1.5vh !important;
        font-weight: 600;
    }
     #stat-section .heading3 span{
        font-size: 1.3vh !important;
        font-weight: 600;
    }
    #line-chart-sec {
        padding: 2%;
        border-right:1px solid #f5f4f4 ;
    }
    #line-chart-sec img{
        display: block;
        margin: auto;
        position: relative;
    }

    #dash-donate {
        
    }

    #dash-donate h6{
        font-style: italic;
        color: rgb(97, 97, 97);
        font-weight: 600;
        text-align: center;
        margin: 3% 0%;
    }

    #dash-donate #button-grp{
      margin-left: 1%;
      margin-right: 1%;
    }

    #dash-donate #button-grp .btn{
        margin: 4% 2%!important;
        background-color: #08B479 !important;
        border: 1px solid #08B479 !important;
        display: block !important;
        font-size: 12px !important;
    }
   #dash-donate #other-sec{
      margin-top: 4%;
      margin-bottom: 3%; 
      margin-left: 3%;
      margin-right: 3%;
   }
   #dash-donate #DashDonate{
    margin-top: 8%;
    margin-bottom: 4%; 
    margin-left: 3%;
    margin-right: 3%;
 }
   #dash-donate #DashDonateButton{
    display: block;
    margin: auto;
    position: relative;
    background-color: #08B479 !important;
    border: 1px solid #08B479 !important;
    padding: 2% 20%;
    border-radius: 20px;
 }

 /* --------third dash---------- */
 .third-dash{
     background-color: white;
    border-radius: 15px;
    min-height:450px;
    max-height:450px;
    overflow:auto;
 }

 .third-dash .heading2{
    background-color: #08B479 !important;
    color: white !important;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    text-align: center;
    padding: 2%;
    
}

.third-dash #DonorNames{
    padding: 4% 8%;
    font-weight: 400;
}
.third-dash #DonorNames .heading3{
    font-weight: 500 !important;
    font-size: 1.6vh;
}

.third-dash #DonorNames .heading3 span{
    font-weight: 600 !important;
    font-size: 1.7vh;
}
/* sdasd */


 
   /*----------------------------------END OF CAMPAIGNDASH.HTML----------------------------------*/