html {
  font-size: 14px;
  height:100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

main {
    display: flex;
    flex: 1;
}

.center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-bottom: 128px;
}

.login {
    width:300px;    
}

.menu-button {
    border: none;
    background-color: transparent;
}

.logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.b-logo {
    font-family: var(--bs-font-sans-serif);
    color: royalblue;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.b-navbar {
    font-size: 14px;
    font-family: Roboto,RobotoFallback,"Noto Kufi Arabic",Helvetica,Arial,sans-serif;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: white;
    padding: 0px 16px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    position: relative;
    align-items: center;
    margin-bottom: 0px;
}

.b-navitem {
    display: flex;
    align-items: center;
}

    .b-navitem a {
        text-decoration: none;
    }

.user {
    color: darkgrey;
}

.b-button {
    color: black;
    border: none;
    background-color: transparent;
}

.row-b {
    display: flex;
    flex-direction: row;
    gap: 16px;
}