body {
  background-color: rgba(255, 122, 0, 0.09);
  /*font-family: "Arimo", sans-serif;*/
  font-style: normal;
  font-weight: 500;
}

a {
  text-decoration: none !important;
}

a:hover {
  text-decoration: none !important;
}

.form-group {
  margin: 0.5em 0 0.5em 0;
  padding: 0 0.5em 0 0.5em;
}

iframe {
  border: none !important;
}

.displayNone {
  display: none !important;
}

.displayInlineBlock {
  display: inline-block !important;
}

.displayBlock {
  display: block !important;
}

.displayFlex {
  display: flex !important;
}

.w-20 {
  width: 20%;
}

.w-50 {
  width: 50%;
}

.w-80 {
  width: 80%;
}

.mdi-svg-icon {
  width: 100%;
}

.mdi-svg-icon path {
  fill: #fff;
}

#confirm-icon,
#reject-icon {
  cursor: pointer;
}

#confirm-icon:hover,
#reject-icon:hover {
  /*color: #f93042;*/
}

.alert-danger {
  background-color: #d3999e !important;
}

.bg-full {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(255, 76, 35);
  background: linear-gradient(351deg, rgba(255, 76, 35, 1) 0%, rgba(255, 150, 77, 1) 100%);
}

.arimo-normal {
  font-family: "Arimo", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.f-14 {
  font-size: 1rem;
}

.f-18 {
  font-size: 1.25rem;
}

.drop-shadow {
  filter: drop-shadow(0 1px 2px #3c40434d);
}

.text-shadow {
  text-shadow: 2px 2px 5px #22222260;
}

.btn {
  border: 0px;
}

.btn-functions {
  width: fit-content;
}

.btn-orange-gradient {
  background: #ff7b54;
  /*background: linear-gradient(
    351deg,
    rgba(255, 85, 0, 1) 0%,
    rgba(255, 179, 138, 1) 100%
  );*/
  color: #fff;
  cursor: pointer;
}

.btn-orange-gradient:hover,
.btn-orange-gradient:active {
  background: #fba58c !important;
  color: #fff;
  /*background: linear-gradient(
    351deg,
    rgba(255, 98, 20, 1) 0%,
    rgba(255, 187, 151, 1) 100%
  );*/
}

.btn-dark-opal {
  background: #00000070;
}
.btn-dark-opal:hover {
  background: #0000009c;
}

.btn-admin-blue {
  background: #83a2ff;
  /*background: linear-gradient(
    351deg,
    rgba(255, 85, 0, 1) 0%,
    rgba(255, 179, 138, 1) 100%
  );*/
  color: #fff;
  cursor: pointer;
}

.btn-admin-blue:hover,
.btn-admin-blue:active,
.btn-admin-blue:focus-visible {
  background: #7989fd !important;
  color: #fff !important;
  /*background: linear-gradient(
    351deg,
    rgba(255, 98, 20, 1) 0%,
    rgba(255, 187, 151, 1) 100%
  );*/
}

.text-admin-blue {
  color: #515fc5;
}

.btn-admin-blue-type2 {
  color: #83a2ff;
  background: #fff;
  border: 2px solid #83a2ff;
  cursor: pointer;
}

.btn-admin-blue-type2:hover {
  background: #83a2ff;
  color: #fff;
}

.btn-admin-danger-type2 {
  color: #dc3545;
  background: #fff;
  border: 2px solid #dc3545;
  cursor: pointer;
}

.btn-admin-danger-type2:hover {
  background: #dc3545;
  color: #fff;
}

.btn-morning {
  background: #ffe382;
  color: #343a40 !important;
  cursor: pointer;
}

.btn-morning:hover {
  background: rgb(255 219 89);
  color: #343a40 !important;
}

.btn-night,
.btn-evening {
  background: #9bcbe3;
  /*color: #fff;*/
  cursor: pointer;
}

.btn-night:hover,
.btn-evening:hover {
  background: #75aecb;
  /*color: #fff;*/
}

.btn-grey,
.btn-other {
  background: rgb(149 149 149 / 41%);
}

.btn-grey:hover,
.btn-other:hover {
  background: rgb(141 141 141);
}

a.btn-text,
a.btn-text:hover {
  text-decoration: none !important;
  color: #fff !important;
}

.img-upload-btn-text {
  font-size: 1.5em;
}

.upload-loader {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #000000c9;
  align-items: center;
  flex-direction: column;
}

.upload-loader .loader {
  margin: 0;
  text-indent: 0;
}

.upload-result {
  position: absolute;
  top: 0;
  width: fit-content;
  background-color: #ffffffcf;
  line-height: 24px;
  padding: 0 10px;
  border-radius: 5px;
  font-weight: 400;
}

.upload-result-text {
  padding-left: 10px;
}

.date-select-label {
  font-size: 1rem;
}

.img-search-form,
.image-search-result {
  border: rgba(255, 129, 0, 0.5) 1px solid;
  border-radius: 16px;
  background-color: #fff;
  position: relative;
}

.img-search-option {
  /*background-color: rgba(255, 183, 140, 0.35);*/
  /*border-radius: 16px;*/
}

.image-search-calender {
  position: relative;
  top: -10px;
  left: -10px;
  border: 1px solid #55555508;
  border-radius: 8px;
  width: 4.5rem;
  text-align: center;
}

.image-search-month {
  background-color: #dc3545;
  color: #fff;
  font-size: 12px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.image-search-date {
  font-size: 24px;
  line-height: 25px;
  padding-top: 3px;
  background-color: #fff;
}

.image-search-year {
  background-color: #fff;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.image-search-result-date {
  font-size: 18px;
}

.image-search-result .view-img-btn,
.image-search-result .hide-img-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.image-search-instruction {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
}

input.img-search-option-checkbox {
  height: 32px;
  width: 32px;
  display: block;
  margin: 0 auto;
  /*accent-color: #939B62;*/
}

label.img-search-option-checklabel {
  display: block;
  margin: 0 auto;
  font-size: 14px;
}

.image-search-result-img {
  cursor: pointer;
}

.image-search-result-inside {
  aspect-ratio: 9 / 16;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #ff7247;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  position: relative;
  filter: blur(1px) grayscale(50%);
}

.image-tag {
  position: relative;
  /*top: 4%;*/
  left: 50%;
  transform: translateX(-50%);
  background-color: #ff7b54;
  width: 100%;
  text-align: center;
  /*border-radius: 10px;*/
  line-height: 24px;
  font-size: 13px;
  color: #fff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.btn {
  border-radius: 16px !important;
}

.btn:focus {
  box-shadow: none !important;
}

.border-r4 {
  border-radius: 4px !important;
}

.border-r8 {
  border-radius: 8px !important;
}

.border-r16 {
  border-radius: 16px !important;
}

.border-round {
  border-radius: 50% !important;
}

.border-solid-1 {
  border: 1px solid;
}

.border-1px-white {
  border: 1px solid #fff;
}

.bg-admin-blue {
  background: #b4bdff;
}

.bg-dark-opal {
  background: #0000002e;
}

.bg-orange {
  background: #ffb26b;
}

.bg-dark-orange {
  background: #ff7d05;
}

.bg-light-orange {
  background-color: #ffc692;
}

.bg-light-admin-blue {
  background-color: #b4bdff;
}

.bg-light-morning {
  background-color: #fff78abf;
  /*background-color:#fffbed;*/
}

.bg-light-night {
  background-color: #c8edf7bf;
  /*background-color:#fffbed;*/
}

.bg-light-grey {
  background-color: #b5b5b5bf;
  /*background-color:#fffbed;*/
}

.bg-morning {
  background: #ffe382;
}

.bg-night {
  background: #b1d9ec;
}

.bg-grey {
  background: rgb(149 149 149 / 41%);
}

.bonkhongbon {
  font-size: 5rem;
  color: #fff;
}

.bonkhongbon-msg {
  color: #fff;
  margin-bottom: 30px;
}

/* Modal bg */
.modal-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Modal container */
.modal-container {
  background-color: #fff;
  border-radius: 16px;
  max-width: 95%;
}

.img-preview-modal-container {
  background-color: #fff;
  border-radius: 16px;
  /*width: 1080px;
  max-width: 95%;*/
  width: 100vw;
  height: calc(100vh - 150px);
}

.modal-image {
  /*background-position: center;*/
  transition: background-size 0.1s linear;
  cursor: grab;
}

.modal-image:active {
  cursor: grabbing;
}

.custom-img-control {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

/* Modal content */
.modal-content {
  position: relative;
  background-color: #fff;
  padding: 10px;
  overflow: auto;
  max-width: 500px;
  border: 0px !important;
}

.img-preview-modal-content {
  position: relative;
  background-color: #000000d9;
  /*padding: 10px;*/
  border: 0px !important;
  height: 100%;
}

.zoom-control-btn {
  height: 48px;
  width: 48px;
  text-align: center;
  line-height: 28px;
  cursor: pointer;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}
.zoom-control-btn i {
  transform: translateY(-0.25rem);
}

.zoom-icon {
  font-size: 28px;
  align-content: center;
  line-height: 28px;
}

/* Modal header */
.modal-header {
  justify-content: flex-end !important;
}

.image-action-btns {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 7px;
  top: 7px;
  width: 150px;
  gap: 5px;
  padding: 5px;
  background-color: #555;
  border-radius: 8px;
}

.image-action-btns .image-action-btn {
  cursor: pointer;
  font-size: 20px;
  border: none;
  padding: 2px 12px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

/* Close button */
.close-button {
  background-color: #dc3545;
  color: #fff;
}

.img-preview-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 48px;
  height: 48px;
  align-content: center;
  text-align: center;
  font-size: 32px;
  border-radius: 5px;
  line-height: 3px;
  cursor: pointer;
}

.close-button:hover {
  background-color: #ed4a59;
}

/* download button */
.image-search-result-download {
  color: #fff;
  background-color: #50f;
}

.image-search-result-download:hover {
  background-color: #7029fd;
}

/* Modal footer */
.modal-footer {
  justify-content: center !important;
}

/* Delete button */
.delete-button {
  cursor: pointer;
  background-color: #ff6347; /* Red color for delete button */
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 16px;
  transition: background-color 0.3s ease;
}

.delete-button:hover {
  background-color: #d9534f; /* Darker red color on hover */
}

.imageSelector {
  position: relative;
  height: 300px;
  border: 1px solid rgb(255 98 20 / 20%);
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  text-align: center;
  line-height: 200px; /* Vertically center content */
  background-size: cover;
  background-position: center;
  background-color: #ffc692;
}

.upload-svg {
  color: #fff;
  background-color: rgba(33, 33, 33, 0.5);
  border-radius: 8px;
  padding: 5px;
  cursor: pointer;
}

.logo-full {
  height: 220px;
  width: 100%;
}

.logo-half {
  height: 120px;
  width: 100%;
}

.logo-wrapper {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 100px;
  height: 100px;
  background-color: #fdd8c263;
  border: 1px solid #ffcdad78;
  border-radius: 18px;
}

.logo-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  color: #fff;
  font-size: 42px;
  font-family: "Arimo", sans-serif;
  font-weight: 700;
}

.alert {
  max-width: 400px;
  margin: 0 auto;
}

.login-form,
.reg-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 18px;
  background-color: #fdd8c263;
  text-align: center;
}

.login-form-input,
.reg-form-input {
  border: 1px solid #fff;
}

.login-form-input:focus,
.reg-form-input:focus {
  border: 1px solid #ff6347;
  box-shadow: none;
}

.login-submit-btn,
.register-submit-btn,
.psw-reset-btn {
  background: rgb(255, 76, 35);
  background: linear-gradient(351deg, rgba(255, 76, 35, 1) 0%, rgba(255, 117, 21, 1) 100%);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}

.login-submit-btn:hover,
.register-submit-btn:hover,
.psw-reset-btn:hover {
  background: rgb(255, 50, 35);
  background: linear-gradient(351deg, rgba(255, 50, 35, 1) 0%, rgba(255, 73, 21, 1) 100%);
  color: #fff;
}

.login-submit-btn:active .register-submit-btn:active,
.psw-reset-btn:active {
  background: rgb(255, 50, 35);
  background: linear-gradient(351deg, rgba(255, 50, 35, 1) 0%, rgba(255, 73, 21, 1) 100%);
  color: #fff;
}

.login-submit-btn:focus,
.register-submit-btn:focus,
.psw-reset-btn:focus {
  box-shadow: none;
}

.login-form-url,
.login-form-url:hover {
  color: rgb(255, 50, 35);
}

.iti.iti--allow-dropdown {
  width: 100%;
}

.top-nav {
  height: 68px;
  background-color: #fff;
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  position: fixed;
  top: 0;
  width: 100%;
}

.z-max {
  z-index: 9999;
}

.top-nav-under {
  height: 68px;
}

.user-icon {
  width: 48px;
  position: absolute;
  top: 10px;
  left: 10px;
  cursor: pointer;
}

.user-name {
  position: absolute;
  left: 68px;
  top: 22px;
  font-size: 16px;
  font-weight: 400;
}

.btn-logout {
  position: absolute;
  top: 15px;
  right: 10px;
  /*border-radius: 50% !important;
    width: 46px;*/
  font-size: 14px;
}

.icon-img {
  width: 100%;
  border-radius: 18px;
}

.icon-name {
  color: #222;
  font-size: 1.2em;
}

.home-icon {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.home-icon:hover {
  text-decoration: none;
}

.icon-image-container {
  position: relative;
  display: inline-block;
}

.icon-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0); /* White with 0 opacity */
  transition: background-color 0.3s ease; /* Smooth transition effect */
  pointer-events: none; /* Allows mouse events to pass through the overlay */
  border-radius: 16px;
}

.home-icon:hover .icon-overlay {
  background: rgb(255 255 255 / 39%);
  /*background: linear-gradient(0deg, rgba(0,0,0,0.2497373949579832) 0%, rgba(255,255,255,0) 12%, rgba(255,255,255,0.17130602240896353) 75%, rgba(255,255,255,0.5046393557422969) 100%);*/
}

.slider-dots {
  display: inline-flex;
}

.slider-dot {
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  cursor: pointer;
}

.create-product-btn {
  /*line-height: 150px;
    font-size: 26px;*/
}

.break-line {
  border-bottom: 1px solid #cfcfcf;
}

.product-modal-wrapper,
.add-customer-modal-wrapper,
.edit-customer-modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
  background-color: #00000099;
}

