.box {
  .box__header {
    text-align: center;
  }
}

body {
  font-family: Helvetica;
  font-size: initial;
}
.panel-heading {
  display: block;
}

.admin-list-view .panel-heading,
.my-edit-view .panel-heading,
.my-list-view .panel-heading {
  display: flex;
  justify-content: space-between;
}

.admin-list-view .panel-heading > div,
.my-edit-view .panel-heading > div,
.my-list-view .panel-heading > div {
  display: inline-block;
}

.q-form {
  .q-form-input-multiple-typeahead__input {
     > span {
      background-color: #f6f6f6;
      border: 1px solid;
      border-radius: 4px;
      display: inline-block;
      margin: 0 4px;
      padding: 4px;
    }
  }
}

.excel-to-array {
  height: 10em;
}

/* for q-store related */
.q-store-cart-header .--name {
  width: 30%;
}
.q-store-cart-header .--price {
  width: 10%;
}
.q-store-cart-header .--quantity {
  width: 10%;
}
.q-store-cart-header .--discount {
  width: 10%;
}
.q-store-cart-header .--sub-total {
  width: 10%;
}
.q-store-cart-header .--comments {
  width: 30%;
}

.q-store-shop-header .--action {
  width: 20px;
}
.q-store-shop-header .--name {
  width: 50%;
}
.q-store-shop-header .--price {
  width: 10%;
}
.q-store-shop-header .--comments {
  width: 40%;
}

/* for login page */
.page__header img {
  max-width: 100%;
}
.login-and-register-buttons-view .box {
  margin-top: 50px;
  width: 80%;
}
.login-and-register-buttons-view .q-widget .q-widget-controller > .q-widget-containers-column > .q-widget-containers-column > .q-widget-elements-adapters-q-button {
  justify-content: center;
}

/* for abstract related */
.q-list .q-list-header__cell {
  text-transform: unset;
}

.q-list .q-list-header__cell {
  font-size: initial;
}
.q-list .q-list-body-row-cell {
  font-size: 0.9em;
}

/* left side bar menu */
.dropdown-menu {
  font-size: 0.9em;
}

