.funnel-wrapper {
    /* display: flex; */
    padding: 10px;
    text-align: start;
    justify-content: center;
    /* overflow: auto; */
    box-shadow: 20px 20px 25px  gray;
    margin: 0 auto;
    max-width: 80%;
    /* background-color: #8BC6EC; */
    /* background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%); */
    /* padding: 10px; */
    border-radius: 20px;
    /* height: inherit; */
    max-height: 90%;

    
}

.funnel {
    display: inherit;
    flex-wrap: inherit;
    border-left:  75px   ;
    border-right: 75px ;
    border-top:   100px ;
    border-radius: 5px;
    padding: auto; /* Thickness of funnel div */
    margin: 0 auto;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 1);
    opacity: 0.9;
    /* max width will ensure its always within its parent width */
    max-width: 95%;
    /* Will ensure text is always displayed properly */
    /* min-width: 150px;   */
    /* height: inherit; */
    /* border-radius: 0px 0px 15px 15px; */
    /* margin-bottom: auto; */

    /* Remove this later if issue with funnel Bar */
    min-width: 300px; 
}
.funnel .funnel-text {
    justify-content: end;
    text-align: end;
    display: flex;
    text-align: flex-end;
    
}
.funnel:hover{
    opacity: 0.7;
}

.inline-wrap {
    display:flex;
    flex-wrap: wrap;    
    justify-content: space-between;
    align-items: center;
}

.funnel-value{
    justify-content: flex-end; 
    text-shadow: 2px 2px 2px 2px white;
    font-weight: 1000;
    font-size: 15px;
    text-shadow: 1px 1px gray;
}
.funnel-title{
    /* margin-top: 40px; */
    
    justify-content: flex-start;
    /* align-self: flex-start; */
    /* text-shadow: 1px 1px 1px black; */
    font-size: 15px;
    font-weight: 500;
    /* height: inherit; */
    text-shadow: 1px 1px gray;
    opacity: 1;
    font-weight: bold;
    
}
/* Small Screen between small & large */
@media (min-width: 100px) and (max-width: 1070px) {
    .hr-name {
        /* Reduces font-size on small screen */
        font-size: 150% !important;
    }
    .hr-desc {
        /* Reduces font-size on small screen */
        font-size: 55% !important;
    }
    .funnel{
        
        max-width: 100% !important;
        /* width: inherit - 20% !important; */
        /* padding: 4% !important; */
        min-width: 0px !important;
    }
    .funnel-wrapper {
        /* Adjust size of wrapper on small screens */
        max-width: 100% !important;
        width: 100% !important;
        /* top right bottom left clock wise 0 1px 0 1px which is left & right 1px margin */
        margin: 0 1px 0 1px !important ;
        padding: 5px;
        /* margin-left: 1px !important; */
        /* margin-right: 1px !important; */
    }
    .funnel-header {
        padding: 10px !important;
    }

    
}
/* Adjust Font size for funnel-title  on small / mobile screen */
@media screen and (min-width: 400px) {
    .funnel-title  {
        font-size: 13px !important;
    }

    
}
.hr-name {
    color: black;
    font-weight: 1000;
    text-align: center;
    font-size: 50px;
    animation: hrname 2s ease-in;
    margin-top: 20px;
    margin-bottom: 20px;
    
}
.hr-desc{
    margin-top: -10px !important;
    /* padding-top: 2px !important; */
    margin: 4px;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 100;
    
}
/* The animation code */
    @keyframes hrname {
    from {opacity: 0;}
    to {opacity: 1;}
}

.funnel-header .hr-desc {
    color: white;
    text-align: end;
    font-size:14px;
    padding-right: 20px;
    margin-top: 1px;
    
    /* padding-bottom: 10px; */
    
    
}
.funnel-header {
    /* background-color: gray; */
    background-color: #FF3CAC;
    background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
    padding: 2px;
    /* Top left & Top Right curved radius */
    border-radius: 20px 20px 0px 0px;
    /* height: 20%; */
    font-family: 'Times New Roman', Times, serif, Helvetica, sans-serif ;
}
.funnel-body {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 10px;
    /* background-color: #5c605e; */
    /* background-image: linear-gradient(45deg, #5c605e 0%, #b7b79b 100%); */
    background-color: #5c605e;
    background-image: linear-gradient(0deg, #5c605e 0%, #b7b79b 100%);
    border-radius: 0px 0px 20px 20px;
    /* height: 200px; */
    height: auto;

}

.temp {
    display: flex;
    opacity: 0.2;
    align-self: start !important;
    padding: 2px

}

@keyframes expand {
    0% {
        width: 10%;
        /* height: 10%; */
    }
    50% {
        width: 50%;
        /* height: 50%; */
    }
    
}