.mdTopo {
     display: flex;
     justify-content: space-between;
     height: 64px;
     padding: 8px 4px;
     align-items: center;
     gap: 6px;
     flex-shrink: 0;
     .title-container {
         flex-grow: 1;
    }
     h1{
         margin: 0px;
    }
     .title-text {
         text-align: center;
         font-family: Roboto, sans-serif;
         font-size: 22px;
         font-style: normal;
         font-weight: 400;
         line-height: 28px;
         letter-spacing: 0px;
    }
}
 .button-container {
     display: flex;
     width: 48px;
     height: 48px;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 10px;
     flex-shrink: 0;
     .icon-button {
         display: flex;
         padding: 8px;
         justify-content: center;
         align-items: center;
         gap: 10px;
         border-radius: 100px;
         background-color: transparent;
         border: none;
         cursor: pointer;
    }
}

body.light{
     .mdTopo {
     background-color: #ffffff;
    }
}

body.dark{
     .mdTopo {
     background-color: black;
    }
}