/*****************************************************************/
/*                          general tools                  v.0.5 */ 
/*****************************************************************/

.container-range{
    margin-bottom:1rem;
}
.container-range label{
    display:block;
    padding-bottom:0.5rem;
}

.range{
    display:flex;
    align-items:center;
}
.range input[type='range']{
    -webkit-appearance:none;
    width:100%;
    height:4px;
    background:var(--color-line);
    border-radius:5px;
}
.range input[type='range']::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:1rem;
    height:1rem;
    border-radius:50%;
    background:var(--color-secondary);
    cursor:pointer;
}
.range input[type='range']::-moz-range-progress{
    background:var(--color-secondary);
}
.range input[type='text']{
    width:2rem;
    border:2px solid var(--color-line);
    margin:0 0.3rem 0 0.2rem;
}
.range span{
    font-size:0.8rem;
}
/**/
.container-switch{
    display:flex;
    align-items:center;
    gap:0.5rem;
    margin-bottom:1rem;
}
.switch{
    width:2.5rem;
    height:0.7rem;
    border-radius:1rem;
    background:#fff;
    border:2px solid var(--color-line);
    position:relative;
    cursor:pointer;
    outline:none;
}
.switch:after{
    content:'';
    display:block;
    width:0.8rem;
    height:0.9rem;
    position:absolute;
    background:#f1f1f1;
    top:-4px;
    left:-3px;
    right:unset;
    border-radius:0.2rem;
    transition:0.3s ease all;
    box-shadow:0px 0px 1px 1px rgba(0,0,0,0.2);
}
.switch.active{
    background:var(--color-secondary);
}
.switch.active:after{
    right:-3px;
    left:unset;
}
/**/
.container-color{
    margin-bottom:1rem;
}
.container-color label{
    display:block;
    padding-bottom:0.5rem;
}
.container-color .color{
    display:flex;
}
.container-color .color input,
.container-color .color button{
    padding:0.2rem;
    border:2px solid var(--color-line);
}
.container-color .color input{
    width:4.5rem;
}
.container-color .color button{
    width:1.6rem;
    border-left:none;
}
/**/

.select-menu{
    width:3rem;
    position:relative;
}
.select-btn{
    background:#f2f2f2;
    border-radius:0.3rem;
    padding:0.2rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
}
.select-btn svg{
    margin-left:0.4rem;
}
.select-btn i{
    transition:0.3s;
}
.select-menu.active .select-btn i{
    transform:rotate(-180deg);
}
.select-option{
    width:100%;
    position:absolute;
    background:#fff;
    list-style:none;
    padding:0rem;
    box-shadow:0px 0px 5px rgba(0,0,0,0.1);
    display:none;
    z-index:1200;
}
.select-option li{
    text-align:center;
    padding:0.5rem;
    cursor:pointer;
}
.select-menu.active .select-option{
    display:block;
}
.select-option li:hover{
    background:#f2f2f2;
}
.select-option li.active{
    background:#f2f2f2;
}
/**/
.hr{
    width:100%;
    height:1px;
    background: #e8e8e8;
    background:linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.09) 35%, rgba(0, 0, 0, 0.09) 70%, rgba(0, 0, 0, 0) 100%);
}
/**/
.container-select{
    margin-bottom:1rem;
}
.container-select label{
    display:block;
    padding-bottom:0.5rem;
}
/**/
.select{
    display:flex;
    flex-wrap:wrap;
    gap:0.5rem;
}
.select .option{
    text-decoration:none;
    padding:0.5rem 1rem;
    border:1px solid #aaa;
    border-radius:0.2rem;
    color:#6c757d;
    cursor:pointer;
}
.select .option:hover{
    background:#f2f2f2;
}
.select .option.active{
    background:var(--color-secondary);
    color:#fff;
    border:none;
}
/**/
.btn-header{
    text-decoration:none;
    color:#333;
    margin-left:0.3rem;
    padding:0.2rem 0.4rem;
    background:#f2f2f2;
    border-radius:0.2rem;
    transition:0.3s all;
    cursor:pointer;
}
.btn-header:hover{
    background:#17202a;
    color:#fff;
}
/**/
.container-general{
    box-shadow: 0px 1px 2px rgb(0,0,0,0.1);
}

@media screen and (min-width:360px){

}
@media screen and (min-width:576px){

}
@media screen and (min-width:768px){
    .select-menu{
        width:auto;
        display:inline-block;
    }
    .select-btn{
        display:none;
    }
    .select-option{
        position:static;
        display:flex!important;
        margin:0rem;
        display:block;
        border-radius:0.5rem;
        padding:0rem 0.5rem;
        box-shadow:none;
    }
    .select-option li{
        padding:0.3rem;
        display:flex;
        border-radius:0.2rem;
    }
    /**/
    .container-general{
        width:700px;
    }
}
@media screen and (min-width:992px){

}
@media screen and (min-width:1200px){

}