.logo-container { display: flex; justify-content: center; align-items: center; height: 100px; text-decoration: none; color: white; font-weight: bold; font-size: 24px; padding-top: 20px; } body { margin: 0; padding: 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(/public/img/gg.png); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; font-family: Arial, sans-serif; } .sidebar { width: 250px; background-color: #333; color: white; height: 100%; position: fixed; } .logo a { display: flex; justify-content: center; align-items: center; height: 100px; text-decoration: none; color: white; font-weight: bold; font-size: 24px; padding-top: 20px; } .navbar ul { list-style-type: none; padding: 0; margin: 0; } .navbar ul li { padding: 10px 0; } .navbar ul li a { display: block; text-decoration: none; color: white; padding: 10px 20px; } .content { margin-left: 250px; padding: 20px; box-sizing: border-box; } .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; padding: 20px; margin-left: 260px; color: white; } .widget { background-color: gray; border: 1px solid #ddd; border-radius: 5px; padding: 20px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); } .card { width: 150px; background-color: gray; box-shadow: 5px 5px 20px 5px rgba(0, 0, 0, 0.3); } .table { background-color: white; } /* .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 999; } .popup-content { background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); } */ /* The switch - the box around the slider */ .switch { position: relative; display: inline-block; width: 60px; height: 34px; } /* Hide default HTML checkbox */ .switch input { opacity: 0; width: 0; height: 0; } /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: 0.4s; transition: 0.4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: 0.4s; transition: 0.4s; } input:checked + .slider { background-color: #2196f3; } input:focus + .slider { box-shadow: 0 0 1px #2196f3; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } .Search { background-color: white; }