* { margin: 0; padding: 0; } body { font-family: "Hind Vadodara", -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif; } .container { display: flex; height: 80vh; width: 100vw; flex-wrap: wrap; overflow: hidden; } .main { height: calc(100% - 50px); display: flex; flex: 1; } .sidebar { height: 100%; width: 220px; box-sizing: border-box; box-shadow: 0 0 2rem 0 rgb(0 0 0 / 5%); overflow: hidden; transition: width 0.5s ease; } .container.nav-closed .sidebar, .container.nav-closed .header-logo { width: 0; } .sidebar ul { display: flex; flex-direction: column; padding: 5px; } .sidebar ul li { display: flex; align-items: center; } .sidebar ul li a { color: #000; text-decoration: none; display: flex; align-items: center; width: 100%; padding: 10px; white-space: nowrap; } .sidebar ul li a.active, .sidebar ul li a:hover { background: #e8ecef; } .sidebar ul li span { margin-left: 16px; font-size: 16px; font-weight: 100; } .sidebar ul li i { font-size: 18px; color: #111; font-weight: normal; } .header { height: 50px; background: #303f9f; width: 100%; display: flex; align-items: center; flex-basis: 100%; } .sidebar ul li a.active i { color: #303f9e; } .site-logo { height: 32px; width: 32px; min-height: 32px; min-width: 32px; margin: 0 18px 0 15px; } .site-logo path { fill: #fff; } .site-title { color: #fff; font-size: 24px; letter-spacing: 1px; font-weight: 400; } .page-content { padding: 10px 20px; box-sizing: border-box; width: 100%; flex: 1; } .header-search .button-menu { width: 28px; height: 28px; margin-right: 15px; background: none; border: 0; cursor: pointer; } .header-logo { display: flex; align-items: center; width: 220px; overflow: hidden; transition: width 0.5s ease; } .header-search input[type="search"] { height: 100%; width: 300px; padding: 10px 20px; box-sizing: border-box; font-size: 14px; font-weight: 100; background: none; border: none; color: #fff; } .header-search input[type="search"]:focus { outline: none; } .header-search input[type="search"]::placeholder { color: #ccc; } .header-search .button-menu:focus { outline: none; border: none; } .header-search .button-menu svg path { fill: #fff; } @media screen and (max-width: 991px) { .page-content { width: 100vw; } } @media screen and (max-width: 767px) { .header-logo { display: none; } } #zplane_polezero2{border:2px solid black;} #allpass { background-color: #e8ecef; display: flex; height: 50vh; width: 100vw; margin-left: 240px; flex-wrap: wrap; flex-direction: column; overflow: hidden; justify-content: space-between; } #allpass div { justify-content: center; }