nav { position: fixed; left: 0; top: 0; width: 250px; height: 100%; display: flex; flex-direction: column; } nav .sso-menu-switch { color: white; border: 1px solid white; position: absolute; right: 10px; top: 10px; font-size: 24px; padding: 5px 15px; display: none; } nav header { background: #343434; text-align: center; padding: 20px 0; } nav header h1 { margin: 0; } nav .nav-current { background: #343434; display: flex; justify-content: space-between; align-items: center; } nav .nav-current-item { display: flex; align-items: center; color: white; font-size: 16px; margin: 5px 8px; } nav .nav-current-item.logout { font-size: 20px; } nav .nav-current-subitem { margin-left: 5px; font-size: 12px; } nav ul.nav-links { margin: 0; padding: 0; list-style-type: none; flex-grow: 1; border-right: 5px solid #f3f3f3; } nav ul.nav-links li { box-sizing: border-box; border-left: 0 solid transparent; transition: 0.2s border-left-width; } nav ul.nav-links li a { display: block; padding: 5px 8px; text-decoration: none; text-transform: uppercase; color: #343434; } nav ul.nav-links li:hover { border-left: 4px solid transparent; } nav ul.nav-links li.active { border-left: 4px solid #f3c289; } nav ul.nav-links li.active a { color: #f3c289; } nav .nav-created-by { border-right: 5px solid #f3f3f3; box-sizing: border-box; padding: 8px; } .container { position: absolute; left: 250px; right: 0; top: 0; box-sizing: border-box; padding: 10px 15px; } .form-group { box-sizing: border-box; flex-basis: calc(50% - 10px); } form { font-size: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; } input { display: block; line-height: normal; box-sizing: border-box; height: 2.4375rem; padding: 0.5rem; border: 1px solid #cacaca; margin: 0 0 1rem; font-family: inherit; font-size: 1rem; color: #0a0a0a; background-color: #fefefe; box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); border-radius: 0; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; -webkit-appearance: none; -moz-appearance: none; } input:focus { border: 1px solid #8a8a8a; background-color: #fefefe; outline: none; box-shadow: 0 0 5px #cacaca; transition: box-shadow 0.5s, border-color 0.25s ease-in-out; } .sso-form-buttons { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; } .sso-form-buttons-flexibile { width: auto; } .sso-form-button { border: none; color: white; background: #f3c289; padding: 10px 8px; margin: 0 4px; -webkit-appearance: none; transition: 0.2s background; } .sso-form-button:hover { background: #be9568; color: white; } .sso-form-button:first-child { margin-left: 0; } .sso-form-button:last-child { margin-right: 0; } .sso-form-button-primary { background: #5cb85c; flex-grow: 1; } .sso-form-button-primary:hover { background: #499249; } @media screen and (max-width: 968px) { nav { position: relative; width: 100%; height: auto; } nav .sso-menu-switch { display: block; } nav .nav-links { height: 0; overflow: hidden; } nav .nav-links.nav-links-shown { height: auto; } .container { position: relative; width: 100%; left: 0; } .form-group { flex-basis: calc(100%); } } /*# sourceMappingURL=style.css.map */