* {
    padding: 0;
    margin: 0;
    font-family: Arial;
    color: #FFF;
}

body {
    background: #434f5e;
}

.center {
    /* width: 1200px; */
    margin: 0 auto;
}

h1 {
   
    text-align: center;
    padding: 20px 0;
    margin-bottom: 20px;
    margin-top: 20px;
    color: #fff;
}

div.cards {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

div.card {
    width: 200px;
    height: 100px;
    margin-bottom: 15px;
    background-color: #4b4b4b;
    border-radius: 10px;
}

.online {
    background-color: #07cc00;
}

.offline {
    background-color: #d10808;
}

.btn-search {
    border: 1px solid #ffffff; /* cor da borda branca */
    border-radius: 20px; /* raio de borda para torná-lo arredondado */
    background-color: #ffffff5c;
    padding: 10px; /* espaço interno para o ícone */
    color: #ffffff; /* cor do ícone */
    width: 40px; /* largura do botão de pesquisa */
}

.btn-search2 {
   
    border-radius: 20px; /* raio de borda para torná-lo arredondado */
    background-color: #ffffff5c;
    padding: 10px; /* espaço interno para o ícone */
    color: #ffffff; /* cor do ícone */
    width: 40px; /* largura do botão de pesquisa */
}
.btn-search:focus {
    outline: none; /* remove a borda de foco padrão */
}

/* Estilo para o ícone */
.btn-search svg {
    width: 16px; /* ajusta o tamanho do ícone */
    height: 16px; /* ajusta o tamanho do ícone */
    fill: #ffffff; /* cor do ícone */
}

/* Estilo para o ícone quando em foco */
.btn-search svg:focus {
    outline: none; /* remove o contorno de foco */
}