adjusted css to target specific buttons, removed gradio class declarations because gradio

app.py

@@ -5,9 +5,9 @@ openai.api_key = "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"
 
 theme = gr.themes.Monochrome()
 css = "@import url(https://fonts.googleapis.com/css2?family=Silkscreen&display=swap);.gradio-container{" \
-      "background-color:#cda678;font-family:Silkscreen;position:relative}.secondary.svelte-58yet2{" \
-      "background-color:#002366}.abs-window{position:absolute;right:50%;top:50%;transform:translateX(-50%) " \
-      "translateY(-50%)}"
+      "background-color:#cda678;font-family:Silkscreen;position:relative}.tabitem{" \
+      "background-color:#000}.secondary.svelte-58yet2{background-color:#002366}#component-48,#component-51{" \
+      "position:absolute;right:50%;top:50%;transform:translateX(-50%) translateY(-50%);width:50%}"
 
 with gr.Blocks(theme=theme, css=css) as iface:
     chatbot = []
@@ -104,11 +104,11 @@ with gr.Blocks(theme=theme, css=css) as iface:
                 "mostly medieval. You have a bubbly personality. "]
 
     with gr.Row() as chatRow:
-        with gr.Column(scale=2):
+        with gr.Column(scale=1):
             questionCounter = gr.Label(label="Remaining Questions", value="24")
             mapButton = gr.Button("Show Floor Plan")
             finishButton = gr.Button("Try to Solve")
-        with gr.Column(scale=10):
+        with gr.Column(scale=6):
             i = 0
             while i < len(roles):
                 with gr.Tab(roles[i]):
@@ -117,21 +117,21 @@ with gr.Blocks(theme=theme, css=css) as iface:
                             chatbot.append(gr.Chatbot(label=roles[i]))
                             msg.append(gr.Textbox(label=""))
                         with gr.Column(scale=3):
-                            characterImage = gr.Label(label="", elem_classes="character-image-" + str(i))
+                            characterImage = gr.Label(label="")
                 i += 1
 
-    with gr.Row(visible=False, elem_classes="abs-window") as mapRow:
+    with gr.Row(visible=False) as mapRow:
         with gr.Column():
-            closeMapButton = gr.Button("X", elem_classes="close-button")
+            closeMapButton = gr.Button("X")
 
-    with gr.Row(visible=False, elem_classes="abs-window") as solvingRow:
+    with gr.Row(visible=False) as solvingRow:
         i = 0
         while i < len(roles):
             with gr.Column():
                 accusationButtons.append(gr.Button(roles[i]))
             i += 1
 
-        closeSolvingButton = gr.Button("X", elem_classes="close-button")
+        closeSolvingButton = gr.Button("X")
 
     with gr.Row(visible=False) as resultRow:
         with gr.Column():

style.css

@@ -6,13 +6,18 @@
     position: relative;
 }
 
+.tabitem {
+    background-color: #000;
+}
+
 .secondary.svelte-58yet2 {
     background-color: #002366;
 }
 
-.abs-window {
+#component-48, #component-51 {
     position: absolute;
     right: 50%;
     top: 50%;
     transform: translateX(-50%) translateY(-50%);
+    width: 50%;
 }