/* Accordion Style Sheet */

.thub-accordion .thub-accordion-item {
    margin-bottom: 20px;
    padding: 30px 40px;
    border: 1px solid #D1D1D1;
    border-radius: 10px;
}

.thub-accordion h3 {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.thub-accordion .thub-accordion-content ul {
    margin-bottom: 20px;
    margin-left: 15px;
}

.thub-accordion .thub-accordion-content ul li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.thub-accordion-title {
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: space-between;
}

.thub-accordion-title h2,
.thub-accordion-title h3 {
    font-size: 1.2rem;
    margin-bottom: unset;
    display: inline;
}

.thub-accordion-title h2 {
    margin-right: 10px;
    font-weight: 700;
}

.thub-accordion-title h3 {
    font-weight: 400;
}

.thub-accordion-toggle {
    margin: 5px 5px 5px 10px;
}

.thub-accordion-toggle::after {
    content: '';
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="21.829" height="12.328" viewBox="0 0 21.829 12.328"><path id="Pfad_1" data-name="Pfad 1" d="M20.414,0l-9.5,9.5L1.414,0,0,1.414,10.915,12.328,21.829,1.414Z" transform="translate(0 0)"/></svg>');
    width: 22px;
    height: 12px;
    display: block;
    background-repeat: no-repeat;
}

.thub-accordion-title.active .thub-accordion-toggle::after {
    content: '';
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18.035" height="18.035" viewBox="0 0 18.035 18.035"><g id="Gruppe_10" data-name="Gruppe 10" transform="translate(-1576.793 -660.793)"><line id="Linie_3" data-name="Linie 3" y1="16.621" x2="16.621" transform="translate(1577.5 661.5)" fill="none" stroke="%23000" stroke-width="2"/><line id="Linie_4" data-name="Linie 4" x1="16.621" y1="16.621" transform="translate(1577.5 661.5)" fill="none" stroke="%23000" stroke-width="2"/></g></svg>');
    width: 18px;
    height: 18px;
    display: block;
    background-repeat: no-repeat;
}

.thub-accordion-content {
    padding: 30px 0 0 0;
    display: none;
}

@media (max-width: 999px) {
    .thub-accordion-title h2,
    .thub-accordion-title h3 {
        display: block;
    }

    .thub-accordion-title h2 {
        margin-right: 20%;
    }

    .thub-accordion-title h3 {
        margin-top: 5px;
    }
}

@media (max-width: 499px) {
    .thub-accordion .thub-accordion-item {
        padding: 15px 20px;
    }

    .thub-accordion-toggle {
        margin: 5px 0px;
    }

    .thub-accordion-title h2,
    .thub-accordion-title h3 {
        font-size: 1.1rem;
    }
}
/* Documentation Style Sheet */

.thub-document-table span {
  color: #ffffff;
}

.thub-document-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.thub-document-table th,
.thub-document-table td {
  text-align: left;
  padding: 12px 0;
}

.thub-document-table th {
  border-bottom: 1px solid #000;
  font-weight: 600;
  font-size: 1.2rem;
}

.thub-document-table tr:not(:last-child) {
  border-bottom: 1px solid #ddd;
}

.thub-document-table td a {
  text-decoration: none;
  display: flex;
  width: min-content;
  gap: 10px;
  align-items: center;
}

.thub-document-table td {
  padding: 10px 0;
}

.thub-document-table th:first-child,
.thub-document-table td:first-child {
  white-space: nowrap;
  width: 25%;
  min-width: 100px;
}

.thub-document-table td:last-child {
  display: flex;
  justify-content: right;
}

.thub-document-table tbody td:nthub-child(2) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.thub-document-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

#thub-doc-search {
  border-radius: 20px;
  padding: 10px 15px;
  margin-left: 10px;
  background-color: #fff;
  border: 1px solid #aaa;
  color: #000;
  margin-left: 0;
}

