/* CSS Document */

.tm-header{

    grid-area:header;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:15px;

    background:white;

    border-bottom:1px solid var(--border);

    box-shadow:var(--shadow);

    z-index:1000;

}

.tm-logo{

    font-size:22px;

    font-weight:bold;

    color:var(--blue);

}

.tm-search{

    flex:1;
    position:relative;

}

.tm-search input{

    width:100%;

    padding:10px 15px;

    border-radius:8px;

    border:1px solid var(--border);

}
.tm-search{
    flex:1;
    max-width:900px;
}

.tm-user{
    display:flex;
    align-items:center;
    gap:10px;
    margin-left:auto;
}

.tm-user-button{

    width:42px;
    height:42px;

    border:0;
    background:#f5f5f5;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    color:#1976d2;

    transition:background .2s;
}

.tm-user-button:hover{
    background:#e5e5e5;
}

.tm-user-button .material-symbols-outlined{
    font-size:30px;
}

.tm-user-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}