:root{
    --clr-border: rgba(0, 0, 0, 0.125);
    --clr-brand-yellow: #fad900;
    --clr-brand-black: #575756;
    --device-grid: 12.5% 2.5% 10% 2.5% 12.5% 2.5% 15% 2.5% 20% 2.5% 5% 2.5% 10%;
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: Roboto,Helvetica Neue,sans-serif;
}

header{
    width: 100vw;
    border-bottom: 1px solid var(--clr-border);
}
header .wrapper{
    padding: 10px 100px;
    display: grid;
    grid-template-columns: 50% 50%;
}
header .wrapper .left, header .wrapper .right{
    display: flex;
    align-items: center;
}
header .wrapper .left{
    justify-content: start;
}
header .wrapper .left .item img{
    width: 100px;
}
header .wrapper .left .item h1{
    font-size: 12px;
}
header .wrapper .left .logo{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 5px;
}

main .wrapper{
    padding: 30px 100px;
}
main .wrapper form{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--clr-border);
}
main .wrapper form div label{
    font-size: 12px;
    width: 100px;
}
main .wrapper form .top-container{
    display: flex;
    width: 100%;
    align-items: center;
    gap: 20px;
}
main .wrapper form .top-container input{
    flex: 1;
    outline: 0;
    padding: 10px;
    border: 1px solid var(--clr-border);
    border-radius: 8px;
}
main .wrapper form .container-2{
    display: grid;
    grid-template-columns: 48% 4% 48%;
    align-items: center;
}
main .wrapper form .container-3{
    display: grid;
    grid-template-columns: 40.6% 4% 40.6% 4% 10.6%;
    align-items: center;
}
main .wrapper form div .input-container{
    display: flex;
    gap: 20px;
    align-items: center;
}
main .wrapper form div .input-container input, main .wrapper form .input-container select{
    flex: 1;
    outline: 0;
    padding: 10px;
    border: 1px solid var(--clr-border);
    border-radius: 8px;
}
main .wrapper form div .button-container button{
    font-size: 14px;
    padding: 8px 20px;
    border: 1px solid transparent;
    background-color: var(--clr-border);
    border-radius: 8px;
    margin: 0 auto;
    cursor: pointer;
    transition: all 200ms ease;
}
main .wrapper form div .button-container button:hover{
    border: 1px solid var(--clr-brand-black);
}

main .wrapper .result-container{
    padding: 30px 0;
}
main .wrapper .result-container .result-top{
    display: grid;
    grid-template-columns: var(--device-grid);
    text-align: center;
}
main .wrapper .result-container .result-top p{
    font-size: 14px;
}
main .wrapper .result-container .result-body .item{
    display: grid;
    grid-template-columns: var(--device-grid);
    text-align: center;
    align-items: center;
}
main .wrapper .result-container .result-body .item .item-part-img{
    text-align: center;
}
main .wrapper .result-container .result-body .item img{
    width: 80px;
}
main .wrapper .result-container .result-body .item p{
    font-size: 12px;
}
main .wrapper .result-container .result-body .item .status{
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}
main .wrapper .result-container .result-body .item .status span{
    width: 4px;
    height: 4px;
    border-radius: 50%;
}
main .wrapper .result-container .result-body .item .green span{
    background-color: green;
}
main .wrapper .result-container .result-body .item .red span{
    background-color: red;
}
main .wrapper .result-container .result-body .item .button button{
    font-size: 12px;
    color: var(--clr-brand-black);
    background-color: var(--clr-brand-yellow);
    font-weight: bold;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
    transition: all 200ms ease;
}
main .wrapper .result-container .result-body .item .button button:hover{
    background-color: transparent;
    border: 1px solid var(--clr-brand-yellow);
}
main .wrapper .result-container .results-not-found{
    text-align: center;
}
main .wrapper .result-container .results-not-found p{
    font-size: 12px;
}