:root {
    --txtClr: #333;
    --bgClr: hsl(0, 0%, 100%);
    --b2Clr: hsl(214, 100%, 84%);
    --a2Clr: hsl(50, 100%, 85%);
    --b0Clr: hsl(213, 100%, 96%);
    --bg: linear-gradient(to right, hsla(214, 100%, 90%, 100%) 0%, hsla(214, 100%, 90%, 0%) 20%, hsla(214, 100%, 90%, 0%) 50%, hsla(214, 100%, 90%, 0%) 80%, hsla(214, 100%, 90%, 100%) 100%);
}
#result-section {
     background: #e9e9e9;
     padding: 7px;
     padding-bottom: 30px;
 }
 #result-section .res {
     background: white;
     padding: 2px;
     border: 1px solid #ced4da;
     border-radius: 3px;
     min-height: 35px;
 }
 .input-box{
    text-align: start;
 }
 .input-style {
    position: relative;
    display: inline-block;
    width: 100%;
    color: #0f0c0c;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    font-size: 18px;
    padding: 5px 8px;
    height: 34px;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
@media (max-width: 375px)
{
    #side,#height_l{
        left: 77px !important;
    }
    .sect1{
        flex-direction: column !important;
    }
}
 .main {
    position: relative;
    text-align: center;
    margin: auto;
    border-radius: 20px;
    padding: 10px;
    border: 1px solid var(--b0Clr);
}
 .sect{
    background: gainsboro;
 }
 .btn {
    text-align: center;
    margin: 0.1rem;
    padding: 0 0.5rem;
    text-decoration: none;
    font: bold 0.9rem/1.6rem Arial,sans-serif;
    color: var(--b3Clr);
    border: 0.1rem solid var(--b2Clr);
    border-radius: 0.6rem;
    cursor: pointer;
    background: linear-gradient(to top right,var(--b2Clr) 0%,var(--b2Clr) 30%,var(--bgClr) 100%);
    outline-style: none;
    user-select: none;
}
.sel-input{
    width: 100%;
    text-align: center;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    height: 34px;
}
.btn:hover,.btn.lo:hover,.btn.hi:hover{background:linear-gradient(to top,var(--a2Clr) 0%,var(--b0Clr) 100%);
    color:var(--txtClr)}
.main{
    position: relative;
    text-align: center;
    margin: auto;
    width: 400;
    border-radius: 20px;
}
.btn-primary{
    padding: 2px !important;
}
#linkBtn {
    margin-right: 7px;
}
.btns{
    display: flex;
    justify-content: end;
}
.pop {
    padding: 0.4rem;
    border-radius: 0.5rem;
    font: 0.9rem Arial;
    background-color: var(--b2Clr);
    box-shadow: 0.4rem 0.4rem 0.3rem 0 rgb(40 40 40 / 75%);
    transition: all linear .5s;
    opacity: 0;
    text-align: center;
}
.bigBtn.hi {
    background: hsla(240,100%,90%,1);
}
.bigBtn.lo:hover {
    background: hsl(50, 100%, 85%);
}
.togglebtn {
    display: inline-block;
    position: relative;
    text-align: center;
    margin: 2px;
    text-decoration: none;
    font: bold 14px/25px Arial,sans-serif;
    color: #19667d;
    border: 1px solid #8af;
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(to top right,rgba(170,190,255,1) 0%,rgba(255,255,255,1) 100%);
}
input[type="radio"]:checked+label {font-weight: bold;}
.radio {
    background: #ebf4ff;
    padding: 2px 10px;
    border-radius: 0.6rem;
    line-height: 1.9rem;
    text-align: left;
}
.input{
    text-align: center;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background-color: white;
    padding: 2px;
    width: 100%;
}
#content {
    max-width: 760px;
    text-align: left;
    margin: -65px auto 15px;
}
.plays {
    display: inline-block;
    position: relative;
    width: 36px;
    height: 36px;
    margin-right: 7.2px;
    padding: .6em;
    border: 0 solid rgba(208, 208, 248, 1);
    border-radius: 10em;
    background: linear-gradient(#fff, #ccf), #c9c5c9;
    box-shadow: 0 3 4 rgba(0, 0, 0, .4);
}

.plays:hover {
    background: linear-gradient(#f5f5f5, #b9b9b9), #c9c5c9;
}

.plays:before,
button:after {
    content: " ";
    position: absolute;
}

.plays:active {
    top: 1.8px;
    box-shadow: 0 0.72px 1.08px rgba(0, 0, 0, .4);
}

.play:before {
    left: 12.959999999999999px;
    top: 7.92px;
    width: 0;
    height: 0;
    border: 10.799999999999999px solid transparent;
    border-left-width: 14.4px;
    border-left-color: blue;
}

.play:hover:before {
    border-left-color: yellow;
}

.pause:before,
.pause:after {
    display: block;
    left: 10.44px;
    top: 10.080000000000002px;
    width: 6.84px;
    height: 16.919999999999998px;
    background-color: blue;
}

.pause:after {
    left: 19.44px;
}

.pause:hover:before,
.pause:hover:after {
    background-color: yellow;
}
.sel-input{
    font-size: 15px;
}