section.mid{
    padding:1em 2em;   
    flex:2.6;
    width:50%
}

section.right{
    top:0;
    position:sticky;
    width:24vw;
    height:100vh;
    display:inline-flex;
    flex-direction:column;
    /* align-items:center; */
    padding:0 1em 2em;
    flex:1.1;
    border-left:1px solid #ccc;
    overflow-y:auto;
    scrollbar-width:none;
}

#search{
    display:inline-block;
    position:relative;
    height:3em;
    width:80%;
    /* margin:0 0 2em 0; */
}

#search input{
    background: #fff;
    border-radius:2em;
    border: none;
    width:100%;
    height:100%;
    /* border:1px solid #999; */
    box-shadow: 0 0 3px 1px #2222;
    padding-left:12%;
}

#search input:focus{
    outline: 1.5px solid var(--color-secondary);
}


#search img{
    height:80%;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:2%;
}

h2{
    font-weight:600;
    margin-top:4em 0 1em;
}

.content-card{
    background:#fff;
    padding:2em;
    border-radius:1em;
    box-shadow:0 0 4px 1px #2222;
    max-width:100%;
}

.fund-status .payout i{
    transform: rotate(-45deg);
}

.fund-status .icon{
    background: var(--text-secondary-light);
    margin-top:0.5em;
    height:2.5em;
    width:2.5em;
    min-width:2.5em;
    border-radius:0.5em;
}

.fund-status .icon img{
    height:1.5em;
}

.fund-status .details b{
    font-size:1.2em;
}

.fund-status > div{
    width:28%;
}


/* Investment-chart */
.investment-chart{
    padding:2em 1.5em;
}

.investment-chart input{
    width: 5em;
    height: 2em;
    border-radius:0.5em;
    border:0;
    background: var(--text-secondary-light);
    padding:0.5em;
    text-align:right;
    /* color:#fff; */
}

.investment-chart input[type="range"] {
  -webkit-appearance: none; /* Override default styles */
  appearance: none;
  background: transparent; /* Remove default background */
  height: 0.5rem; /* Set track height */
}

.investment-chart input[type="range"]::-webkit-slider-runnable-track {
  background: var(--color-secondary);
  height: 0.5rem;
  border-radius: 0.25rem;
}

.investment-chart input[type="range"]::-moz-range-track {
  background: var(--color-secondary);
  height: 0.5rem;
  border-radius: 0.25rem;
}

.investment-chart input[type="range"]::-ms-track {
  background: var(--color-secondary);
  height: 0.5rem;
  border-radius: 0.25rem;
  border: none;
}

.investment-chart input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 2px 1px #0002;
  background: var(--color-secondary);
  height: 1rem; /* Set thumb height */
  width: 1rem; /* Set thumb width */
  border-radius: 50%; /* Make thumb circular */
  margin-top: -0.25rem; /* Center thumb vertically */
}

.investment-chart input[type="range"]::-moz-range-thumb {
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 2px 1px #0002;
  background: var(--color-secondary);
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
}

.investment-chart input[type="range"]::-ms-thumb {
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 2px 1px #0002;
  background: var(--color-secondary);
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
}



.investment-chart input[type="range"]{
    background: transparent;
    width:100%;
}

.investment-chart > .row{
    align-items:end;
}

.investment-chart > .row > div:first-child{
    flex:1;
    margin-bottom:2em;
}

.investment-chart > .row > form{
    flex:0.5;
    font-size:0.9em;
    /* box-shadow:-2px 0 2px 1px #ccc3; */
    padding:0.5em 1em;
    /* border-radius: 0.5em 0 0 0.5em; */
    /* border-left:1px solid #ccc5; */
}

.investment-chart .calculation .row > *{
    flex:1;
}
 
.investment-chart .calculation .text{
    font-size:0.9em;
}

.investment-chart .calculation > .btn{
    background: #4444;
    color: #444;
    padding:1em 2em;
    font-size:0.9em;
}

/* Mid - Housing section */
.housing{
    overflow:auto;
    white-space:nowrap;
    width:100%;
    padding-bottom:1em;
}

.housing .unit{
    margin:0 0.5em;
    display:inline-block;
}

.housing .unit > img{
    height:9em;
    width:11em;
    object-fit:cover;
}

.checked{
    width:70%;
    margin-left:1em;
}

.checked .check-circle{
    height:1.5em;
    width:1.5em;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--color-primary);
    color:#fff;
    border-radius:1em;
    border: 1.5px solid #fff;
    outline: 1px solid var(--color-primary);
}

.loadbar{
    width:100%;
    height:0.5em;
    background: var(--text-secondary-light);
    position:relative;
    overflow:hidden;
    border-radius:0.5em;
}

.loadbar:after{
    content:"";
    height:100%;
    width:70%;
    position:absolute;
    background: var(--color-secondary);
}


/* Mid - Featured Resources */
#featured{
    margin-top:2em;
}

#featured .resource{
    font-size:0.9em;
}

#featured .resource .r-logo{
    border:1px solid #e7e7e7;
    height: 3.5em;
    width: 3.5em;
    border-radius:0.5em;
}

#featured .resource .r-logo img{
    height: 3em;
    width: 3em;
}


/* Mid - invite */

#invite{
    margin-top:2em;
    padding:1em 3em;
}

#invite input{
    width:100%;
    border:1px solid var(--color-primary);
    height:100%;
    border-radius:0.5em;
    padding-left:4em;
}

#invite .btn{
    padding:0.5em 1em;
    background: var(--color-primary);
    min-width:5em;
}

#invite .input-box{
    height:3.5em;
    position:relative;
}

#invite .link-icon{
    background:#fff;
    height: 95%;
    width: 10%;
    position: absolute;
    left: 1px;
    top: 1px;
    border-radius:1em;
    color:var(--color-primary);
    font-size:0.8em;
}


#invite .copy-btn{
    background:#fff;
    height: 95%;
    width: 15%;
    position: absolute;
    right: 1px;
    top: 1px;
    border-radius:1em;
    font-size:0.8em;
}


#invite .bottom-text{
    margin-top:0.2em;
}

/* Right - green-box */
.green-box{
    background: #D8EBE0;
    padding:2em;
    border-radius:1rem;
}

.green-box .btn{
    background: #4444;
    color: #444;
    padding:1.2em 2em;
    border-radius:0.5rem;
}

/* Right - button */
section.right > .btn{
    background: var(--color-secondary);
    padding: 10px 24px;
    width:100%;
    color: #444;
    font-size:0.9em;
}



@media (max-width:768px){
    section.mid{
        padding-inline:1.5em;
    }
    
    #sidebar, section.right{
        display:none;
    }

    header.mini{
        display:flex;
        padding:0em 1em;
        height:3.5em;
    }
    
    .fund-status.content-card, .investment-chart.content-card > .row{
        flex-direction: column;
        gap:2em;
    }
    
    .fund-status.content-card > .row{
        width:100%;
    }

    .chart-container{
        width:100%;
    }
    #areaChart{
        width:100%;
    }

    #invite .input-sect, #invite .redeem-sect{
        flex-direction:column;
        align-items:end;
        gap:0.2em;
    }

    #invite .redeem-sect h2{
        margin:0;
    }

    #invite .redeem-sect{
        margin-block:1em;
        align-items:start;
    }

    #invite .input-sect .share-btn{
        display:none;
    }

    #invite .input-box{
        height:3em;
        position:relative;
    }
    
    #invite .link-icon{
        width:15%;
        text-align:center;
    }

    #invite .input-box .copy-btn{
        width:20%;
        font-size:0.7em;
        text-align:center;
    }
}