options.css

      .GPTExtensionbody {
        font-family: sans-serif;
        margin: 0;
        padding: 0;
        background-color: #E9E9CA;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;        
      }

      .GPTExtensionh1 {
        margin-bottom: 5px;
        font-size: 36px;
        text-align: center;
      }


      .GPTExtensionForm {
        background-color: #ffffcc;
        padding: 5px;
        border-radius: 5px;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
        margin: 0 auto;
        width: 590px;
        resize: both;
        /* enable resizing for form */
        overflow: auto;
        /* add overflow to show scrollbars when form is resized */
      }

      .GPTExtensionlabel {
        display: inline-block;
        width: 80%;
        margin-bottom: 5px;
        font-weight: bold;
        height: 5%;
        /* adjust height for label */
      }

      .GPTExtensioninput[type=text] {
        width: 100%;
      }

      .GPTExtensioninput[type=password] {
        width: 100%;
      }

      .GPTExtensionnameinput[type=text] {
        width: 30%;
        font-weight: bold;
      }


      .GPTExtensioninput[type=text],
      .GPTExtensioninput[type=password],
      .GPTExtensionnameinput[type=text],
      .GPTExtensionselect,
      .GPTExtensiontextarea {
        margin-bottom: 1%;
        /* adjust margin for inputs, select, and buttons */
        font-size: 1em;
        display: block;
        padding: 5px;
        border: 2px solid #ccc;
        background-color: #ffffe9;
        color: #111;        
        border-radius: 5px;
        box-sizing: border-box;
      }

      .GPTExtensionrespons-container {
        border: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
      }

      .GPTExtensionrespons-checkbox {
        display: inline-block;
        vertical-align: top;
        margin-right: 10px;
      }

      .GPTExtensionrole {
        display: inline-block;
        width: 32px;
        height: 32px;
        vertical-align: top;
        background-color: #F3F8D7;
        margin-right: 10px;
      }

      .GPTExtensionrole img {
        width: 100%;
        height: 100%;
      }

      .GPTExtensioncontext {
        display: inline-block;
        width: calc(100% - 42px);
        vertical-align: top;
      }



      .GPTExtensionlabel {
        display: inline-block;
        width: 80%;
        margin-bottom: 5px;
        font-weight: bold;
      }

      .GPTExtensiontextareablur {
        display: block;
        width: 100%;
        padding: 5px;
        margin-bottom: 5px;
        border: 2px solid #ccc;
        background-color: #ffffe9;
        color: #111;               
        border-radius: 5px;
        box-sizing: border-box;
        font-size: 1em;
        height: calc(1em + 15px);
        /* Set initial height to one line */
        resize: none;
        /* Prevent resizing */
      }


      .GPTExtensionresponse {
        background-color: #ffffe9;
        color: #111;
        width: 100%;
        border: 1px solid #ccc;
        height: 40%;
        overflow: auto;
        max-height: 40%;
        box-sizing: border-box;
      }


      .GPTExtensiontextarea {
        width: 100%;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 1px;
        box-sizing: border-box;
        margin-bottom: 5px;
        background-color: #ffffe9;
        color: #111;
        height: 30%;
        resize: none;
      }

      .GPTExtensionselect {
        display: block;
        padding: 5px;
        margin-bottom: 5px;
        border: 1px solid #ccc;
        background-color: #ffffe9;
        color: #111;
        border-radius: 1px;
        box-sizing: border-box;
        display: inline-block;
        font-weight: bold;
      }

      .GPTExtensionimg {
        padding: 5px;
        margin-top: 5px;
        position: absolute;
        top: 0;
        right: 0;
      }

      #copyButton,
      #copyToEditButton {
        cursor: pointer;
        /* change the cursor to a pointer when hovering over the image */
        border: none;
        /* remove the default border */
        background: transparent;
        /* make the background transparent */
      }

      #copyButton,
      #copyToEditButton:hover {
        opacity: 0.8;
        /* reduce the opacity of the image when the mouse hovers over it */
      }




      .GPTExtensionbutton {
        display: block;
        background-color: #4285f4;
        color: #ffffff;
        border: none;
        border-radius: 1px;
        padding: 5px 5px;
        margin-bottom: 1px;
        margin-left: 5px;
        cursor: pointer;

      }

      .GPTExtensionbutton:hover {
        background-color: #3c78d8;
      }

      .GPTExtensionbutton:active {
        background-color: #2c5ca6;
      }


      .GPTExtensionbutton-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      #pinicon {
        margin: 0 auto; /* centers the pin icon */
      }
      
      #importcontexticon,
      #exportcontexticon,
      #optionsbutton {
        margin-left: 10px; /* aligns the icons to the right */
      }


      #GPTExtensionprofiles-list {
        margin: 0px;
        padding-left: 25px;
      }

      .GPTExtensionli {
        position: relative;
        padding-left: 0px;
        cursor: pointer;
      }