.thub-icon-download::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.07" height="15.907" viewBox="0 0 15.07 15.907"><g id="Gruppe_39" data-name="Gruppe 39"><path id="Pfad_8" data-name="Pfad 8" d="M7.361,8.863V.837a.837.837,0,0,0-1.674,0V8.863L2.93,6.107A.838.838,0,0,0,1.745,7.29l4.779,4.777L11.3,7.29a.838.838,0,1,0-1.185-1.184Z" transform="translate(1.011)" fill="%23fff"/><path id="Pfad_9" data-name="Pfad 9" d="M.837,6.5a.838.838,0,0,1,.837.837v1.34A1.171,1.171,0,0,0,2.847,9.849h9.377A1.171,1.171,0,0,0,13.4,8.677V7.337a.837.837,0,1,1,1.674,0v1.34a2.846,2.846,0,0,1-2.847,2.847H2.847A2.846,2.846,0,0,1,0,8.677V7.337A.838.838,0,0,1,.837,6.5" transform="translate(0 4.384)" fill="%23fff"/></g></svg>');
  content: '';
  display: inline-block;
  width: 15px;
  height: 16px;
}

.thub-icon-open::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><g id="Gruppe_99" data-name="Gruppe 99" transform="translate(-3 -0.01)"><g id="Gruppe_98" data-name="Gruppe 98" transform="translate(3 0.188)"><path id="Pfad_27" data-name="Pfad 27" d="M39.331,2.313A2.317,2.317,0,0,0,37.018,0H33.934a.771.771,0,0,0,0,1.542H36.7L31.718,6.523a.771.771,0,0,0,0,1.09.78.78,0,0,0,1.09,0l4.981-4.981V5.4a.771.771,0,1,0,1.542,0Z" transform="translate(-23.398 -0.113)" fill="%23fff"/><path id="Pfad_28" data-name="Pfad 28" d="M.648,20.165a3.813,3.813,0,0,0,1.064,1.064c.972.65,2.393.65,5.225.65s4.254,0,5.225-.65a3.813,3.813,0,0,0,1.064-1.064c.617-.923.648-2.251.65-4.711a.771.771,0,0,0-1.542,0c0,2.228-.041,3.334-.388,3.855a2.281,2.281,0,0,1-.637.637c-.583.391-1.928.391-4.369.391s-3.786,0-4.369-.391a2.315,2.315,0,0,1-.637-.637c-.391-.583-.391-1.928-.391-4.369s0-3.786.391-4.369a2.315,2.315,0,0,1,.637-.637c.522-.35,1.63-.388,3.855-.391A.771.771,0,1,0,6.425,8c-2.462,0-3.788.031-4.711.65A3.847,3.847,0,0,0,.65,9.714C0,10.686,0,12.107,0,14.94s0,4.254.65,5.225Z" transform="translate(0 -6.057)" fill="%23fff"/></g></g></svg>');
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
}

@media (max-width: 768px) {

  .thub-document-table th:first-child,
  .thub-document-table td:first-child {
    max-width: 50px;
    width: unset;
    min-width: unset;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 20px;
  }

  .thub-hide-text-mobile {
    display: none;
  }

  .thub-document-controls {
    display: unset;
  }

  .thub-select {
    margin-top: 15px;
  }

  #thub-doc-search {
    margin-right: 15px;
  }
}

@media (max-width: 449px) {
  main .wp-container-core-group-is-layout-1.wp-container-core-group-is-layout-1 {
    flex-wrap: wrap;
  }
}
/* Ticket Form Style Sheet */

.thub-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
    padding: 0;
    margin: 0;
    max-width: 600px
}

.thub-form label {
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    font-weight: 500;
    padding: 0;
    margin: 0;
    margin-bottom: .5rem;
    color: #333;
    font-size: 16px
}

.thub-form label span {
    color: red;
    display: contents;
}

.thub-form input[type="text"],
.thub-form input[type="email"],
.thub-form textarea {
    margin: 0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    color: #333;
    width: 100%;
    box-sizing: border-box;
    margin-top: 5px
}

.thub-form textarea {
    height: 150px
}

.thub-form input,
.thub-form select,
.thub-form textarea {
    margin-top: 5px
}

.thub-form select,
.thub-form input[type="submit"] {
    width: min-content
}

.thub-file-upload {
    border: none;
    padding-left: 0
}

