*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --border: 1px solid #ffffff1a;
}

body, table, input, button{
    font: 300 16px/140% 'Roboto', sans-serif;
}
body{
    background-color: #121214;
    color: white;
}
.container{
    max-width: 690px;
    margin: 0 auto;
    padding: 20px 32px;
}
header{
    padding: 20px 0;
}
/* Form */
form{
    border: var(--border);
    border-inline: none ;
    padding: 20px 0;
}
fieldset{
    border: none;
}
fieldset > div{
    display: flex;
    gap: 12px;
}
.input-wrapper{
    flex: 1;

    display: flex;
    align-items: center;
    gap: 12px;
    border: var(--border);
    border-radius: 10px;
    padding: 8px 12px;
    font: 400 14px/150% 'Roboto', sans-serif;
    color: #c4c4cc;
}
input{
    all:unset;
    
}
fieldset button{
    width: fit-content;
    padding: 7px 20px;
    border: none;
    border-radius: 10px;
    background-color: #f48f56;
    font: 700 14px/16px 'Roboto', sans-serif;
    color: #00292E;
    cursor: pointer;
}
fieldset button:hover{
    background-color: #f37c37;
}
fieldset legend, section h2{
    font: 700 18px/21px 'Roboto', sans-serif;
    color: #e1e1e6;
    padding-bottom:16px;
}
@media(max-width: 480px){
    fieldset > div{
        flex-direction: column;
    }
    fieldset button{
        width: 100%;
    }
}
/* Form Fim */


/* Input */
.lista-participantes{
    padding: 20px 0;
}
.lista-participantes > div{
    border: var(--border);
    border-radius: 8px;
}
table{
    border-collapse: collapse;
}
table thead{
    font-size: 14px;
    line-height: 16px;
}
thead th,
tbody td{
    padding: 12px 16px;
}
tbody td{
    border-top: var(--border);
    font-size: 13px;
    line-height: 15px;
    color: #c4c4cc;
}
tbody td strong{
    color: white;
    font-size: 14px;
    line-height: 16px;
    font-weight: 600;
}
tbody td small{
    font-size: 12px;
    line-height: 16px;
}
tbody td button{
    all:unset;
    cursor: pointer;
    color: #59aac1;
}
tbody td button:hover{
    text-decoration: underline;
    color: white;
}
