* {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
      }
      
      body {
          font-family: 'Nunito', sans-serif;
          font-weight: 400;
          font-size: 100%;
          background: #F1F1F1;
      }
      
      *, html {
          --primaryGradient: linear-gradient(93.12deg, #00104f 0.52%, #0803b4 100%);
          --secondaryGradient: linear-gradient(268.91deg, #00104f -2.14%, #0803b4 99.69%);
          --primaryBoxShadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
          --secondaryBoxShadow: 0px -10px 15px rgba(0, 0, 0, 0.1);
          --primary: #093A8A;
      }
      
      /* CHATBOX
      =============== */
      .chatbox {
          position: absolute;
          bottom: 30px;
          right: 30px;
      }
      
      /* CONTENT IS CLOSE */
      .chatbox__support {
          display: flex;
          flex-direction: column;
          background: #eee;
          width: 300px;
          height: 350px;
          z-index: -123456;
          opacity: 0;
          transition: all .5s ease-in-out;
      }
      
      /* CONTENT ISOPEN */
      .chatbox--active {
          transform: translateY(-40px);
          z-index: 123456;
          opacity: 1;
      
      }
      
      /* BUTTON */
      .chatbox__button {
          text-align: right;
      }
      
      .send__button {
          padding: 6px;
          background: transparent;
          border: none;
          outline: none;
          cursor: pointer;
      }
      
      
      /* HEADER */
      .chatbox__header {
          position: sticky;
          top: 0;
          background: orange;
      }
      
      /* MESSAGES */
      .chatbox__messages {
          margin-top: auto;
          display: flex;
          overflow-y: scroll;
          flex-direction: column-reverse;
      }
      
      .messages__item {
          background: orange;
          max-width: 60.6%;
          width: fit-content;
      }
      
      .messages__item--operator {
          margin-left: auto;
      }
      
      .messages__item--visitor {
          margin-right: auto;
      }
      
      /* FOOTER */
      .chatbox__footer {
          position: sticky;
          bottom: 0;
      }
      
      .chatbox__support {
          background: #f9f9f9;
          height: 450px;
          width: 350px;
          box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
          border-top-left-radius: 20px;
          border-top-right-radius: 20px;
      }
      
      /* HEADER */
      .chatbox__header {
          background: var(--primaryGradient);
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          padding: 15px 20px;
          border-top-left-radius: 20px;
          border-top-right-radius: 20px;
          box-shadow: var(--primaryBoxShadow);
      }
      
      .chatbox__image--header {
          margin-right: 10px;
      }
      
      .chatbox__heading--header {
          font-size: 1.2rem;
          color: white;
      }
      
      .chatbox__description--header {
          font-size: .9rem;
          color: white;
      }
      .chatbox__version {
                font-size: .7rem;
                color: rgb(190, 190, 190);
            }
      .chatbox__verhead {
                font-size: .8rem;
                color: rgb(190, 190, 190);
                font-weight: bold;
            }
      
      /* Messages */
      .chatbox__messages {
          padding: 0 20px;
      }
      
      .messages__item {
          margin-top: 10px;
          background: #E0E0E0;
          padding: 8px 12px;
          max-width: 85%;
          white-space: pre-line;
          
      }
      
      .messages__item--visitor,
      .messages__item--typing {
          border-top-left-radius: 20px;
          border-top-right-radius: 20px;
          border-bottom-right-radius: 20px;
      }
      
      .messages__item--operator {
          border-top-left-radius: 20px;
          border-top-right-radius: 20px;
          border-bottom-left-radius: 20px;
          background: var(--primary);
          color: white;
      }
      
      /* FOOTER */
      .chatbox__footer {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          padding: 20px 20px;
          background: var(--secondaryGradient);
          box-shadow: var(--secondaryBoxShadow);
          border-bottom-right-radius: 10px;
          border-bottom-left-radius: 10px;
          margin-top: 20px;
      }
      
      .chatbox__footer input {
          width: 80%;
          border: none;
          padding: 10px 10px;
          border-radius: 30px;
          text-align: left;
      }
      
      .chatbox__send--footer {
          color: white;
      }
      
      .chatbox__button button,
      .chatbox__button button:focus,
      .chatbox__button button:visited {
          padding: 10px;
          background: white;
          border: none;
          outline: none;
          border-top-left-radius: 50px;
          border-top-right-radius: 50px;
          border-bottom-left-radius: 50px;
          box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
          cursor: pointer;
      }