.thub-file-upload::file-selector-button {
    color: #eee;
    background-color: #000;
    border-radius: 20px;
    padding: 10px 15px;
    margin-right: 15px;
    border: none;
    font-size: 15px
}

/* Styles for success and error messages */

.thub-form .notice {
    padding: 15px;
    margin: 15px 0;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.thub-form .notice-success {
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    color: #3c763d;
}

.thub-form .notice-error {
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    color: #a94442;
}
.thub-profile-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#thub-loginform {
    max-width: 600px;
}

.thub-profile-head+p {
    margin-bottom: 60px;
}

#thub-loginform input[type="checkbox"] {
    padding: 10px;
    position: relative;
    border: 1px solid #ccc;
    margin-right: 10px;
    border-radius: 5px;
    float: left;
    margin-top: 2px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
}

#thub-loginform input[type="text"],
#thub-loginform input[type="password"] {
    margin: 0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    color: #333;
    width: 100%;
    box-sizing: border-box;
    margin-top: 5px;
}

#thub-loginform input[type="checkbox"]::before {
    content: '';
    position: absolute;
    left: 10px;
    top: -6px;
    width: 8px;
    height: 18px;
    border: solid #000000;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    opacity: 0;
}

#thub-loginform input[type="checkbox"]:checked::before {
    opacity: 1;
}

#thub-loginform .button {
    width: auto;
    padding: 10px 25px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #000;
    color: #eee;
    border: none;
    border-radius: 25px;
    font-size: 15px;
}

#thub-loginform .button:hover {
    background-color: #262626;
}

.thub-button {
    text-decoration: none;
}
/* Single Ticket Style Sheet */

.thub-ticket-details>h3,
.thub-ticket-details>div:not(.thub-ticket-images):not(.thub-related-tickets),
.thub-ticket-details>a,
.thub-ticket-comments {
  padding-bottom: 20px;
}

.thub-ticket-details>h3 {
  margin-top: 30px;
}

.thub-ticket-comment {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.thub-ticket-details h4,
.thub-ticket-comments h4 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.thub-ticket-comments h4 {
  font-size: 1.5rem;
}

.thub-ticket-attachments {
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.thub-back-to-archive {
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
  padding-bottom: unset !important;
  margin-left: 5px;
}

.thub-back-to-archive svg {
  margin-right: 10px;
}

.thub-back-to-archive:hover {
  border-bottom: 2px solid #000000;
}

.thub-ticket-image {
  width: 300px;
  transition: filter 0.3s ease;
}

.thub-ticket-image:hover {
  filter: brightness(50%);
}

.thub-ticket-info {
  display: flex;
  justify-content: space-between;
}

.thub-comment-date>p {
  color: #999;
}

.thub-image-container {
  width: min-content;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thub-image-container::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  max-height: 100%;
  max-width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 67.3 67.24'%3E%3Cstyle%3E.st0%7Bfill:%23FFFFFF;%7D%3C/style%3E%3Cg transform='translate(0 -0.17)'%3E%3Cpath class='st0' d='M33.83,2.35c-17.72,0-32.08,14.36-32.08,32.08s14.36,32.08,32.08,32.08s32.08-14.36,32.08-32.08 C65.9,16.72,51.54,2.37,33.83,2.35 M33.83,62.95c-15.75,0-28.52-12.76-28.53-28.51c0-15.75,12.76-28.52,28.51-28.53 c15.75,0,28.52,12.76,28.53,28.51c0,0,0,0.01,0,0.01C62.33,50.17,49.57,62.93,33.83,62.95'/%3E%3Cpath class='st0' d='M44.52,32.65h-8.91v-8.91c0-0.98-0.8-1.78-1.78-1.78c-0.98,0-1.78,0.8-1.78,1.78l0,0v8.91h-8.91 c-0.98,0-1.78,0.8-1.78,1.78c0,0.98,0.8,1.78,1.78,1.78l0,0h8.91v8.91c0,0.98,0.8,1.78,1.78,1.78c0.98,0,1.78-0.8,1.78-1.78v-8.91 h8.91c0.98,0,1.78-0.8,1.78-1.78C46.31,33.45,45.51,32.65,44.52,32.65'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.thub-image-container:hover::after {
  opacity: 1;
}

.thub-comment-wrapper {
  position: relative;
}

.thub-vertical-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  background: #eee;
  border-radius: 5px;
}

.thub-comment-area {
  resize: none;
  font-size: 1rem;
  padding: 30px;
  background: #eee;
  border-radius: 5px;
  border: none;
  margin-bottom: 30px;
  color: #24133b;
  max-width: 600px;
}

.thub-comment-area::placeholder {
  color: #24133b;
}

.thub-ticket-details+hr {
  background-color: #D1D1D1;
  margin-bottom: 50px;
  height: 1px;
  border: 0;
}

/* Lightbox */

.thub-lightbox-backdrop {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}

.thub-lightbox-content {
  margin: 10% auto;
  display: flex;
  max-width: 100vw;
}

.thub-lightbox-backdrop img {
  -webkit-animation-name: zoom;
  animation-name: zoom;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

.thub-related-tickets {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  background-color: #eee;
  padding: 10px 15px 10px 30px;
  border-radius: 50px;
  flex-shrink: 1;
  margin-bottom: 20px;
}

.thub-related-tickets>div:not(:first-child) {
  background-color: #000;
  padding: 8px 16px;
  border-radius: 25px;
}

.thub-related-tickets>div:not(:first-child) a {
  color: #eee;
  text-decoration: none;
}

.thub-related-tickets>div:not(:first-child):hover {
  background-color: #262626;
}

#thub-comment-form {
  display: flex;
  flex-direction: column;
}

#thub-comment-form .thub-button {
  width: fit-content;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0)
  }

  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

