body{
    width: 100vw;
    overflow-y: auto;
    overflow-x: hidden;
    
}

/* -------------------------------------------------------   */
body::-webkit-scrollbar{
    width: 7px;
    height: 7px;
    background-color: transparent;
}
body::-webkit-scrollbar-thumb{
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background-color: rgb(182, 197, 212);
}  

.mainpanel{
    width: 100%;
    /* overflow-x: hidden; */
    display: flex;
}
.panel{
    padding: 10px;
    
}
.leftpanel{
   width: 20%; 
   
}
.rightpanel{
    width: 70%; 
    .title{
        padding: 10px 0 20px 0;
        /* text-align: center; */
        font-size: 1.5em;
        font-weight: 900;
    } 
}

.input-box {
    /* display: block;
    align-items: center;
    height: 80px; */
    width:70%;
    margin: 10px 0;
    position: relative;
}
.input-box input, select{
    height: 50px;
    width: 100%;
    outline: none;
    border: 1px solid gray;
    border-radius: 10px;
    padding: 0 30px;
    font-size: 16px;
    font-weight: lighter;
    /* border-bottom: 2px solid rgba(0,0,0,0.2); */
    transition: all 0.3s ease;
  }
  .input-box input:focus,
  .input-box input:valid{
    border-color: var(--main-darkcolor);
  }
  
@media (width < 650px) {
    #slider{
        display: none;
    }
    .mainpanel{
        flex-direction: column-reverse;
    }
    .leftpanel{
        .pad{
            display: none;
        }
        
    }
    .leftpanel, .rightpanel{
        width: 100%;
    }
    .button{
        flex-direction: column;
    }
    .button button{
        width: 100%;
    }
    
    .input-box {
        width:100%;
    }
}