.np-color-primary {
  background-color: #e85e99;
}

.np-color-danger {
  background-color: #b955b1;
}

.np-color-green {
  background-color: #50b9a6;
}

.np-color-cancel {
  background-color: #878889;
}

.np-color-primary:hover {
  background-color: #e7136f;
}

.np-color-danger:hover {
  background-color: #b814aa;
}

.np-color-green:hover {
  background-color: #00b493;
}

.np-color-cancel:hover {
  background-color: #6e6e6e;
}

.np-button {
  border-radius: 10px;
  color: white;
}

.np-button:hover {
  color: white;
}

ul.np-tab {
  border-bottom: 1px solid #348fe2;
}

ul.np-tab>li>a {
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

.space-between {
  justify-content: space-between;
}
.space-evenly {
  justify-content: space-evenly;
}

#footer {
  text-align: center;
}
.hidden {
  display: none;
}
.grey-bg {
  background-color: #d6d4d4;
}

/****/
/* GENERAL */
.text-right {
  text-align: right;
}
.align-center {
  text-align: center;
}
input[type="text"]:disabled {
  background-color: #878889;
}
input[type="text"]:read-only {
  background-color: #dddedf;
}
.flex {
  display: flex;
}

/* PATCH THE LIBRARY */
li.select2-results__option[role="option"] {
  padding-left: 25px;
}

input.datepicker {
  padding: 0.4375rem 0.75rem;
}

/** END PATCH THE LIBRARY **/

/* PATCH THE CALENDAR IN APPOINTMENT */
.np-event {
  height: 100%;
  display: flex;
  text-decoration: none;
  flex-direction: column;
  padding: 5px;
}
.np-event.selected {
  border: 3px solid red;
}
.np-event .calendar-event-time-title {
  font-weight: bold;
  font-size: 10px;
  white-space: normal;
}
.np-event > .calendar-event-time-service {
  font-weight: 600;
  font-size: 10px;
}
.np-event .calendar-event-time-service.employee-name {
  font-style: italic;
  text-align: right;
}
div.toastui-calendar-event-time:hover {
  height: auto !important;
}

/*** END PATCH THE CALENDAR IN APPOINTMENT ***/

/** PRODUCT & SERVICE IMPORT BUTTON IN CREATE FORM */
.download-template-file a.download-file-btn {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 8px 12px;
  cursor: pointer;
  color: blue;
}
.import-product-file input[type="file"] {
  display: none;
}
.import-product-file label.select-file {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 8px 12px;
  cursor: pointer;
}
/** END PRODUCT & SERVICE IMPORT BUTTON IN CREATE FORM */

/* PRODUCT ADDITIONS */
#product_additions td input {
  width: 100%;
}

#product_additions th.ordered, #product_additions td.ordered input {
  width: 30px;
}

#product_additions th.price, #product_additions th.duration,
#product_additions td.price input, #product_additions td.duration input {
  width: 40px;
}

#product_additions th.checkbox {
  width: 30px;
}

.addition-service-table th {
  font-weight: 600;
}

.addition-service-table td input {
  width: 100%;
}

.addition-service-table th.price, .addition-service-table th.total {
  width: 20%;
}
.addition-service-table th.duration, .addition-service-table th.quantity {
  width: 15%;
}

.addition-service-table td.price input, .addition-service-table td.duration input, .addition-service-table td.quantity input, .addition-service-table td.total input {
  width: 100%;
}

/* CUSTOM FOR PRODUCT CARD-TITLE ACTIVE */
.active-card {
  border-bottom: 5px solid coral;
  padding-bottom: 5px;
}
.active-card > a {
  color: #00b493;
}

.otp-group {
  display: flex;
  justify-content: space-between;
}
.otp-control {
  display: inline;
  width: 10%;
  text-align: center;
  margin: auto 10px;
  padding: 0.4375rem 0.75rem;
}
.otp-group:first-child {
  margin: 0 auto 10px auto;
}
.otp-group:last-child {
  margin: 10px auto 0 auto;
}

/* UPLOAD COMPANY DOCUMENT TEMPLATE */
#documents, #filesPreview {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#documents .company-document, #filesPreview .company-document {
  display: block;
  /* position: relative; */
  height: 180px;
  width: 200px;
}
#documents .company-document .icon, #filesPreview .company-document .icon {
  /* position: absolute; */
  filter: blur(1px);
  /* top: 50px; */
  height: 100px;
  width: 100px;
  margin: auto;
}
#documents .company-document .file-name, #filesPreview .company-document .file-name {
  /* position: absolute; */
  top: 10px;
  font-weight: bold;
}
#documents .company-document .file-size, #filesPreview .company-document .file-size {
  /* position: absolute; */
  top: 30px;
}
#documents .company-document .icon-image, #filesPreview .company-document .icon-image {
  text-align: center;
  width: 100px;
  height: 130px;
  display: block;
  margin: auto;
}
#documents .company-document .btn-function, #filesPreview .company-document .btn-function {
  display: flex;
  justify-content: space-between;
  margin: auto;
}

#documents .company-document .remove-file-btn, #filesPreview .company-document .remove-file-btn {
  /* position: absolute; */
  right: 10px;
  bottom: 5px;
  font-size: 25px;
  height: 25px;
  width: 25px;
}
#documents .company-document button.remove-file-btn, #filesPreview .company-document button.remove-file-btn {
  background: transparent;
  border: none;
  color: var(--bs-link-hover-color);
}
#documents .company-document .download-file-btn, #filesPreview .company-document .download-file-btn {
  /* position: absolute; */
  left: 10px;
  bottom: 5px;
  font-size: 20px;
  height: 25px;
  width: 25px;
}