.thub_ticket-comment-form .logged-in-as {
  display: none;
}

@media (max-width: 999px) {
  .thub-ticket-info {
    display: unset;
  }

  .ticket-field {
    padding-bottom: 20px;
  }
}

.thub-ticket-details::before {
  content: '';
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="13" viewBox="0 0 22 13"><g id="Gruppe_54" data-name="Gruppe 54" transform="translate(21.648 13) rotate(180)"><g id="Gruppe_53" data-name="Gruppe 53" transform="translate(-0.355)"><path id="Pfad_16" data-name="Pfad 16" d="M21.639,6.363a1.071,1.071,0,0,0-.258-.657L16.289.3A1.093,1.093,0,0,0,14.9.217a.994.994,0,0,0,.01,1.392l3.58,3.8H.955a.955.955,0,1,0,0,1.909H18.487l-3.58,3.8a1.052,1.052,0,0,0-.01,1.392,1.079,1.079,0,0,0,1.392-.08l5.092-5.41A.919.919,0,0,0,21.639,6.363Z" transform="translate(0.364 0)" /></g></g></svg>');
  display: inline-block;
  width: 22px;
  height: 13px;
}
/* Ticket Archive Style Sheet */

.thub-ticket-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.thub-ticket-table th,
.thub-ticket-table td {
  text-align: left;
  padding: 12px 0px;
}

.thub-ticket-table th {
  border-bottom: 1px solid #000;
  font-weight: 600;
  font-size: 1.2rem;
}

.thub-ticket-table tr:not(:last-child) {
  border-bottom: 1px solid #ddd;
}

.thub-ticket-table td a {
  text-decoration: none;
}

.thub-ticket-table td a:hover {
  border-bottom: 2px solid #000000;
}

.ticket-description {
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thub-status-chip {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 16px;
  background-color: #ccc;
  color: #fff;
  font-size: 0.8em;
}

.thub-status-chip[data-status='New'] {
  background-color: rgb(74, 158, 206);
}

.thub-status-chip[data-status='Processing'] {
  background-color: rgb(174, 36, 197);
}

.thub-status-chip[data-status='Done'] {
  background-color: rgb(76, 168, 164);
}

.thub-ticket-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap-reverse;
  padding: 10px 0;
  row-gap: 20px;
}

#thub-ticket-status,
#thub-ticket-type {
  margin-left: 10px;
}