.q-widget .q-widget-controller .q-widget-elements-adapters-q-tab .__tabs .__tab {
  border-radius: 6px;
  border-bottom-left-radius: unset;
  border-bottom-right-radius: unset;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.q-widget .q-widget-controller .q-widget-elements-adapters-q-tab .__tabs .__tab:first-child {
  border-left: 1px solid #ccc;
}
.q-form-column {
  min-height: 130px;
}
.q-form .q-form-dynamic .q-form-dynamic-row .__collapse-title {
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 6px;
  border-bottom-left-radius: unset;
  border-bottom-right-radius: unset;
  color: unset;
}

/* button */
.q-button__icon {
  margin-left: 6px;
  margin-right: 6px;
}

.btn-1 {
  padding: 10px 20px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
}
.btn-1:hover {
  background: #2980b9;
}

.btn-2 {
  padding: 12px 24px;
  background: linear-gradient(90deg, #ff7e5f, #feb47b);
  color: white;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  background-size: 200% auto;
  transition: background-position 0.5s;
}
.btn-2:hover {
  background-position: right center;
}

.btn-3 {
  padding: 12px 25px;
  background: #2ecc71;
  color: white;
  border: none;
  border-radius: 5px;
  box-shadow: 0 5px 0 #27ae60;
  cursor: pointer;
  transition: all 0.1s;
}
.btn-3:hover {
  transform: translateY(2px);
  background-position: right center;
  box-shadow: 0 3px 0 #27ae60;
}

.btn-4 {
  padding: 12px 30px;
  background: transparent;
  color: #9b59b6;
  border: 2px solid #9b59b6;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.3s;
}
.btn-4:hover {
  color: white;
}
.btn-4::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #9b59b6;
  z-index: -1;
  transition: left 0.3s;
}
.btn-4:hover::before {
  left: 0;
}

.btn-5 {
  padding: 12px 25px;
  background: #34495e;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: box-shadow 0.3s;
}
.btn-5:hover {
  box-shadow: 0 0 15px #3498db;
}

.btn-6 {
  padding: 12px 20px 12px 40px;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  transition: padding 0.3s;
}
.btn-6::before {
  content: '→';
  position: absolute;
  left: 15px;
  opacity: 0;
  transition: opacity 0.3s;
}
.btn-6:hover {
  padding: 12px 20px 12px 50px;
}
.btn-6:hover::before {
  opacity: 1;
}

.btn-7 {
  padding: 12px 30px;
  background: #f39c12;
  border-radius: 5px;
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-7:hover {
  transform: skewX(-10deg);
  background: #e67e22;
}

.btn-8 {
  padding: 12px 30px;
  background: transparent;
  color: #16a085;
  border: 2px solid #16a085;
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-8::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 2px solid #16a085;
  opacity: 0;
  transition: all 0.3s;
}
.btn-8:hover {
  background: #16a085;
  color: white;
}
.btn-8:hover::before {
  opacity: 1;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
}

.btn-9 {
  padding: 12px 25px;
  background: transparent;
  color: #2c3e50;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
}
.btn-9:hover {
  color: #e74c3c;
}
.btn-9::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #e74c3c;
  transition: width 0.3s;
}
.btn-9:hover::after {
  width: 100%;
}

.btn-10 {
  padding: 12px 30px;
  background: #9b59b6;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.3s;
}
.btn-10:hover {
  animation: bounce 0.5s;
}

.q-store-cart {
  margin: 1rem 0;
  .__coupon {
    .q-store-cart-row-coupon {
      padding: 0;
    }
    .q-list-body-row-cell-qty {
      justify-content: left;
      .q-list-body-row-cell-qty__button {
        font-size: 1.5rem;
      }
    }

    .--display-name {
      flex: 0.6;
    }
    .--available, .--use {
      flex: 0.2;
    }
  }
  .q-store-table-footer .__footer {
    background-color: #4b4638;
    color: #fff;
  }
  .q-store-table-row .--checkbox, .q-store-table-row .--name, .q-store-table-row .--price, .q-store-table-row .--quantity, .q-store-table-row .--discount, .q-store-table-row .--sub-total, .q-store-table-row .--comments {
    background-color: unset;
  }
}

.q-store-cart,
.q-store-check-out {
  overflow: auto;
}

table.__cart-table,
table.__cart-table tbody {
  border-bottom: 2px solid #999;
}
table.__cart-table tbody tr:nth-child(2n+1) {
  background-color: unset;
}
table.__cart-table tbody:nth-child(2n+1) {
  background-color: #eee;
}
table.__cart-table .q-list .q-list-header__row,
table.__cart-table .q-list .q-list-header__cell {
  background: unset;
  color: #fff;
}
table.__cart-table .q-list .q-list-header__row {
  background-color: #999;
}

.q-store-shop {
  .q-store-shop-row {
    .--comments {
      .--coupon {
        color: red;
      }
    }
  }

}



@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}


.store-view__footer {
  .--trainee-upload-box {
    display: flex;
    align-items: center;
  }
}

.__button div {
  margin-left: 0;
}


@media (max-width: 750px) {
  .box__header h1 {
    font-size: 24px;
  }
  .container {
    padding-right: 6px;
    padding-left: 6px;
  }
  .login-and-register-buttons-view .box {
    margin-top: 10px;
    width: 94%;
  }
  .q-widget * {
    max-width: 100%;
    white-space: break-spaces;
  }
  .login-container {
    width: 90% !important;
    padding: 10px !important;
  }
}


.q-form .q-form-input__label {
  font-size: initial;
}


.q-form-dynamic-rows__btn i {
  margin-left: 6px;
  margin-right: 6px;
}
.q-form-dynamic-rows__btn.clear {
  background-color: #e6e6e6 !important;
  border: 1px solid #adadad !important;
  color: unset !important;
}
.q-form-dynamic-rows__btn.clear:hover {
  background-color: #fff !important;
  border: 1px solid #ccc !important;
}
/* refer to bootstrap success button */
.q-form__buttons--button.save, .q-form-input__input-file-container, .q-file-button {
  background-color: #dc3545;
  border-color: #dc3545;
  color: white;
}
.q-form__buttons--button.save:hover, .q-form-input__input-file-container:hover {
  background-color: #c82333;
  border-color: #bd2130;
}


.q-form-input__container {
  display: flex;
}
.q-form-input__container input,
.q-form-input__container select,
.q-form-input__container textarea
{
  flex-grow: 1;
}
/* .q-form-input__container input:not([type="checkbox"]):not([type="file"])
{
  height: 40px;
  margin: 0.2rem 0;
  display: block;
  width: 100%;
  padding: 6px 12px;
  font-weight: 400;
  line-height: 1.5;
  color: #555;
  appearance: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
} */

.q-form-input__button--toggle {
  display: inline-block;
}
.q-form-input__button--toggle .q-form-input__label {
  display: inline-block;
}
.q-form-input-single-file .q-form-input__container {
  flex-direction: column;
}