.product-modal,
.add-customer-modal,
.edit-customer-modal {
  margin-top: 88px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.product-modal-body,
.add-customer-modal-body,
.edit-customer-modal-body {
  max-height: calc(100vh - 350px);
  max-height: -webkit-calc(100vh - 350px);
  max-height: -moz-calc(100vh - 350px);
  background-color: #fff;
}

.product-form-label,
.add-customer-form-label,
.edit-customer-form-label {
  font-size: 1em;
  /*height: 40px;*/
  line-height: 36px;
}

.product-form-input,
.add-customer-form-input,
.edit-customer-form-input {
  line-height: 34px;
  font-size: 1em;
  border: 1px solid;
  border-radius: 8px;
}

.product-noti {
  flex-direction: row-reverse;
}

.product-noti-text {
  padding: 5px;
  background-color: #ffa6a6;
  border-radius: 8px;
  margin-right: 3px;
  line-height: 28px;
}

.product-noti-read-btn {
  color: #fff;
  background-color: #ff7373;
  padding: 5px;
  border-radius: 8px;
  cursor: pointer;
}

.product-noti-read-btn:hover {
  background-color: #ff5757;
}

.product-noti-content {
  margin: 0 5px;
}

.product-noti-icon {
  font-size: 18px;
  width: 28px;
  height: 28px;
  border: 1px solid;
  align-content: center;
  text-align: center;
  border-radius: 50%;
  animation: shake 75ms infinite;
  animation-timing-function: linear;
}

/***** Shake animation*****/
@keyframes shake {
  0% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

.custom-scroll {
  overflow: auto;
  scrollbar-color: #c1c1c1 #e6e6e6;
  scrollbar-width: thin;
  border-radius: 5px;
  border-radius: 10px !important;
}
.custom-scroll::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px !important;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
.custom-scroll::-webkit-scrollbar-track {
  background: #e6e6e6;
  border-left: 1px solid transparent;
  border-radius: 10px !important;
}
.custom-scroll::-webkit-scrollbar {
  width: 7px;
  scroll-behavior: smooth !important;
}

.my-product-img,
.customer-n-avatar {
  height: 150px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.my-product-name,
.customer-n-name {
  color: #ff4e00;
}

.customer-n-name {
  text-transform: uppercase;
}

.my-product-name::first-letter {
  text-transform: capitalize;
}

.my-product-brand,
.customer-n-phone {
  font-size: 13px;
  color: #8d8d8d;
  font-style: italic;
  text-transform: uppercase;
}

.my-product-category,
.my-product-uses {
  font-size: 14px;
}

.my-product-category::first-letter,
.my-product-uses::first-letter {
  text-transform: capitalize;
}

.my-product-tags,
.customer-tags {
  list-style-type: none;
  margin: 0;
  padding: 0 0 0.15rem 0;
  overflow: hidden;
}

.my-product-tag,
.customer-tag {
  display: inline-block;
  background-color: #cfcfcf;
  padding: 0 5px;
  border-radius: 4px;
  margin: 2px;
}

.customer-tag-yellow {
  background-color: #ffe000 !important;
  font-size: 11px;
}

.customer-tag-blue {
  background-color: #00d0ff !important;
  font-size: 11px;
}

.customer-tag-green {
  background-color: #54d34c !important;
  font-size: 11px;
}

.customer-tag-pink {
  background-color: #ff7df5 !important;
  font-size: 11px;
}

.my-product-tag:first-child {
  margin-left: 0;
}

/* Hide the link with class "back-mobile" on screens wider than 480px */
@media only screen and (min-width: 481px) {
  .product-nav-mobile {
    display: none;
  }
}

/* Hide the link with class "back-desktop" on screens 480px or narrower */
@media only screen and (max-width: 480px) {
  .product-nav-desktop {
    display: none;
  }
}

.customer-list {
  max-height: calc(100vh - 2rem - 128px);
  /*background: rgb(238,174,202);
  background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(255,164,58,1) 100%);*/
  border: 1px solid #ff560030;
  border-radius: 4px;
  overflow-y: auto;
}

.customer-list ul li {
  list-style-type: none;
  background-color: #fff;
  /*border-bottom: 1px solid #cfcfcf;*/
}

.customer-list ul li:last-child {
  border-bottom: none;
}

.customer-list ul li:hover {
  background-color: #fff0dd;
}

.customer-list ul li a:hover {
  text-decoration: none;
}

#customers-ul-v3 .customer-li {
  /*cursor: pointer;*/
}

.customer-li-headers:hover {
  background-color: #fff !important;
}

.customer-li-headers div {
  font-size: 14px !important;
  color: #222 !important;
}

.customer-li-headers .cus-info-wrapper {
  padding: 7px 15px;
}

.cus-info-wrapper {
  display: flex;
  border-bottom: 1px solid #cfcfcf;
  padding: 15px;
}

.cus-name-and-phone,
.cus-tags {
  align-self: center;
}

.cus-name-and-phone .cus-name,
.cus-name-and-phone .cus-phone {
  padding: 2px 5px;
  align-content: center;
}

.cus-name-and-phone {
  display: flex;
  flex-direction: row;
}

.cus-name {
  min-width: 300px;
  font-size: 17px;
}

.cus-phone {
  min-width: 170px;
  color: #222;
}

.cus-tags {
  flex-basis: 100%;
}

@media screen and (max-width: 520px) {
  .cus-info-wrapper {
    flex-direction: column;
  }
  .cus-name-and-phone,
  .cus-tags {
    align-self: flex-start;
  }
  .cus-name-and-phone {
    flex-direction: column;
  }
  .cus-tags {
    margin-top: 5px;
  }
  #customer-list-headers {
    display: none;
  }
}

@media screen and (max-width: 800px) {
  .cus-name-and-phone {
    flex-direction: column;
  }
}

.customer-url {
  color: #222;
}

.customer-url:hover {
  text-decoration: none;
  color: #ff4d00;
}

.cus-avatar {
  width: 120px;
  height: 120px;
  float: right;
  border-radius: 50%;
  background-color: #ffeade;
}

.cus-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-size: cover;
  background-image: url("https://t4.ftcdn.net/jpg/04/70/29/97/360_F_470299797_UD0eoVMMSUbHCcNJCdv2t8B2g1GVqYgs.jpg");
  background-position: center;
}