#thub-ticket-search {
  border-radius: 20px;
  padding: 10px 15px;
  margin-left: 10px;
  background-color: #fff;
  border: 1px solid #aaa;
  color: #000;
  margin-left: 0;
  width: auto;
}

.thub-mobile-table-header {
  display: none;
}

.thub-tickets-filter-container {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

.thub-switch-container {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 3px 5px 3px 25px;
  background-color: #eee;
  border-radius: 25px;
  font-size: 15px;
}

/* The switch - the box around the thub-slider */
.thub-switch {
  scale: 60%;
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.thub-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The thub-slider */
.thub-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.thub-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.thub-slider {
  background-color: #000;
}

input:focus+.thub-slider {
  box-shadow: 0 0 1px #000;
}

input:checked+.thub-slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.thub-slider.thub-round {
  border-radius: 34px;
}

.thub-slider.thub-round:before {
  border-radius: 50%;
}

.thub-pagination-wrap {
  display: flex;
  padding: 10px 0px;
}

.thub-page-number {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: #eee;
  /* Default background color */
  color: #333;
  text-align: center;
  border-radius: 50%;
  /* Makes the buttons circular */
  width: 35px;
  height: 35px;
  line-height: 35px;
  /* Centers the text vertically */
  margin: 5px;
  cursor: pointer;
  outline: none;
  /* Removes focus outline */
  transition: background-color 0.3s;
  /* Smooth background color transition */
  font-size: 15px;
}

.thub-page-number a {
  text-decoration: none;
}

.thub-page-number:hover {
  background-color: #ddd;
  /* Hover background color */
}

.thub-page-number.active {
  background-color: #000;
  /* Active page background color */
  color: #fff;
}

.next {
  background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'9.528\' height=\'16.871\' viewBox=\'0 0 9.528 16.871\'%3E%3Cpath id=\'Pfad_20\' data-name=\'Pfad 20\' d=\'M15.777,0,8.436,7.342,1.093,0,0,1.093,8.436,9.528l8.435-8.435Z\' transform=\'translate(0 16.871) rotate(-90)\'/%3E%3C/svg%3E');
  background-position: center;
  background-repeat: no-repeat;
  width: 15px;
  height: 15px;
}

.prev {
  background-image: url('data:image/svg+xml,<svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_1_2)"><path d="M9.528 15.777L2.186 8.436L9.528 1.093L8.435 0L0 8.436L8.435 16.871L9.528 15.777Z" fill="black"/></g><defs><clipPath id="clip0_1_2"><rect width="9.528" height="16.871" fill="white" transform="matrix(-1 0 0 -1 9.528 16.871)"/></clipPath></defs></svg>');
  background-position: center;
  background-repeat: no-repeat;
  width: 15px;
  height: 15px;
}

@media (max-width: 768px) {
  .thub-ticket-controls .thub-tickets-filter-container {
    display: block;
    max-width: 150px;
    margin-top: 30px;
  }

  .thub-ticket-table td,
  .thub-ticket-table tr {
    display: block;
    padding: 5px 0px;
    min-height: 28px;
  }

  .thub-ticket-table tr {
    padding: 20px 0;
  }

  .thub-ticket-table thead {
    display: none;
  }

  .thub-mobile-table-header {
    display: inline-block;
    width: 140px;
    font-weight: 600;
  }

  .thub-ticket-controls {
    display: unset;
  }

  #thub-ticket-status,
  #thub-ticket-type {
    margin-top: 15px;
    margin-left: unset;
    margin-right: 10px;
  }
}
.thub-wrapper {
  max-width: 1200px;
  margin: 0 auto !important;
  position: relative;
  padding: 0 30px;
}

.thub-select {
  width: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #000;
  color: #eee;
  border: none;
  border-radius: 25px;
  padding: 10px 50px 10px 25px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>');
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px;
  font-size: 15px;
}

.thub-button {
  width: auto;
  padding: 10px 25px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #000;
  color: #eee;
  border: none;
  border-radius: 25px;
  font-size: 1rem;
  cursor: default;
}

.thub-select:hover,
.thub-button:hover {
  background-color: #262626;
}