.q-form-section.__abstracts div {
  display: inline;
  font-weight: bold;
}
.q-form .q-form-input-single-html .quill-editor .ql-container .ql-editor,
.q-form .q-form-input-single-text-area textarea {
  height: unset;
}
.admin-search-view .q-form-input {
  padding: 6px 0;
}
.admin-search-view .q-form-input-multiple,
.admin-search-view .q-form-input-single
{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.admin-search-view .q-form-input-multiple .q-form-input__label,
.admin-search-view .q-form-input-single .q-form-input__label
{
  flex: 1;
}
.admin-search-view .q-form-input-multiple .q-form-input__container,
.admin-search-view .q-form-input-single .q-form-input__container
{
  flex: 5;
}

.q-modal-region-footer {
  display: flex;
  justify-content: center !important;
  margin-top: 0 !important;
}
.q-congress-topic-list .q-congress-topic-list-item-file__delete .confirm {
  background-color: unset !important;
  width: 200px !important;
}
.q-congress-topic-list-item-file.flex .btn-link {
  display: none;
}
.btn {
  font-size: 0.9em;
}

.q-list-body-row-cell-action {
  align-content: flex-start;
}
.q-list-body-row-cell-action__button-icon {
  margin: 0 2px;
}

/* Base button styles */
.q-list .q-list-body-row-cell .q-list-body-row-cell-action__button {
  /* color: white; */
  cursor: pointer;
  border: none;
  border-radius: 6px;
  font-size: 0.9em;
  margin: 1px;
  min-width: 120px; /* Adjust based on your longest button text */
  padding: 0 0 0 20px; /* Extra left padding for icon */
  position: relative;
  text-align: center;
  transition: background 0.2s ease;
  white-space: nowrap; /* Prevents text wrapping */
}
/* Font Awesome icon setup (using ::before pseudo-element) */
.q-list-body-row-cell-action__button::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  left: 6px; /* Adjust if needed */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
/* Label adjustments */
.q-list-body-row-cell-action__button a {
  color: unset;
}
.q-list-body-row-cell-action__button-label {
  display: inline-block;
  padding: 2px 0; /* Vertical padding */
  white-space: nowrap;
}

/* Individual button styles with icons */
.q-list-body-row-cell-action__button.add-to-group {
  background: #8e44ad; /* Deep Purple - distinct from merge's #9b59b6 */
  color: white;
}

.q-list-body-row-cell-action__button.add-to-group:hover {
  background: #7d3c98; /* Slightly darker purple */
}

.q-list-body-row-cell-action__button.add-to-group::before {
  content: "\f0c0"; /* fa-users (group icon) */
  /* Alternative icons:
     "\f5fd" (fa-people-group) - more modern group
     "\f247" (fa-user-plus) - if emphasizing user addition */
}

.q-list-body-row-cell-action__button.approve-trainee {
  background: #2ecc71; /* Fresh Green - conveys success */
  color: white;
}
.q-list-body-row-cell-action__button.approve-trainee:hover {
  background: #27ae60; /* Darker green on hover */
}
.q-list-body-row-cell-action__button.approve-trainee::before {
  content: "\f058"; /* fa-circle-check (solid checkmark in circle) */
  /* Alternative icons: 
     "\f00c" (fa-check) for minimal style, 
     "\f559" (fa-user-check) for user-specific approval */
}
.q-list-body-row-cell-action__button.change-email {
  background: #e67e22; /* Orange */
}
.q-list-body-row-cell-action__button.change-email:hover {
  background: #d35400;
}
.q-list-body-row-cell-action__button.change-email::before {
  content: "\f0e0"; /* fa-envelope */
}

.q-list-body-row-cell-action__button.delete {
  background: #e74c3c; /* Red */
}
.q-list-body-row-cell-action__button.delete:hover {
  background: #c0392b;
}
.q-list-body-row-cell-action__button.delete::before {
  content: "\f1f8"; /* fa-trash */
}

.q-list-body-row-cell-action__button.download {
  background: #3498db; /* Blue - common for download actions */
  color: white;
}
.q-list-body-row-cell-action__button.download:hover {
  background: #2980b9; /* Darker blue on hover */
}
.q-list-body-row-cell-action__button.download::before {
  content: "\f019"; /* Font Awesome download icon (solid) */
}

.q-list-body-row-cell-action__button.duplicate {
  background: #8a7d38; /* Olive */
}
.q-list-body-row-cell-action__button.duplicate:hover {
  background: #6b5e1f;
}
.q-list-body-row-cell-action__button.duplicate::before {
  content: "\f24d"; /* fa-copy */
}

.q-list-body-row-cell-action__button.edit {
  background: #2ecc71; /* Green */
}
.q-list-body-row-cell-action__button.edit:hover {
  background: #27ae60;
}
.q-list-body-row-cell-action__button.edit::before {
  content: "\f044"; /* fa-pen-to-square */
}

.q-list-body-row-cell-action__button.merge {
  background: #9b59b6; /* Purple */
}
.q-list-body-row-cell-action__button.merge:hover {
  background: #8e44ad;
}
.q-list-body-row-cell-action__button.merge::before {
  content: "\f0c5"; /* fa-object-group */
}

.q-list-body-row-cell-action__button.proxy {
  background: #3498db; /* Blue */
}
.q-list-body-row-cell-action__button.proxy:hover {
  background: #2980b9;
}
.q-list-body-row-cell-action__button.proxy::before {
  content: "\f007"; /* fa-user */
}

.q-list-body-row-cell-action__button.reset {
  background: #f39c12; /* Orange-Yellow */
  color: white;
}
.q-list-body-row-cell-action__button.reset:hover {
  background: #e67e22;
}
.q-list-body-row-cell-action__button.reset::before {
  content: "\f021"; /* fa-rotate (sync/refresh icon) */
}

.q-list-body-row-cell-action__button.select {
  background: #1abc9c; /* Turquoise */
}
.q-list-body-row-cell-action__button.select:hover {
  background: #16a085;
}
.q-list-body-row-cell-action__button.select::before {
  content: "\f14a"; /* fa-square-check */
}

.q-list-body-row-cell-action__button.undelete {
  background: #1abc9c; /* Teal - Distinct from delete's red */
  color: white;
}
.q-list-body-row-cell-action__button.undelete:hover {
  background: #16a085;
}
.q-list-body-row-cell-action__button.undelete::before {
  content: "\f2ea"; /* fa-trash-undo (or use "\f0e2" for fa-undo) */
}

.q-list-body-row-cell-action__button.view {
  background: #f39c12; /* Yellow */
}
.q-list-body-row-cell-action__button.view:hover {
  background: #e67e22;
}
.q-list-body-row-cell-action__button.view::before {
  content: "\f06e"; /* fa-eye */
}

.q-list-body-row-cell-action__button.vote {
  background: #2ecc71; /* Green */
}
.q-list-body-row-cell-action__button.vote:hover {
  background: #27ae60;
}
.q-list-body-row-cell-action__button.vote::before {
  content: "\f164"; /* fa-thumbs-up */
}

.q-list-body-row-cell-action__button.withdraw,
.q-list-body-row-cell-action__button.withdraw-vote {
  background: #95a5a6; /* Gray */
}
.q-list-body-row-cell-action__button.withdraw:hover,
.q-list-body-row-cell-action__button.withdraw-vote:hover {
  background: #7f8c8d;
}
.q-list-body-row-cell-action__button.withdraw::before,
.q-list-body-row-cell-action__button.withdraw-vote::before {
  content: "\f2f4"; /* fa-hand-back-point-left */
}

/* color button styles without */
.q-list-body-row-cell-action__button.orange {
  background: #f39c12;
  color: white;
}
.q-list-body-row-cell-action__button.orange:hover {
  background: #e67e22;
}
.q-list-body-row-cell-action__button.dark {
  background: #34495e;
  color: white;
}
.q-list-body-row-cell-action__button.dark:hover {
  background: #2c3e50;
}
.q-list-body-row-cell-action__button.teal {
  background: #1abc9c;
  color: white;
}
.q-list-body-row-cell-action__button.teal:hover {
  background: #16a085;
}
.q-list-body-row-cell-action__button.pink {
  background: #e84393;
  color: white;
}
.q-list-body-row-cell-action__button.pink:hover {
  background: #fd79a8;
}
.q-list-body-row-cell-action__button.yellow {
  background: #f1c40f;
  color: #2c3e50;
}
.q-list-body-row-cell-action__button.yellow:hover {
  background: #f39c12;
}
.q-list-body-row-cell-action__button.light-grey {
  background: #ecf0f1;
  color: #2c3e50;
}
.q-list-body-row-cell-action__button.light-grey:hover {
  background: #bdc3c7;
}

.my-registration-group-edit-view {
  .q-store-cart-row > .__option {
    display: none;
  }
 }


.q-congress-payment-return > * {
    display: block;
}