/*****************************************************************/
/*                     structure tools                     v.0.3 */
/*****************************************************************/

body{
    background:#f5f5f5!important;
}
.container-tool-web-maker{
    font-family:'Poppins',sans-serif; 
    color:#333;
    font-size:0.8rem;
    display:flex;
    justify-content:center;
}
.container-box-shadow{
    width:950px;
    background:#fff;
    box-shadow: 0px 1px 2px rgb(0,0,0,0.1);
}
.container-box-shadow>.row{
    padding:0.5rem;
}
.container-result .buttons{
    display:flex;
    justify-content:end;
    padding-bottom:0.5rem;
    gap:0.5rem;
}
.container-result .buttons a
,.container-result .buttons label{
    text-decoration:none;
    color:#333;
    padding:0.2rem 0.4rem;
    background:#f2f2f2;
    border-radius:0.2rem;
    transition:0.3s all;
    cursor:pointer;
}
.container-result .buttons a:hover,
.container-result .buttons label:hover{
    background:#17202a;
    color:#fff;
}
.container-result .show{
    width:100%;
    height:15rem;
    border:1px solid #f2f2f2;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:auto;
}
.container-result .show .circle{
    width:7rem;
    height:7rem;
    border-radius:50%;
    background:var(--color-secondary);
}

.container-box-shadow .details,
.container-general .details{
    background:#f2f2f2;
    font-size:1rem;
    padding:1rem;
}
.container-code{
    width:100%;
    /*min-height:50px;*/
    color:#fff;
    background:#17202a;
    margin-top:1rem;
    margin-bottom:1rem;
    border-radius:0.23rem;
    display:flex;
}

.container-code>.code{
    width:100%;
    padding:0.5rem;
}
.container-code>.code textarea{
    width:100%;
    background:#17202a;
    color:#e5e7e9;
    display:flex;
    outline:none;
    border:1px solid #1c2833;
}
.container-code>.copy{
    width:auto;
    background:rgba(0,0,0,0.09);
    display:flex;
    justify-content:center;
    align-items:center;
}
.container-code>.copy span{
    cursor:pointer;
    border:1px solid var(--color-secondary);
    border-radius:0.2rem;
    padding:0.3rem;
    margin:0.5rem;
}
@media screen and (min-width:360px){

}
@media screen and (min-width:576px){
    .container-box-shadow>.row{
        padding:1rem;
    }
    .container-result .show{
        height:18rem;
    }
}
@media screen and (min-width:768px){
    .container-box-shadow>.row{
        padding:1rem 2rem 1rem 2rem;
    }
    .container-result .show{
        height:20rem;
    }
    .container-result .show .circle{
        width:10rem;
        height:10rem;;
    }
}
@media screen and (min-width:992px){

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

}