.field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  margin-right: 15px;
  position: relative;
  z-index: 2;
}
/* END UPLOAD COMPANY DOCUMENT TEMPLATE */

/**
* Display combo activate date
*/
div.form-check.flex {
  padding-left: 0px;
  display: flex;
}
.form-group-activate-date .form-check > label,
.form-group-activate-date .form-check > input {
  margin: auto 0;
  padding: 5px 5px;
}
input.activate-date {
  width: 40px;
}
/**
* DISPLAY TOGGLE PASSWORD
*/
/*Toggle Password class*/
#togglePw { display: none; }
#togglePw + label:before { content: "\f06e"; }
#togglePw:checked + label:before { content: "\f070"; }

.combine-name {
  display: flex;
  justify-content: space-between;
}

/**
* GIFTCARD SET EXPIRATION DATE
*/
.giftcard-expiration-date {
  display: flex;
  justify-content: space-between;
}
.gift-card-set-expiration {
  display: flex;
}
.gift-card-set-expiration > input {
  width: 100px;
}
.gift-card-set-expiration > label {
  margin: auto 10px;
}
.gift-card-set-expiration > a.btn {
  padding: 5px;
  width: 100px;
}

/** END GIFTCARD SET EXPIRATION DATE */

/**
* GALLERY IN BACKGROUND IMAGE IN CHECKIN APP
*/
.gallery {
  margin: 0 auto;
}
.gallery .image-container {
  margin: 2px;
}
.gallery .image-container .image-container-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.gallery .image-inner img {
  width: 250px;
  height: 270px;
}
.gallery .image-inner {
  position: relative;
  overflow: hidden;
}
.gallery .image-container .remove-image {
  margin: 5px auto;
}

/* END GALLERY IN BACKGROUND IMAGE IN CHECKIN APP */



/**
* DISPLAY WIZARD STYLE FOR CREATE/EDIT PROMOTION, VOUCHER
*/
.offer-wizard {
  height: 80px;
}
.offer-wizard .step:nth-child(2)::before {
  left: calc(-80% + 10px) !important;
  width: calc(130% - 20px);
}
.offer-wizard .step:nth-child(3)::before {
  left: calc(-50% + 10px) !important;
  width: calc(130% - 20px);
}
.offer-wizard .step:nth-child(1) .step-title {
  position: absolute;
  width: 80px;
  left: calc(20% - 40px);
}
.offer-wizard .step:nth-child(3) .step-title {
  position: absolute;
  width: 80px;
  right: calc(20% - 40px);
}
.offer-form .tab-content {
  /* Top line border */
  padding-top: 10px;
  margin-top: 10px;
  border-top: 2px solid #ddd;
}
/* Available date group */
.offer-form .available-end-at-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.offer-form .available-end-at-group input[name="available_end_at"] {
  width: 50% !important;
}
/* Radio button */
.offer-form .amount-type-group {
  display: block;
  position: relative;
}
.offer-form .amount-type-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.offer-form .amount-type-group .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}
.offer-form .amount-type-group input:checked ~ .checkmark {
  background-color: #2196F3;
}
.offer-form .amount-type-group input:checked ~ .btn {
  background-color: #e7136f;
  color: white;
}
.offer-form .flex {
  display: flex;
}
.offer-form .w-100 {
  width: 100%;
}

.offer-form .ck-editor__editable {
  min-height: 100px;
}
.editor-container__editor-wrapper {
	display: flex;
	width: fit-content;
}

.editor-container_document-editor {
	border: 1px solid var(--ck-color-base-border);
}

.editor-container_document-editor .editor-container__toolbar {
	display: flex;
	position: relative;
	box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.078);
}

.editor-container_document-editor .editor-container__toolbar > .ck.ck-toolbar {
	flex-grow: 1;
	width: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	border-top: 0;
	border-left: 0;
	border-right: 0;
}

.editor-container_document-editor .editor-container__menu-bar > .ck.ck-menu-bar {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	border-top: 0;
	border-left: 0;
	border-right: 0;
}

.editor-container_document-editor .editor-container__editor-wrapper {
  width: 100%;
	max-height: var(--ckeditor5-preview-height);
	min-height: var(--ckeditor5-preview-height);
	overflow-y: scroll;
}
.editor-container_document-editor .editor-container__editor-wrapper .editor-container__editor {
  width: 100%;
}

#review_html_content figure > img { max-width: 100% !important; height: auto !important; }

/* Cheat the second upload button */
form.ck.ck-image-insert-form > button.ck.ck-button:nth-child(2) {
  display: none;
}

.header-checkbox {
  width: 30px;
  text-align: center;
}
.column-checkbox {
  text-align: center;
}

#review_html_content {
  width: 100%;
  border: 1px solid lightgrey;
}

/* Styling the view form */
.voucher span.form-control, .promotion span.form-control {
  height: 36px;
}

/* Voucher image sample */
.voucher-code-generator {
  width: 100%;
  max-width: 400px;
}

/**
* END DISPLAY WIZARD STYLE FOR CREATE/EDIT PROMOTION, VOUCHER
*/

/** COMPANY ACCOUNTS */
td.td-action {
  display: flex;
  justify-content: center;
  align-items: center;
}
td.td-action > div {
  flex: 1;
}
/** END COMPANY ACCOUNTS */