.cus-phone {
  font-size: 14px;
}

.cus-dob,
.cus-last-check {
  font-size: 12px;
}

.cus-menu li {
  list-style-type: none;
  background-color: #fff;
  font-size: 16px;
  border-bottom: 1px solid #22222260;
}

.cus-menu li:hover {
  background-color: #fddeb7;
  /*background: radial-gradient(circle, rgba(255,239,225,1) 0%, rgba(255,192,175,1) 100%);*/
}

.cus-menu li:first-child {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.cus-menu li:last-child {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  border-bottom: none;
}

.cus-menu li a {
  display: block;
  color: #222222;
  padding: 5px;
}

.cus-menu li a:hover {
  /*color: #ff5d09;*/
  text-decoration: none;
}

.cus-sum-content,
.cus-sum-admin-content,
.skin-result-text {
  white-space: pre-wrap;
}

.alert-success {
  background-color: #09ff8f;
}

.routine-add-product-input {
  font-size: 18px;
}

.routine-product-group {
  border: 1px solid #2727272b;
}

.routine-prodct-group-name {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  font-size: 18px;
  color: #3e3e3e;
  text-transform: uppercase;
}

.routine-product-name {
  font-size: 18px;
  font-weight: 600;
}

.routine-product-name-day {
  display: inline-block;
  /*margin: 0 1px;*/
  color: #3e3e3e;
  width: fit-content;
  background-color: #ffc47e;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  height: 22px;
  padding: 0 4px;
  align-content: center;
}

.routine-product-name-note,
.routine-product-name-date {
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  line-height: 18px;
}

.routine-product-in-routine {
  font-size: 14px;
  font-weight: 500;
}

.routine-product-btns-wrapper {
  align-self: center;
}

.routine-product-name-note:first-letter {
  text-transform: capitalize;
}

.routine-product-name-time {
  /*border-bottom: 1px solid #00000014;*/
}

.routine-product-rank-btn {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  height: 22px;
  padding: 0 4px;
  border-radius: 4px;
  width: fit-content;
  /* float: right; */
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  align-content: center;
  color: #3e3e3e;
}

.routine-product-expand-btn {
  width: 30%;
  display: inline-block;
  font-size: 13px;
  line-height: 32px;
  background-color: #ffc47e;
  border-radius: 8px;
  max-width: 100px;
  float: right;
  cursor: pointer;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

.routine-product-expand-btn:hover {
  background-color: rgb(141 141 141);
}

.routine-product-order-input {
  line-height: 72px;
  font-size: 32px;
}

.routine-product-usage {
  padding: 0 10px;
}

.routine-product-days {
  flex-direction: column;
}

.routine-time-product-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.routine-time-right-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.routine-time-product-title {
  text-transform: uppercase;
  line-height: 18px;
  font-weight: 600;
  font-size: 15px;
}

.routine-time-rm-product-container {
  flex-direction: row-reverse;
  text-align: right;
}

.routine-time-rm-product {
  width: fit-content;
}

.routine-product-name-days {
  display: flex;
  flex-direction: row;
  gap: 2px;
}

.routine-product-note-wrapper {
  display: flex;
  flex-direction: row;
  gap: 5px;
  font-size: 13px;
  font-weight: 400;
  line-height: 22px;
}

.routine-product-note-wrapper label {
  padding: 0 5px;
}

.routine-product-note {
  white-space: pre-wrap;
  font-weight: 400;
}
.routine-product-note:first-letter {
  text-transform: capitalize;
}

.routine-product-instruct-btn {
  position: relative;
}

.routine-product-instruct-noti-dot {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #ff0000;
  border: 4px solid #ff7d7d;
}

.order-tag {
  background: #ffb3ba;
  border-radius: 4px;
  color: #525252;
  display: inline-block;
  font-size: 11px;
  height: 18px;
  line-height: 18px;
  margin-right: 0.75rem;
  padding: 0 5px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  width: 76px;
}

.routine-time-product-start-date {
  color: #3e3e3e;
  line-height: 24px;
  margin: 0 0 10px 0;
  font-weight: 400;
}

.routine-time-product-instruction {
  text-align: right;
}

.routine-time-product-instruction .product-noti-text {
  background-color: transparent;
  line-height: 24px;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
}

.routine-time-product-instruction .btn {
  text-transform: uppercase;
  color: #3e3e3e;
  font-weight: 600;
  font-size: 13px;
}

.routine-time-adm-block {
  border: 1px solid #2727272b;
  border-radius: 8px;
  padding: 5px;
}

.routine-product-order-input,
.routine-product-note-input {
  border: 1px solid #2727272b;
}

.my-product-instruction {
  display: flex;
  flex-direction: row-reverse;
  gap: 5px;
}

.my-product-instruction-btn {
  width: 110px;
  text-align: center;
  color: #b16233;
  line-height: 28px;
  font-size: 14px;
  border: 2px solid #b16233;
  border-radius: 8px;
  cursor: pointer;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

.my-product-instruction-btn:hover {
  background-color: #b16233;
  color: #fff;
}

.my-product-edit-btn,
.my-product-del-btn,
.my-product-noti-btn {
  width: 110px;
  text-align: center;
  /*color: #b16233;*/
  line-height: 28px;
  font-size: 14px;
  /*border: 2px solid #b16233;*/
  border-radius: 8px;
  cursor: pointer;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

.current-noti {
  background-color: #f5f5f5;
  margin: 12px 0;
  border-radius: 8px;
  padding: 8px;
  border: 1px solid #cfcfcf;
}

.current-noti-header,
.new-noti-header {
  font-size: 18px;
  color: #3f3f3f;
  font-weight: 600;
}

.current-noti-text {
  color: #898989;
  font-size: 14px;
  margin: 0;
}

.new-noti-switch {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 5px;
}

.new-noti-switch input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

.my-product-edit-btn:hover,
.my-product-del-btn:hover {
  /*background-color: #b16233;
  color: #fff;*/
}

.my-product-instruction-content {
  float: right;
  width: 100%;
  border: 1px solid #b16233;
  border-radius: 8px;
  color: #b16233;
}

.brand-ul,
.category-ul {
  padding: 0;
}

.brand-li,
.category-li {
  list-style-type: none;
  width: 100%;
  margin-bottom: 0.25rem;
  border: 1px solid #8695ff;
}

.brand-li-btns,
.brand-add-btns,
.category-li-btns,
.category-add-btns,
.tag-add-btns {
  display: flex;
  flex-direction: row-reverse;
}

.brand-li-btns div,
.brand-add-btns div,
.category-li-btns div,
.category-add-btns div,
.tag-add-btns div {
  margin-left: 2px;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

.tag-list {
  padding: 0;
}

.tag-item {
  display: inline-block;
  list-style-type: none;
}

.tag-item div {
  display: inline-block;
}

.tag-item-1,
.tag-item-2,
.tag-item-3,
.tag-item-4 {
  background: #018fb3;
  color: #fff;
}

.tag-close-btn {
  width: 24px;
  text-align: center;
  font-size: 14px;
  line-height: 18px;
  border-radius: 4px;
  color: #00000070;
  cursor: pointer;
}

.tag-close-btn-1,
.tag-close-btn-2,
.tag-close-btn-3,
.tag-close-btn-4 {
  background-color: #1bf;
}

.brand-add-form,
.category-add-form {
  border: 1px solid #0bf;
}

.cus-form-tag-ul {
  padding: 0;
  margin: 0;
}

.cus-form-tag-ul li {
  list-style-type: none;
  display: inline-block;
  margin: 2px;
  padding-top: 4px;
  height: 30px;
  border-radius: 4px;
}

.cus-form-tag-selector-wrapper {
  border-radius: 8px;
  border: 1px solid;
  padding: 2px;
}

.cus-form-tag-1 {
  background-color: #ffb100;
}

.cus-form-tag-2 {
  background-color: #1bf;
}

.cus-form-tag-3 {
  background-color: #54d34c;
}

.cus-form-tag-4 {
  background-color: #ff7df5;
}

.cus-form-tag-label {
  line-height: 14px;
  margin: 0 5px;
  transform: translateY(-4px);
  font-size: 14px;
}

.full-screen-modal {
  position: fixed;
  width: 100%;
  height: calc(100vh - 40px);
  background: #ffc692;
  z-index: 997;
  top: 40px;
}

.full-screen-modal-header {
  margin-top: 45px;
}

.full-screen-modal-close-btn {
  position: absolute;
  right: 1.75rem;
  font-size: 14px;
}

#product-instruction-img {
  width: 100%;
}

.del-confirm {
  padding: 0.5rem 0 0.5rem 0.5rem;
  background: #dc354538;
  border-radius: 8px;
}

.tag-group-name-form {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.tag-group-name-btn {
  font-size: 12px;
  line-height: 12px;
  align-content: center;
}

/* Auto complete */
.autocomplete {
  position: relative;
  display: inline-block;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  /* border-bottom: none; */
  border-top: none;
  z-index: 99;
  background-color: #fff;
  /* padding-bottom: .25rem; */
  padding: 0 15px 15px;
  box-shadow: 1px 5px 5px #55555550;
  border-radius: 8px;
  /*position the autocomplete items to be the same width as the container:*/
  /*top: 100%;
  top:192px;
  left: 0;
  right: 0;*/
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
  width: 100%;
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9;
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important;
  color: #ffffff;
}
/* End autocomplete */

.routine-prodct-tag {
  font-size: 1rem;
}

.routine-product-ul {
  padding: 0;
  margin-bottom: 0;
}

.routine-product {
  list-style-type: none;
  border-bottom: 1px solid #2727272b;
  font-size: 14px;
  line-height: 36px;
}

.routine-product:last-child {
  border: 0;
}

.routine-product-info {
  font-size: 12px;
}

.routine-product-info-p {
  line-height: 20px;
}

.routine-product-btns {
  display: flex;
  flex-direction: row-reverse;
}

.routine-product-btns .routine-product-btn-input-block {
  flex-direction: row-reverse;
  background: #fff;
  border-radius: 8px;
}

.routine-product-btns .routine-product-btn-input-block input {
  border: 0;
  border-radius: 8px;
  padding: 0 0 0 10px;
  width: 180px;
}

.routine-product-btn {
  /*width: 38px;*/
  height: 38px;
  margin: 1px;
  line-height: 27px;
}

.add-product-checkbox {
  height: 32px;
  width: 32px;
  display: block;
  margin: 0 auto;
  accent-color: #ffa500;
}

.add-product-name {
  font-size: 18px;
  padding-left: 10px;
}

.knowledge-title-icon {
  line-height: 1.75rem;
  font-size: 1rem;
}

.knowledge-post-rank {
  font-size: 12px;
  line-height: 20px;
  flex: 0 0 auto;
  height: 28px;
}

.knowledge-ins-arrow {
  position: absolute;
  background: #fff;
  width: 12px;
  height: 12px;
  rotate: -45deg;
  left: 0.75rem;
  top: -0.25rem;
}

.knowledge-ins-text {
  font-style: italic;
  color: #7d7d7d;
}

.knowledge-post-content {
  background: #ffe2c8;
  border: 1px solid #ffc692;
}

.knowledge-content-img {
  max-width: 90%;
}

.knowledge-content-text {
  font-size: 14px;
}

.knowledge-group-order-form {
  flex-direction: row-reverse;
  gap: 3px;
  border-radius: 8px;
  border: 1px solid #55555550;
  padding: 2px;
  background-color: #747ca1;
}

.knowledge-group-order-form input {
  border: 0;
  padding-left: 5px;
}

.knowledge-group-admin {
  position: relative;
}

.admin-panel-arrow {
  width: 22px;
  height: 22px;
  background: #b4bdff;
  position: absolute;
  left: 1rem;
  top: -0.5rem;
  flex: 0 0 22px;
  rotate: 45deg;
}

#product-selection-list .row {
  border-bottom: 1px solid #cfcfcf;
}

#product-selection-list .row:last-child {
  border-bottom: none;
}

.product-day-checkbox {
  height: 32px;
  width: 32px;
}

.loaderWrapper {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 998;
  background-color: #000000c9;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  top: 30%;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 129, 61, 0.2);
  border-right: 1.1em solid rgba(255, 129, 61, 0.2);
  border-bottom: 1.1em solid rgba(255, 129, 61, 0.2);
  border-left: 1.1em solid #ff813d;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* SKELETON LOADING */
.skeleton {
  padding: 15px;
  /*max-width: 300px;*/
  width: 100%;
  /*background: #fff;*/
  margin-bottom: 20px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12);*/
}
.skeleton .square {
  height: 80px;
  border-radius: 5px;
  background: rgba(130, 130, 130, 0.2);
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(8%, rgba(130, 130, 130, 0.2)),
    color-stop(18%, rgba(130, 130, 130, 0.3)),
    color-stop(33%, rgba(130, 130, 130, 0.2))
  );
  background: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%);
  background-size: 800px 100px;
  animation: wave-squares 2s infinite ease-out;
}
.skeleton .line {
  height: 12px;
  margin-bottom: 6px;
  border-radius: 2px;
  background: rgba(130, 130, 130, 0.2);
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(8%, rgba(130, 130, 130, 0.2)),
    color-stop(18%, rgba(130, 130, 130, 0.3)),
    color-stop(33%, rgba(130, 130, 130, 0.2))
  );
  background: linear-gradient(to right, rgba(130, 130, 130, 0.2) 8%, rgba(130, 130, 130, 0.3) 18%, rgba(130, 130, 130, 0.2) 33%);
  background-size: 800px 100px;
  animation: wave-lines 2s infinite ease-out;
}
.skeleton-right {
  flex: 1;
}
.skeleton-left {
  flex: 2;
  padding-right: 15px;
}
.flex1 {
  flex: 1;
}
.flex2 {
  flex: 2;
}
.skeleton .line:last-child {
  margin-bottom: 0;
}
.h8 {
  height: 8px !important;
}
.h10 {
  height: 10px !important;
}
.h12 {
  height: 12px !important;
}
.h15 {
  height: 15px !important;
}
.h17 {
  height: 17px !important;
}
.h20 {
  height: 20px !important;
}
.h25 {
  height: 25px !important;
}
.w25 {
  width: 25% !important;
}
.w40 {
  width: 40% !important;
}
.w50 {
  width: 50% !important;
}
.w75 {
  width: 75% !important;
}
.m10 {
  margin-bottom: 10px !important;
}
.circle {
  border-radius: 50% !important;
  height: 80px !important;
  width: 80px;
}
@keyframes wave-lines {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}
@keyframes wave-squares {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}