Change design of chat causes lag

[SrPeter]

Hi!
I’m trying to change the design of CfxChat
The problem is, that when I change the background from the chat-window, chat-input and chat-suggestions I have lag problems in my server? This is the only thing I change from index.css and I also delete the resource chat-theme-gtao

Original:

.chat-window {
  position: absolute;
  top: 1.5%;
  left: 0.8%;
  width: 38%;
  height: 22%;
  max-width: 1000px;
  background-color: rgba(52, 73, 94, 0.7);
  -webkit-animation-duration: 2s;
}

.chat-input > div.input {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  background-color: rgba(44, 62, 80, 1.0);
}

.suggestions {
  list-style-type: none;
  padding: 0.5%;
  padding-left: 1.4%;
  font-size: 1.65vh;
  box-sizing: border-box;
  color: white;
  background-color: rgba(44, 62, 80, 1.0);
  width: 100%;
}

My edit:

.chat-window {
  position: absolute;
  top: 1.5%;
  left: 0.8%;
  width: 38%;
  height: 22%;
  max-width: 1000px;
  background-color: transparent!important; /*CHANGED*/
  -webkit-animation-duration: 2s;
}

.chat-input > div.input {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  background-color: rgba(36, 36, 36, 0.85); /*CHANGED*/
  border-radius: 0.625rem; /*CHANGED*/
}

.suggestions {
  list-style-type: none;
  padding: 0.5%;
  padding-left: 1.4%;
  font-size: 1.65vh;
  box-sizing: border-box;
  color: white;
  background-color: rgba(36, 36, 36, 0.85); /*CHANGED*/
  border-radius: 0.625rem; /*CHANGED*/
  width: 100%;
}

The type of lag I get is opening the chat when character loads, some long wait on some other resources and in some commands like /revive it takes a long time to take action and takes another few seconds before I can open the chat
When I change the css I do have to delete the server cache because the design doesn’t change

[nta]

Don’t ‘change’ any files in the existing resource. Make a custom theme, instead.

[SrPeter]

Any tutorial/guide on how to do this?