.Games { width: 100%; float: left; } .Games .left-side { float: left; width: 45%; /* max-width: 400px; */ /* height: 100px; */ display: flex; flex-direction: column; justify-content: center; align-items: center; } .Games .right-side { float: left; width: 55%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .ViewSelector { text-align: center; margin-bottom: 10px; background-color: lightgrey; width: 100%; padding-top: 8px; padding-bottom: 8px; color: black; } .ViewSelector a { color: black; text-decoration: none; transition: .25s ease; margin-left: 5px; margin-right: 5px; } .ViewSelector .active { color: white; border-radius: 2px; background-color: cadetblue; opacity: 80%; padding-top: 8px; padding-bottom: 8px; } .ViewSelector a:hover:not(.active) { color: cadetblue; box-shadow: 0 1.5px 0 0 currentColor; } .ViewProvider { display: flex; flex-direction: column; justify-content: center; align-items: center; } .ActionPanel { text-align: center; margin-bottom: 10px; height: 34.5px; /* background-color: lightgrey; */ width: 100%; /* padding-top: 8px; padding-bottom: 8px; */ color: black; padding-left: -10px; /* */ margin-left: 10px; border: 0.5px dotted lightslategray; } .ActionPanel button { width:fit-content; padding: 6px; padding-left: 15px; padding-right: 15px; border-radius: 5px; border: 0.5px solid darkgrey; margin: 2px; } .ActionPanel .Create:hover, /* OR */ .game-action.busy { background-color:#00b0ff60; } .ActionPanel .Create.enabled:active { background-color:#00b0ffa0; } .ActionPanel .Cancel:hover, .ActionPanel .Reject:hover { background-color:#ff000030 } .ActionPanel .Cancel:active, .ActionPanel .Reject:active { background-color:#ff000080 } .ActionPanel .Accept:hover { background-color: #00af0030; } .ActionPanel .Accept:active { background-color:#00af0080; }