body { font-family: 'Roboto'; height: 100vh; margin: 0; background: url('wallpaper3.png') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: 100% auto; } canvas { margin-top:12%; margin-left:22%; position: absolute; padding: 20px; } #sidebar{ position: absolute; min-width: 14%; max-width:14%; margin-left: 1%; padding: 20px; border-radius: 20px; background-color: rgba(228, 228, 228, 0.664); align-items: left; height: 90vh; border: 10px solid #5a2020; overflow-y: auto; } #statcontainer{ border: 5px solid #5a2020; min-width:150px; max-width: 150px; height: 150px; border-radius: 20px; align-items: left; padding: 2px 10px 2px 10px; height: 170px; background-color: rgba(228, 228, 228, 0.664); margin-top: 10px; position: absolute; margin-left:65%; } .sidebar-button{ transition: ease-in 0.2s; margin-top: 5px; text-align: left; width: 100%; font-size: 20px; height: 33px; padding: 2px; border-radius: 10px; border: 0px; } .sidebar-button:hover{ transition: ease-in 0.2s; background-color: #792c2c; color:white; } .buttoncon{ display: flex; align-items: flex-start; } .scrolling-container { background-color: rgba(228, 228, 228, 0.664); border-radius: 20px; position: absolute; margin-left: 41%; margin-top: 8px; width: 300px; /* Adjust the width as needed */ white-space: nowrap; overflow-x: auto; padding: 10px; border: 5px solid #5a2020; } .scrbtn{ transition: ease-in-out 0.25s; display: inline-block; padding: 10px 20px; /* Adjust the padding as needed */ margin: 5px; /* Optional: Add margin between buttons */ background-color: #792c2c; color: #792c2c; border: none; cursor: pointer; border-radius: 15px; } .scrbtn:hover{ transition: ease-in-out 0.25s; border-radius: 20px; color:white; } .scr{ font-weight: bolder; transition: ease-in 0.5s; border-radius: 20px; display: inline-block; padding: 10px 20px; /* Adjust the padding as needed */ margin: 5px; /* Optional: Add margin between buttons */ background-color: #ffffffb2; color: #000000; border: none; cursor: pointer; } .scr:hover{ color:#000000 } ::-webkit-scrollbar { width: 10px; background-color: #792c2c; border-radius: 10px; } ::-webkit-scrollbar-thumb { background-color: #8b5252; border-radius: 10px; width: 50px; } .alertscon{ position: absolute; margin-left: 78%; margin-top: 6%; height: 70px; background-color: rgba(228, 228, 228, 0.779); width :155px; border-radius: 20px; padding:10px; border: 5px solid #5a2020; overflow-y: auto; } .detailcon{ z-index: 1; min-width:160px; max-width: 160px; border-radius: 10px; align-items: left; padding: 10px; background-color: aliceblue; margin-top: 1%; position: absolute; margin-left:78%; } #sellall{ margin-top: 5px; padding: 5px; border-radius: 5px; background-color: #aeaeae; border: 0px; } #sellall:hover{ transition: ease-in-out 0.25s; border-radius: 10px; background-color: #792c2c; color:white; } #summaryElement{ max-height: 200px; overflow-y: auto; } #insts{ margin-top: 3%; margin-left: 10%; padding: 10px; border-radius: 15px; background-color: #d3d3d3; border: 0px; position: absolute; width: fit-content; z-index: 0; }