@import url(https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);
@import url(https://fonts.googleapis.com/css?family=Abel);
.affiliate .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.affiliate .title {
  width: 100%;
  text-align: center;
  vertical-align: top;
  margin-bottom: 24px;
  font-size: 2rem;
  border-bottom: 2px #aaaaaa solid;
  letter-spacing: -1px; }

.affiliate #affiliate-content {
  border: dotted 1px #dddddd;
  padding: 16px 20px 16px 20px;
  background-color: #fefdcd;
  font-size: 1.1em;
  color: #555555; }

.affiliate #affiliate-intro-message {
  font-size: 1em; }

.affiliate .affiliate-title {
  margin-bottom: 5px; }

.affiliate .affiliate-title + p {
  padding-left: 30px; }

.affiliate .affiliate-title {
  margin-bottom: 5px; }

.promotion__box {
  display: flex;
  flex-direction: column;
  padding-top: 24px; }

.promotion__title {
  text-align: center;
  margin-bottom: 48px; }

.promotion__content-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; }
  .promotion__content-box a {
    text-decoration: none;
    color: black; }
  .promotion__content-box .promotion__menu-item {
    display: inline-block;
    margin: 24px;
    border-radius: 16px;
    padding: 24px;
    width: 240px;
    background: #fafafa; }
    .promotion__content-box .promotion__menu-item .promotion__menu-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 160px;
      font-size: 48px;
      font-weight: bolder;
      text-shadow: 0px 1px black; }
    .promotion__content-box .promotion__menu-item .promotion__item-text {
      margin-top: 16px;
      font-size: 18px;
      text-align: center; }

.btnDetail,
.btnAddOn,
.btnAddSelect {
  color: black;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 24px;
  padding: 6px 19px;
  background: #ffd44c;
  border-color: #ffd44c; }

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem; }

.MuiTableCell-head {
  background: #ffd44c !important;
  font-size: 16px !important;
  font-family: "Kanit", sans-serif !important;
  color: black !important; }

.buttonMove {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; }

.bgTable {
  background: lightgray;
  padding: 1rem; }

#gridAdd,
#gridImport {
  border: 1px solid lightgray;
  border-collapse: collapse;
  width: 100%; }

#gridAdd td,
#gridImport td {
  border-left: 1px solid lightgray;
  border-right: 1px solid lightgray;
  border-collapse: collapse;
  padding: 5px; }

.selected {
  background-color: #f0e68c; }

.blockCheckBox {
  background-color: #fafad2;
  padding: 1rem; }

.textInput {
  display: block;
  text-align: right; }
  @media (pointer: none), (pointer: coarse) {
    .textInput {
      text-align: left; } }

.btn-info {
  color: black;
  background-color: #ffd44c !important;
  border-color: #ffd44c !important; }

.btn-info:hover {
  color: #fff;
  background-color: gray !important;
  border-color: gray !important; }

.buffetBook input[type="text"] {
  border-radius: 24px;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.buffetBook input[type="textarea"] {
  border-radius: 24px !important;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.buffetBook .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.buffetBook .addBook {
  text-align: right;
  display: block;
  padding: 1rem; }

.buffetBook .back {
  text-align: left;
  display: block;
  padding-top: 1rem;
  padding-bottom: 1rem; }

.buffetBook .btnDetail {
  color: black;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 24px;
  padding: 6px 19px;
  background: #ffd44c;
  border-color: #ffd44c; }

.MuiTableCell-head {
  background: #ffd44c !important;
  font-size: 16px !important;
  font-family: "Kanit", sans-serif !important;
  color: black !important; }

.nav-tabs .nav-link.active {
  background: #ffd44c !important; }

.btnDetail,
.btnAddOn,
.btnAddSelect {
  color: black;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 24px;
  padding: 6px 19px;
  background: #ffd44c !important;
  border-color: #ffd44c !important; }

.btn-info {
  background: #ffd44c !important;
  border-color: #ffd44c !important; }

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem; }

.buttonMove {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; }

.bgTable {
  background: lightgray;
  padding: 1rem; }

#gridNotBuffetBook {
  border: 1px solid lightgray;
  border-collapse: collapse;
  width: 100%; }

#gridNotBuffetBook td {
  border-left: 1px solid lightgray;
  border-right: 1px solid lightgray;
  border-collapse: collapse;
  padding: 5px; }

.selected {
  background-color: #f0e68c; }

.blockCheckBox {
  background-color: #fafad2;
  padding: 1rem; }

.uploading-page {
  position: fixed;
  z-index: 999999 !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.shadow {
  box-shadow: 5px 10px 18px lightsteelblue !important; }

.btnSubmitPopup {
  background-color: #ffd44c !important;
  color: black !important;
  border-color: #ffd44c !important; }

.btnSecondaryPopup {
  color: black;
  background-color: #ffd44c !important;
  border-color: #ffd44c !important; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder;
  padding-top: 1rem; }

#addBookBuffet tbody,
#addBookBuffet thead tr {
  display: block; }

#addBookBuffet tbody {
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden; }

#addBookBuffet #gridNotBuffetBook td {
  width: 314px;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap; }

#addBookBuffet #gridNotBuffetBook {
  width: 100%;
  height: 100%; }

#addBookBuffet #gridNotBuffetBook {
  margin: 0 auto; }

.buffetMagazine .addBook {
  text-align: right;
  display: block;
  padding: 1rem; }

.buffetMagazine input[type="text"] {
  border-radius: 24px;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.buffetMagazine input[type="textarea"] {
  border-radius: 24px !important;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.buffetMagazine .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.buffetMagazine .back {
  text-align: left;
  display: block;
  padding: 1rem; }

.buffetMagazine .btnDetail {
  color: black;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 24px;
  padding: 6px 19px;
  background: #ffd44c;
  border-color: #ffd44c; }

.MuiTableCell-head {
  background: #ffd44c !important;
  font-size: 16px !important;
  font-family: "Kanit", sans-serif !important;
  color: black !important; }

.nav-tabs .nav-link.active {
  background: #ffd44c !important; }

.btnDetail,
.btnAddOn,
.btnAddSelect {
  color: black;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 24px;
  padding: 6px 19px;
  background: #ffd44c !important;
  border-color: #ffd44c !important; }

.btn-info {
  background: #ffd44c !important;
  border-color: #ffd44c !important; }

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem; }

.buttonMove {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; }

.bgTable {
  background: lightgray;
  padding: 1rem; }

#gridNotBuffetMagazine {
  border: 1px solid lightgray;
  border-collapse: collapse;
  width: 100%; }

#gridNotBuffetMagazine td {
  border-left: 1px solid lightgray;
  border-right: 1px solid lightgray;
  border-collapse: collapse;
  padding: 5px; }

.selected {
  background-color: #f0e68c; }

.blockCheckBox {
  background-color: #fafad2;
  padding: 1rem; }

.uploading-page {
  position: fixed;
  z-index: 999999 !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.shadow {
  box-shadow: 5px 10px 18px lightsteelblue !important;
  margin: 1rem; }

.btnSubmitPopup {
  background-color: #ffd44c !important;
  color: black !important;
  border-color: #ffd44c !important; }

.btnSecondaryPopup {
  color: black;
  background-color: #ffd44c !important;
  border-color: #ffd44c !important; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder;
  padding-top: 1rem; }

#addBookBuffet tbody,
#addBookBuffet thead tr {
  display: block; }

#addBookBuffet tbody {
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden; }

#addBookBuffet #gridNotBuffetBook td {
  width: 435px !important;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap; }

#addBookBuffet #gridNotBuffetBook {
  width: 100%;
  height: 100%; }

#addBookBuffet #gridNotBuffetBook {
  margin: 0 auto; }

.changePublisher .btnDetail {
  color: black !important;
  cursor: pointer !important;
  display: inline-block !important;
  text-align: center !important;
  border-radius: 24px !important;
  padding: 6px 19px !important;
  background: #ffd44c !important;
  border-color: #ffd44c !important; }

.changePublisher input[type=text] {
  border-radius: 24px;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.changePublisher .textInput {
  display: block;
  text-align: right; }
  @media (pointer: none), (pointer: coarse) {
    .changePublisher .textInput {
      text-align: left; } }

.changePublisher .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.changePublisher .MuiTableCell-head {
  background: #ffd44c !important;
  font-size: 16px !important;
  font-family: "Kanit", sans-serif !important;
  color: black !important; }

.changePublisher .content-list__search-input {
  width: 100%;
  min-width: 120px;
  height: 40px;
  border: 0;
  border-radius: 24px 0 0 24px;
  padding: 0 32px;
  background: #eaeaea; }
  .changePublisher .content-list__search-input:focus {
    outline-width: 0; }

.changePublisher .subscription__clear-search-btn {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  max-width: 60px;
  border: 0;
  padding: 8px 16px;
  background: #eaeaea; }

.changePublisher .subscription__search-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 40px;
  border: 0;
  background: #ffd44c; }
  .changePublisher .subscription__search-btn:hover {
    background: #eaeaea; }

.contentQueueBook .btnDetail {
  color: black !important;
  cursor: pointer !important;
  display: inline-block !important;
  text-align: center !important;
  border-radius: 24px !important;
  padding: 6px 19px !important;
  background: #ffd44c !important;
  border-color: #ffd44c !important; }

.contentQueueBook input[type="text"] {
  border-radius: 24px;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.contentQueueBook .textInput {
  display: block;
  text-align: right; }
  @media (pointer: none), (pointer: coarse) {
    .contentQueueBook .textInput {
      text-align: left; } }

.contentQueueBook .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.contentQueueBook .MuiTableCell-head {
  background: #ffd44c !important;
  font-size: 16px !important;
  font-family: "Kanit", sans-serif !important;
  color: black !important; }

.contentQueueBook .colorHeader {
  background: #f0e68c !important; }

.contentQueueBook .shadow {
  box-shadow: 5px 10px 18px lightsteelblue !important; }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

#create-content__form {
  padding: 24px;
  background: white;
  box-shadow: 5px 10px 18px lightsteelblue; }
  #create-content__form .create-content__form-item {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 24px; }
    #create-content__form .create-content__form-item .create-content__field {
      min-width: 120px;
      margin-bottom: 4px; }
    #create-content__form .create-content__form-item .form-group {
      display: flex;
      flex-direction: column;
      align-items: start;
      flex: 1;
      margin-bottom: 0; }
      #create-content__form .create-content__form-item .form-group input[name="contentName"] {
        width: 100%;
        min-width: 240px; }
      #create-content__form .create-content__form-item .form-group .help-block {
        width: 100%;
        padding-top: 4px;
        padding-right: 16px;
        text-align: right; }
      #create-content__form .create-content__form-item .form-group .create-content__file {
        width: 100%; }
        #create-content__form .create-content__form-item .form-group .create-content__file:hover {
          background: #eaeaea; }
      #create-content__form .create-content__form-item .form-group select,
      #create-content__form .create-content__form-item .form-group input[type="text"],
      #create-content__form .create-content__form-item .form-group input[type="number"],
      #create-content__form .create-content__form-item .form-group textarea {
        width: 100%;
        height: 40px;
        border: 0;
        border-radius: 24px;
        background: #ffffff;
        border: 1px solid lightgray; }
      #create-content__form .create-content__form-item .form-group select,
      #create-content__form .create-content__form-item .form-group input[type="text"],
      #create-content__form .create-content__form-item .form-group input[type="number"],
      #create-content__form .create-content__form-item .form-group textarea {
        padding: 8px 16px; }
      #create-content__form .create-content__form-item .form-group select[disabled] {
        background: #eaeaea; }
    #create-content__form .create-content__form-item .create-content__upload-box {
      display: flex;
      flex-direction: column;
      flex: 1; }
      #create-content__form .create-content__form-item .create-content__upload-box .create-content__guide {
        min-width: 240px;
        margin-top: 8px;
        padding: 16px;
        font-size: 14px;
        background: #eaeaea; }
        #create-content__form .create-content__form-item .create-content__upload-box .create-content__guide ul {
          margin: 0;
          padding-left: 16px; }
      #create-content__form .create-content__form-item .create-content__upload-box .create-content__warning {
        padding: 16px;
        font-size: 14px;
        background: #f8d7da; }
  #create-content__form #create-content__submit {
    width: 100%;
    height: 40px;
    font-size: 18px;
    font-weight: bolder; }
    #create-content__form #create-content__submit:hover {
      background: #eaeaea; }

#pdfModal.show {
  display: flex !important; }

#pdfModal ul {
  margin-top: 8px; }
  #pdfModal ul li {
    margin-left: 24px;
    list-style-type: disc; }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

@media (max-width: 767px) {
  #update-content__form .update-content__section {
    width: 100% !important; } }

@media (max-width: 575px) {
  #update-content__form .update-content__section {
    padding: 16px 8px !important; }
  #update-content__form [class*="col"] {
    padding-left: 4px;
    padding-right: 4px; } }

#update-content__form .row {
  margin-left: 0;
  margin-right: 0; }

#update-content__form [class*="col"] {
  margin: 0; }

#update-content__form [class*="col"]:last-child .form-group {
  margin: 0; }

#update-content__form .update-content__section {
  width: 720px;
  margin-bottom: 24px;
  padding: 24px;
  background: white;
  padding: 10px;
  box-shadow: 5px 10px 18px lightsteelblue; }
  #update-content__form .update-content__section .update-content__field {
    display: flex;
    align-items: flex-end;
    margin-bottom: 8px; }
  #update-content__form .update-content__section .form-group {
    margin-bottom: 24px; }
    #update-content__form .update-content__section .form-group textarea {
      min-height: 240px; }
    #update-content__form .update-content__section .form-group select,
    #update-content__form .update-content__section .form-group input[type="text"],
    #update-content__form .update-content__section .form-group input[type="number"],
    #update-content__form .update-content__section .form-group textarea {
      width: 100%;
      height: 40px;
      border: 0;
      border-radius: 24px;
      background: #ffffff;
      border: 1px solid lightgray; }
    #update-content__form .update-content__section .form-group .textCategory {
      width: 80% !important; }
    #update-content__form .update-content__section .form-group .btnSearch {
      border-radius: 24px;
      background-color: black; }
    #update-content__form .update-content__section .form-group select,
    #update-content__form .update-content__section .form-group input[type="text"],
    #update-content__form .update-content__section .form-group input[type="number"],
    #update-content__form .update-content__section .form-group textarea {
      padding: 8px 16px; }
    #update-content__form .update-content__section .form-group select[disabled] {
      background: #eaeaea; }
    #update-content__form .update-content__section .form-group .bootstrap-tagsinput {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      min-height: 40px;
      border: 1px solid lightgray;
      border-radius: 24px;
      padding: 4px 16px;
      padding-bottom: 8px;
      background: #ffffff; }
      #update-content__form .update-content__section .form-group .bootstrap-tagsinput input {
        flex: 1;
        border: 0;
        background: transparent !important; }
      #update-content__form .update-content__section .form-group .bootstrap-tagsinput .tag {
        margin-top: 4px;
        margin-right: 4px;
        padding: 2px 8px;
        border-radius: 24px;
        white-space: no-wrap;
        color: white;
        background: black; }
    #update-content__form .update-content__section .form-group #readDirection-rtl {
      margin-left: 16px; }
    #update-content__form .update-content__section .form-group .update-content__buffet-link {
      margin-left: 8px; }
    #update-content__form .update-content__section .form-group .update-content__buffet {
      background: #fff3cd;
      font-size: 14px; }
    #update-content__form .update-content__section .form-group .update-content__buffet-detail {
      background: #fff3cd;
      margin-bottom: 16px;
      font-size: 14px; }
  #update-content__form .update-content__section .required input[type="text"],
  #update-content__form .update-content__section .required input[type="number"],
  #update-content__form .update-content__section .required textarea,
  #update-content__form .update-content__section .required select,
  #update-content__form .update-content__section .required .bootstrap-tagsinput {
    border: 0;
    background: #fff3cd; }
  #update-content__form .update-content__section .update-content__promotion-alert {
    padding: 8px; }
  #update-content__form .update-content__section .update-content__price-box {
    display: inline-block;
    border: 1px solid #eaeaea;
    padding: 16px;
    background: #eaeaea; }
    #update-content__form .update-content__section .update-content__price-box select,
    #update-content__form .update-content__section .update-content__price-box input[type="number"] {
      border-radius: 24px 0 0 24px; }
    #update-content__form .update-content__section .update-content__price-box .update-content__print-price-box {
      display: flex;
      max-width: 360px;
      padding: 16px;
      align-items: center;
      background: #fafafa; }
    #update-content__form .update-content__section .update-content__price-box .update-content__currency {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0 24px 24px 0;
      padding: 8px;
      padding-right: 16px;
      background: #eaeaea;
      height: 40px; }
    #update-content__form .update-content__section .update-content__price-box .update-content__sale-price-title {
      margin-top: 16px;
      font-weight: bolder; }
    #update-content__form .update-content__section .update-content__price-box .update-content__shopprice-item {
      max-width: 360px;
      margin-top: 8px;
      padding: 8px 16px;
      background: #fafafa; }
      #update-content__form .update-content__section .update-content__price-box .update-content__shopprice-item .form-group {
        display: flex;
        flex-direction: column;
        margin-top: 8px; }
        #update-content__form .update-content__section .update-content__price-box .update-content__shopprice-item .form-group .update-content__shopprice-price {
          display: flex;
          align-items: center; }
          #update-content__form .update-content__section .update-content__price-box .update-content__shopprice-item .form-group .update-content__shopprice-price input[name="isUse"] {
            margin-right: 8px; }
        #update-content__form .update-content__section .update-content__price-box .update-content__shopprice-item .form-group .update-content__apple-price select {
          border-radius: 24px; }
        #update-content__form .update-content__section .update-content__price-box .update-content__shopprice-item .form-group .help-block {
          text-align: right; }
  #update-content__form .update-content__section .update-content__publish-auto-box {
    margin-right: 16px; }
  #update-content__form .update-content__section #sale-date {
    margin-top: 8px; }
  #update-content__form .update-content__section #publish-date,
  #update-content__form .update-content__section #sale-date {
    font-size: 14px !important; }
    #update-content__form .update-content__section #publish-date .ui-state-default,
    #update-content__form .update-content__section #sale-date .ui-state-default {
      border: 0;
      background: #eaeaea !important; }
    #update-content__form .update-content__section #publish-date .ui-state-active,
    #update-content__form .update-content__section #sale-date .ui-state-active {
      background: #ffd44c !important; }
    #update-content__form .update-content__section #publish-date .ui-datepicker-inline,
    #update-content__form .update-content__section #sale-date .ui-datepicker-inline {
      border-radius: 24px !important;
      padding: 8px; }
    #update-content__form .update-content__section #publish-date .ui-datepicker-header,
    #update-content__form .update-content__section #sale-date .ui-datepicker-header {
      border: 0;
      background: #eaeaea; }

#update-content__form .update-content__btn-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 18px; }
  #update-content__form .update-content__btn-group .update-content__btn-box {
    flex: 1;
    margin: 0;
    padding: 0 16px;
    text-align: center; }
  #update-content__form .update-content__btn-group .update-content__btn {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    min-width: 240px;
    border-radius: 24px;
    padding: 16px;
    white-space: nowrap;
    background-color: white; }
  #update-content__form .update-content__btn-group .update-content__submit {
    margin-bottom: 16px;
    font-weight: bolder;
    background: #ffd44c; }
    #update-content__form .update-content__btn-group .update-content__submit:hover {
      background: #eaeaea; }
  #update-content__form .update-content__btn-group .update-content__cancel:hover {
    background: #eaeaea; }

#update-content__buffet-modal.show {
  display: flex !important; }

.is-active {
  background: #ffd44c;
  padding: 0.5rem; }

.rstm-toggle-icon {
  display: inline-block; }

.rstm-toggle-icon-symbol {
  width: 2rem;
  height: 2rem;
  text-align: center;
  line-height: 2rem; }

.rstm-tree-item-group {
  list-style-type: none;
  padding-left: 0;
  border-top: 1px solid #ccc;
  text-align: left;
  width: 100%; }

.rstm-tree-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  color: #333;
  background: none;
  border-bottom: 1px solid #ccc;
  box-shadow: none;
  z-index: unset;
  position: relative; }

.rstm-tree-item--active {
  color: white;
  background: #179ed3;
  border-bottom: none; }

.rstm-tree-item--focused {
  box-shadow: 0 0 5px 0 #222;
  z-index: 999; }

.rstm-search {
  padding: 1rem 1.5rem;
  border: none;
  width: 100%; }

.css-f91fgu {
  background-color: #21252b !important;
  font-size: 15px !important;
  padding: 2rem !important;
  font-family: "Kanit", sans-serif !important; }

.css-1u94gzr {
  margin: -14px 0 0 -3px !important; }

.css-79elbk {
  background-color: black !important;
  padding: 0.25rem; }

.btnOk {
  background-color: #ffd44c !important;
  color: black;
  border-color: #ffd44c !important; }

.categories {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%; }

.categories__input {
  cursor: pointer;
  height: 40px;
  width: 50%;
  border: 2px solid black;
  padding: 24px 16px;
  font-size: 18px;
  text-align: center;
  background: transparent; }
  .categories__input:hover {
    background: #ffd44c; }
  .categories__input:focus {
    outline: none; }

#categories__modal.show .modal-dialog {
  margin: 0 auto;
  max-width: 720px;
  height: 100%; }

#categories__modal.show .modal-content {
  height: 100%; }

#categories__modal.show .modal-body {
  height: 100%;
  padding: 0; }

#categories2__modal.show .modal-dialog {
  margin: 0 auto;
  max-width: 720px;
  height: 100%; }

#categories2__modal.show .modal-content {
  height: 100%; }

#categories2__modal.show .modal-body {
  height: 100%;
  padding: 0; }

body .ui-datepicker .ui-datepicker-prev,
body .ui-datepicker .ui-datepicker-next {
  width: 3em; }

body
.ui-datepicker
.ui-datepicker-prev
span.ui-icon.ui-icon-circle-triangle-w,
body
.ui-datepicker
.ui-datepicker-next
span.ui-icon.ui-icon-circle-triangle-e {
  background: none;
  overflow: visible;
  text-indent: 0;
  width: initial;
  left: 20%; }

.update-content__summary-guide {
  flex: 1;
  text-align: right;
  font-size: 14px;
  font-weight: normal;
  color: #adb5bd; }

.alert {
  color: red;
  font-size: 12px;
  padding-top: 0rem !important;
  line-height: 1.5; }

.custom-control {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
  color-adjust: exact; }

.custom-control-inline {
  display: inline-flex;
  margin-right: 1rem; }

.custom-control-input {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 1rem;
  height: 1.25rem;
  opacity: 0; }
  .custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #ffd44c;
    background-color: #ffd44c; }
  .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(255, 212, 76, 0.25); }
  .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #fff3cc; }
  .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    color: #fff;
    background-color: white;
    border-color: white; }
  .custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label {
    color: #6c757d; }
    .custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before {
      background-color: #e9ecef; }

.custom-control-label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top; }
  .custom-control-label::before {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: #adb5bd solid 1px; }
  .custom-control-label::after {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: 50% / 50% 50% no-repeat; }

.custom-checkbox .custom-control-label::before {
  border-radius: 0.25rem; }

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e"); }

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: #ffd44c;
  background-color: #ffd44c; }

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e"); }

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(255, 212, 76, 0.5); }

.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
  background-color: rgba(255, 212, 76, 0.5); }

.custom-radio .custom-control-label::before {
  border-radius: 50%; }

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }

.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(255, 212, 76, 0.5); }

.custom-switch {
  padding-left: 2.25rem; }
  .custom-switch .custom-control-label::before {
    left: -2.25rem;
    width: 1.75rem;
    pointer-events: all;
    border-radius: 0.5rem; }
  .custom-switch .custom-control-label::after {
    top: calc(0.25rem + 2px);
    left: calc(-2.25rem + 2px);
    width: calc(1rem - 4px);
    height: calc(1rem - 4px);
    background-color: #adb5bd;
    border-radius: 0.5rem;
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
    @media (prefers-reduced-motion: reduce) {
      .custom-switch .custom-control-label::after {
        transition: none; } }
  .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #fff;
    transform: translateX(0.75rem); }
  .custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(255, 212, 76, 0.5); }

.custom-select {
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  vertical-align: middle;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  appearance: none; }
  .custom-select:focus {
    border-color: #fff3cc;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(255, 212, 76, 0.25); }
    .custom-select:focus::-ms-value {
      color: #495057;
      background-color: #fff; }
  .custom-select[multiple], .custom-select[size]:not([size="1"]) {
    height: auto;
    padding-right: 0.75rem;
    background-image: none; }
  .custom-select:disabled {
    color: #6c757d;
    background-color: #e9ecef; }
  .custom-select::-ms-expand {
    display: none; }
  .custom-select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #495057; }

.custom-select-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem; }

.custom-select-lg {
  height: calc(1.5em + 1rem + 2px);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 1.25rem; }

.custom-file {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin-bottom: 0; }

.custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin: 0;
  overflow: hidden;
  opacity: 0; }
  .custom-file-input:focus ~ .custom-file-label {
    border-color: #fff3cc;
    box-shadow: 0 0 0 0.2rem rgba(255, 212, 76, 0.25); }
  .custom-file-input[disabled] ~ .custom-file-label,
  .custom-file-input:disabled ~ .custom-file-label {
    background-color: #e9ecef; }
  .custom-file-input:lang(en) ~ .custom-file-label::after {
    content: "Browse"; }
  .custom-file-input ~ .custom-file-label[data-browse]::after {
    content: attr(data-browse); }

.custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  overflow: hidden;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem; }
  .custom-file-label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    height: calc(1.5em + 0.75rem);
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    color: #495057;
    content: "Browse";
    background-color: #e9ecef;
    border-left: inherit;
    border-radius: 0 0.25rem 0.25rem 0; }

.custom-range {
  width: 100%;
  height: 1.4rem;
  padding: 0;
  background-color: transparent;
  appearance: none; }
  .custom-range:focus {
    outline: 0; }
    .custom-range:focus::-webkit-slider-thumb {
      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 212, 76, 0.25); }
    .custom-range:focus::-moz-range-thumb {
      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 212, 76, 0.25); }
    .custom-range:focus::-ms-thumb {
      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 212, 76, 0.25); }
  .custom-range::-moz-focus-outer {
    border: 0; }
  .custom-range::-webkit-slider-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: -0.25rem;
    background-color: #ffd44c;
    border: 0;
    border-radius: 1rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none; }
    @media (prefers-reduced-motion: reduce) {
      .custom-range::-webkit-slider-thumb {
        transition: none; } }
    .custom-range::-webkit-slider-thumb:active {
      background-color: white; }
  .custom-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: #dee2e6;
    border-color: transparent;
    border-radius: 1rem; }
  .custom-range::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    background-color: #ffd44c;
    border: 0;
    border-radius: 1rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none; }
    @media (prefers-reduced-motion: reduce) {
      .custom-range::-moz-range-thumb {
        transition: none; } }
    .custom-range::-moz-range-thumb:active {
      background-color: white; }
  .custom-range::-moz-range-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: #dee2e6;
    border-color: transparent;
    border-radius: 1rem; }
  .custom-range::-ms-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: 0;
    margin-right: 0.2rem;
    margin-left: 0.2rem;
    background-color: #ffd44c;
    border: 0;
    border-radius: 1rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none; }
    @media (prefers-reduced-motion: reduce) {
      .custom-range::-ms-thumb {
        transition: none; } }
    .custom-range::-ms-thumb:active {
      background-color: white; }
  .custom-range::-ms-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: transparent;
    border-color: transparent;
    border-width: 0.5rem; }
  .custom-range::-ms-fill-lower {
    background-color: #dee2e6;
    border-radius: 1rem; }
  .custom-range::-ms-fill-upper {
    margin-right: 15px;
    background-color: #dee2e6;
    border-radius: 1rem; }
  .custom-range:disabled::-webkit-slider-thumb {
    background-color: #adb5bd; }
  .custom-range:disabled::-webkit-slider-runnable-track {
    cursor: default; }
  .custom-range:disabled::-moz-range-thumb {
    background-color: #adb5bd; }
  .custom-range:disabled::-moz-range-track {
    cursor: default; }
  .custom-range:disabled::-ms-thumb {
    background-color: #adb5bd; }

.custom-control-label::before,
.custom-file-label,
.custom-select {
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
  @media (prefers-reduced-motion: reduce) {
    .custom-control-label::before,
    .custom-file-label,
    .custom-select {
      transition: none; } }

.create-campaign__box {
  margin: 0 auto;
  padding: 24px;
  max-width: 640px;
  background: white; }
  .create-campaign__box .create-discount__form-box {
    margin-top: 24px; }
    .create-campaign__box .create-discount__form-box input[type="date"],
    .create-campaign__box .create-discount__form-box input[type="text"],
    .create-campaign__box .create-discount__form-box select {
      width: 100%;
      border: none;
      border-radius: 24px;
      padding: 8px;
      background: #fff3cd; }
      .create-campaign__box .create-discount__form-box input[type="date"]:focus,
      .create-campaign__box .create-discount__form-box input[type="text"]:focus,
      .create-campaign__box .create-discount__form-box select:focus {
        outline: 0; }
      .create-campaign__box .create-discount__form-box input[type="date"]:disabled,
      .create-campaign__box .create-discount__form-box input[type="text"]:disabled,
      .create-campaign__box .create-discount__form-box select:disabled {
        border: 0; }
    .create-campaign__box .create-discount__form-box .button {
      display: flex;
      align-items: center;
      justify-content: center; }
    .create-campaign__box .create-discount__form-box .categories {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      height: 100% !important; }
    .create-campaign__box .create-discount__form-box .categories__input {
      cursor: pointer !important;
      height: 40px !important;
      width: 50% !important;
      border: 2px solid black !important;
      padding: 24px 16px !important;
      font-size: 18px !important;
      text-align: center !important;
      background: transparent !important; }
      .create-campaign__box .create-discount__form-box .categories__input:hover {
        background: #ffd44c !important; }
      .create-campaign__box .create-discount__form-box .categories__input:focus {
        outline: none; }
    .create-campaign__box .create-discount__form-box .create-discount__old-price-box {
      color: gray; }
      .create-campaign__box .create-discount__form-box .create-discount__old-price-box select {
        background: #fafafa;
        padding: 0; }
    .create-campaign__box .create-discount__form-box input[type="number"] {
      margin-right: 8px; }
    .create-campaign__box .create-discount__form-box .create-discount__price-box {
      margin-bottom: 16px;
      padding: 16px;
      background: #fafafa; }
    .create-campaign__box .create-discount__form-box .create-discount__form-control-box:not(:last-child) {
      margin-bottom: 16px; }
    .create-campaign__box .create-discount__form-box .create-discount__field {
      margin-bottom: 4px;
      font-weight: bolder; }
    .create-campaign__box .create-discount__form-box .create-discount__price-form-control {
      display: flex;
      align-items: center; }
    .create-campaign__box .create-discount__form-box .create-discount__discount {
      margin-left: 16px; }
  .create-campaign__box .create-discount__create-btn {
    display: inline-block;
    width: 100%;
    margin-top: 24px;
    border-radius: 24px;
    background: #ffd44c;
    font-weight: bolder;
    max-width: 200px; }
    .create-campaign__box .create-discount__create-btn:hover {
      color: white; }
  .create-campaign__box .create-discount__back-btn {
    display: inline-block;
    width: 100%;
    margin-top: 24px;
    border-radius: 24px;
    background: #ffd44c; }
    .create-campaign__box .create-discount__back-btn:hover {
      color: white; }
  .create-campaign__box .hoverBtn:hover {
    color: #ffd44c !important; }
  .create-campaign__box .manual-discount__back-btn {
    display: inline-block;
    width: 100%;
    margin-top: 24px;
    border-radius: 24px;
    background: #ffd44c; }
    .create-campaign__box .manual-discount__back-btn:hover {
      color: #ffd44c; }
  .create-campaign__box .bootstrap-select {
    width: 100% !important; }
    .create-campaign__box .bootstrap-select .bs-searchbox input {
      border-radius: 0;
      background: #fafafa; }
    .create-campaign__box .bootstrap-select ul li {
      background: #fff3cd; }
    .create-campaign__box .bootstrap-select .dropdown-toggle {
      width: 100%;
      border: none;
      border-radius: 24px;
      padding: 8px;
      background: #fff3cd; }
      .create-campaign__box .bootstrap-select .dropdown-toggle:focus {
        outline: 0; }

@media (max-width: 767px) {
  .select-campaign__box {
    padding: 24px !important; } }

.select-campaign__box {
  margin: 0 auto;
  padding: 5rem;
  max-width: 1000px;
  background: white; }
  .select-campaign__box .fa-check-square {
    font-size: 20px !important; }
  .select-campaign__box .fa-square {
    font-size: 21px !important; }
  .select-campaign__box .select-checkbox:after {
    width: 18px !important;
    height: 18px !important; }
  .select-campaign__box .select-checkbox:before {
    width: 18px !important;
    height: 18px !important; }
  .select-campaign__box .center {
    display: flex;
    align-items: center;
    justify-content: center; }
  .select-campaign__box .dataTables_wrapper .dataTables_length {
    float: right !important; }
  .select-campaign__box .dataTables_length select {
    border-radius: 0px !important;
    padding: 0px !important;
    width: auto !important; }
  .select-campaign__box .table .fa,
  .select-campaign__box .table .fas {
    font-weight: normal !important; }
  .select-campaign__box .select-checkbox:before {
    margin-left: -9px !important; }
  .select-campaign__box .select-checkbox:after {
    margin-left: -8px !important; }
  .select-campaign__box .divCenter {
    margin: auto;
    display: block; }
  .select-campaign__box .page-title {
    text-align: center; }
  .select-campaign__box .been {
    margin-top: 1rem; }
  .select-campaign__box .content-list__search-box {
    display: flex;
    flex: 1;
    margin-right: 16px; }
    .select-campaign__box .content-list__search-box .content-list__search-input {
      width: 100%;
      min-width: 120px;
      height: 40px;
      border: 0;
      border-radius: 24px 0 0 24px;
      padding: 0 32px;
      background: #eaeaea; }
      .select-campaign__box .content-list__search-box .content-list__search-input:focus {
        outline-width: 0; }
    .select-campaign__box .content-list__search-box .content-list__search-btn {
      cursor: pointer; }
      .select-campaign__box .content-list__search-box .content-list__search-btn .fa-search {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 56px;
        height: 40px;
        border-radius: 0 24px 24px 0;
        background: #ffd44c; }
        .select-campaign__box .content-list__search-box .content-list__search-btn .fa-search:hover {
          background: #eaeaea; }
  .select-campaign__box .create-discount__form-box {
    margin-top: 24px; }
    .select-campaign__box .create-discount__form-box input[type="date"],
    .select-campaign__box .create-discount__form-box input[type="text"],
    .select-campaign__box .create-discount__form-box input[type="number"],
    .select-campaign__box .create-discount__form-box select {
      width: 100%;
      border-radius: 24px;
      padding: 8px; }
      .select-campaign__box .create-discount__form-box input[type="date"]:focus,
      .select-campaign__box .create-discount__form-box input[type="text"]:focus,
      .select-campaign__box .create-discount__form-box input[type="number"]:focus,
      .select-campaign__box .create-discount__form-box select:focus {
        outline: 0; }
      .select-campaign__box .create-discount__form-box input[type="date"]:disabled,
      .select-campaign__box .create-discount__form-box input[type="text"]:disabled,
      .select-campaign__box .create-discount__form-box input[type="number"]:disabled,
      .select-campaign__box .create-discount__form-box select:disabled {
        border: 0; }
    .select-campaign__box .create-discount__form-box .keyword input[type="date"],
    .select-campaign__box .create-discount__form-box .keyword input[type="text"],
    .select-campaign__box .create-discount__form-box .keyword input[type="number"],
    .select-campaign__box .create-discount__form-box .keyword select {
      width: 100%;
      height: 40px;
      border: 0;
      border-radius: 24px 0 0 24px;
      padding: 0 32px;
      background: #eaeaea; }
      .select-campaign__box .create-discount__form-box .keyword input[type="date"]:focus,
      .select-campaign__box .create-discount__form-box .keyword input[type="text"]:focus,
      .select-campaign__box .create-discount__form-box .keyword input[type="number"]:focus,
      .select-campaign__box .create-discount__form-box .keyword select:focus {
        outline: 0; }
      .select-campaign__box .create-discount__form-box .keyword input[type="date"]:disabled,
      .select-campaign__box .create-discount__form-box .keyword input[type="text"]:disabled,
      .select-campaign__box .create-discount__form-box .keyword input[type="number"]:disabled,
      .select-campaign__box .create-discount__form-box .keyword select:disabled {
        border: 0; }
    .select-campaign__box .create-discount__form-box .create-discount__old-price-box {
      color: gray; }
      .select-campaign__box .create-discount__form-box .create-discount__old-price-box select {
        background: #fafafa;
        padding: 0; }
    .select-campaign__box .create-discount__form-box input[type="number"] {
      margin-right: 8px; }
    .select-campaign__box .create-discount__form-box .create-discount__price-box {
      margin-bottom: 16px;
      padding: 16px;
      background: #fafafa; }
    .select-campaign__box .create-discount__form-box .create-discount__form-control-box:not(:last-child) {
      margin-bottom: 16px; }
    .select-campaign__box .create-discount__form-box .create-discount__form-control-box_date {
      padding-left: 1rem;
      padding-right: 1rem; }
      .select-campaign__box .create-discount__form-box .create-discount__form-control-box_date:not(:last-child) {
        margin-bottom: 16px; }
      .select-campaign__box .create-discount__form-box .create-discount__form-control-box_date > select {
        max-width: 176px !important; }
    .select-campaign__box .create-discount__form-box .create-discount__field {
      margin-bottom: 4px;
      font-weight: bolder; }
    .select-campaign__box .create-discount__form-box .create-discount__price-form-control {
      display: flex;
      align-items: center; }
    .select-campaign__box .create-discount__form-box .create-discount__discount {
      margin-left: 16px; }
  .select-campaign__box .saveBtn {
    display: flex;
    align-items: center;
    justify-content: center; }
  .select-campaign__box .create-discount__create-btn {
    display: inline-block;
    width: 100%;
    border-radius: 24px;
    background: #dedede;
    font-weight: bolder;
    max-width: 200px; }
    .select-campaign__box .create-discount__create-btn:hover {
      color: white;
      background: #4cb400; }
  .select-campaign__box .save {
    position: absolute;
    bottom: 0; }
  @media (max-width: 768px) {
    .select-campaign__box .saveBtn {
      display: "";
      align-items: "";
      justify-content: ""; }
    .select-campaign__box .create-discount__create-btn {
      display: inline-block;
      width: 100%;
      border-radius: 24px;
      background: #dedede;
      font-weight: bolder;
      max-width: 250px; }
      .select-campaign__box .create-discount__create-btn:hover {
        color: white;
        background: #4cb400; }
    .select-campaign__box .save {
      position: relative;
      margin: 1rem; } }
  .select-campaign__box .save-discount__save-btn {
    display: inline-block;
    width: 100%;
    border-radius: 24px;
    background: #dedede;
    font-weight: bolder;
    max-width: 250px; }
    .select-campaign__box .save-discount__save-btn:hover {
      color: black;
      background: #ffd44b; }
  .select-campaign__box .create-discount__back-btn {
    display: inline-block;
    width: 100%;
    border-radius: 24px;
    background: white;
    border-color: black;
    max-width: 250px; }
    .select-campaign__box .create-discount__back-btn:hover {
      color: white;
      background: #5a6268; }
  .select-campaign__box .create-discount__back-btn2 {
    display: inline-block;
    width: 100%;
    border-radius: 24px;
    background: white;
    border-color: black;
    max-width: 250px; }
    .select-campaign__box .create-discount__back-btn2:hover {
      color: black;
      background: #ffd44c; }
  .select-campaign__box .bootstrap-select {
    width: 100% !important; }
    .select-campaign__box .bootstrap-select .bs-searchbox input {
      border-radius: 0;
      background: #fafafa; }
    .select-campaign__box .bootstrap-select ul li {
      background: #fff3cd; }
    .select-campaign__box .bootstrap-select .dropdown-toggle {
      width: 100%;
      border: none;
      border-radius: 24px;
      padding: 8px;
      background: #fff3cd; }
      .select-campaign__box .bootstrap-select .dropdown-toggle:focus {
        outline: 0; }

.modalSuccess .modal-header {
  background-color: white !important;
  border-color: white !important; }

.modalSuccess .bold {
  font-weight: bold; }

.modalSuccess .imgCenter {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center; }

.modalSuccess .title {
  display: block;
  margin: auto;
  font-weight: bold; }

.modalSuccess .save-discount__save-btn {
  display: inline-block;
  width: 100%;
  margin-top: 24px;
  border-radius: 24px;
  background: #4cb400;
  font-weight: bolder;
  max-width: 200px;
  margin: 0 auto;
  display: block;
  color: white; }
  .modalSuccess .save-discount__save-btn:hover {
    color: white; }

.modalSuccess .padding {
  padding-bottom: 1rem; }

.custom-control {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
  color-adjust: exact; }

.custom-control-inline {
  display: inline-flex;
  margin-right: 1rem; }

.custom-control-input {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 1rem;
  height: 1.25rem;
  opacity: 0; }
  .custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #ffd44c;
    background-color: #ffd44c; }
  .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(255, 212, 76, 0.25); }
  .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #fff3cc; }
  .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    color: #fff;
    background-color: white;
    border-color: white; }
  .custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label {
    color: #6c757d; }
    .custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before {
      background-color: #e9ecef; }

.custom-control-label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top; }
  .custom-control-label::before {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: #adb5bd solid 1px; }
  .custom-control-label::after {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: 50% / 50% 50% no-repeat; }

.custom-checkbox .custom-control-label::before {
  border-radius: 0.25rem; }

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e"); }

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: #ffd44c;
  background-color: #ffd44c; }

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e"); }

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(255, 212, 76, 0.5); }

.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
  background-color: rgba(255, 212, 76, 0.5); }

.custom-radio .custom-control-label::before {
  border-radius: 50%; }

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }

.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(255, 212, 76, 0.5); }

.custom-switch {
  padding-left: 2.25rem; }
  .custom-switch .custom-control-label::before {
    left: -2.25rem;
    width: 1.75rem;
    pointer-events: all;
    border-radius: 0.5rem; }
  .custom-switch .custom-control-label::after {
    top: calc(0.25rem + 2px);
    left: calc(-2.25rem + 2px);
    width: calc(1rem - 4px);
    height: calc(1rem - 4px);
    background-color: #adb5bd;
    border-radius: 0.5rem;
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
    @media (prefers-reduced-motion: reduce) {
      .custom-switch .custom-control-label::after {
        transition: none; } }
  .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #fff;
    transform: translateX(0.75rem); }
  .custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(255, 212, 76, 0.5); }

.custom-select {
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  vertical-align: middle;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  appearance: none; }
  .custom-select:focus {
    border-color: #fff3cc;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(255, 212, 76, 0.25); }
    .custom-select:focus::-ms-value {
      color: #495057;
      background-color: #fff; }
  .custom-select[multiple], .custom-select[size]:not([size="1"]) {
    height: auto;
    padding-right: 0.75rem;
    background-image: none; }
  .custom-select:disabled {
    color: #6c757d;
    background-color: #e9ecef; }
  .custom-select::-ms-expand {
    display: none; }
  .custom-select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #495057; }

.custom-select-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem; }

.custom-select-lg {
  height: calc(1.5em + 1rem + 2px);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 1.25rem; }

.custom-file {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin-bottom: 0; }

.custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin: 0;
  overflow: hidden;
  opacity: 0; }
  .custom-file-input:focus ~ .custom-file-label {
    border-color: #fff3cc;
    box-shadow: 0 0 0 0.2rem rgba(255, 212, 76, 0.25); }
  .custom-file-input[disabled] ~ .custom-file-label,
  .custom-file-input:disabled ~ .custom-file-label {
    background-color: #e9ecef; }
  .custom-file-input:lang(en) ~ .custom-file-label::after {
    content: "Browse"; }
  .custom-file-input ~ .custom-file-label[data-browse]::after {
    content: attr(data-browse); }

.custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  overflow: hidden;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem; }
  .custom-file-label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    height: calc(1.5em + 0.75rem);
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    color: #495057;
    content: "Browse";
    background-color: #e9ecef;
    border-left: inherit;
    border-radius: 0 0.25rem 0.25rem 0; }

.custom-range {
  width: 100%;
  height: 1.4rem;
  padding: 0;
  background-color: transparent;
  appearance: none; }
  .custom-range:focus {
    outline: 0; }
    .custom-range:focus::-webkit-slider-thumb {
      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 212, 76, 0.25); }
    .custom-range:focus::-moz-range-thumb {
      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 212, 76, 0.25); }
    .custom-range:focus::-ms-thumb {
      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 212, 76, 0.25); }
  .custom-range::-moz-focus-outer {
    border: 0; }
  .custom-range::-webkit-slider-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: -0.25rem;
    background-color: #ffd44c;
    border: 0;
    border-radius: 1rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none; }
    @media (prefers-reduced-motion: reduce) {
      .custom-range::-webkit-slider-thumb {
        transition: none; } }
    .custom-range::-webkit-slider-thumb:active {
      background-color: white; }
  .custom-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: #dee2e6;
    border-color: transparent;
    border-radius: 1rem; }
  .custom-range::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    background-color: #ffd44c;
    border: 0;
    border-radius: 1rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none; }
    @media (prefers-reduced-motion: reduce) {
      .custom-range::-moz-range-thumb {
        transition: none; } }
    .custom-range::-moz-range-thumb:active {
      background-color: white; }
  .custom-range::-moz-range-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: #dee2e6;
    border-color: transparent;
    border-radius: 1rem; }
  .custom-range::-ms-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: 0;
    margin-right: 0.2rem;
    margin-left: 0.2rem;
    background-color: #ffd44c;
    border: 0;
    border-radius: 1rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none; }
    @media (prefers-reduced-motion: reduce) {
      .custom-range::-ms-thumb {
        transition: none; } }
    .custom-range::-ms-thumb:active {
      background-color: white; }
  .custom-range::-ms-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: transparent;
    border-color: transparent;
    border-width: 0.5rem; }
  .custom-range::-ms-fill-lower {
    background-color: #dee2e6;
    border-radius: 1rem; }
  .custom-range::-ms-fill-upper {
    margin-right: 15px;
    background-color: #dee2e6;
    border-radius: 1rem; }
  .custom-range:disabled::-webkit-slider-thumb {
    background-color: #adb5bd; }
  .custom-range:disabled::-webkit-slider-runnable-track {
    cursor: default; }
  .custom-range:disabled::-moz-range-thumb {
    background-color: #adb5bd; }
  .custom-range:disabled::-moz-range-track {
    cursor: default; }
  .custom-range:disabled::-ms-thumb {
    background-color: #adb5bd; }

.custom-control-label::before,
.custom-file-label,
.custom-select {
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
  @media (prefers-reduced-motion: reduce) {
    .custom-control-label::before,
    .custom-file-label,
    .custom-select {
      transition: none; } }

.create-campaign__box {
  margin: 0 auto;
  padding: 24px;
  max-width: 640px;
  background: white; }
  .create-campaign__box .create-discount__form-box {
    margin-top: 24px; }
    .create-campaign__box .create-discount__form-box input[type="date"],
    .create-campaign__box .create-discount__form-box input[type="text"],
    .create-campaign__box .create-discount__form-box select {
      width: 100%;
      border: none;
      border-radius: 24px;
      padding: 8px;
      background: #fff3cd; }
      .create-campaign__box .create-discount__form-box input[type="date"]:focus,
      .create-campaign__box .create-discount__form-box input[type="text"]:focus,
      .create-campaign__box .create-discount__form-box select:focus {
        outline: 0; }
      .create-campaign__box .create-discount__form-box input[type="date"]:disabled,
      .create-campaign__box .create-discount__form-box input[type="text"]:disabled,
      .create-campaign__box .create-discount__form-box select:disabled {
        border: 0; }
    .create-campaign__box .create-discount__form-box .button {
      display: flex;
      align-items: center;
      justify-content: center; }
    .create-campaign__box .create-discount__form-box .categories {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      height: 100% !important; }
    .create-campaign__box .create-discount__form-box .categories__input {
      cursor: pointer !important;
      height: 40px !important;
      width: 50% !important;
      border: 2px solid black !important;
      padding: 24px 16px !important;
      font-size: 18px !important;
      text-align: center !important;
      background: transparent !important; }
      .create-campaign__box .create-discount__form-box .categories__input:hover {
        background: #ffd44c !important; }
      .create-campaign__box .create-discount__form-box .categories__input:focus {
        outline: none; }
    .create-campaign__box .create-discount__form-box .create-discount__old-price-box {
      color: gray; }
      .create-campaign__box .create-discount__form-box .create-discount__old-price-box select {
        background: #fafafa;
        padding: 0; }
    .create-campaign__box .create-discount__form-box input[type="number"] {
      margin-right: 8px; }
    .create-campaign__box .create-discount__form-box .create-discount__price-box {
      margin-bottom: 16px;
      padding: 16px;
      background: #fafafa; }
    .create-campaign__box .create-discount__form-box .create-discount__form-control-box:not(:last-child) {
      margin-bottom: 16px; }
    .create-campaign__box .create-discount__form-box .create-discount__field {
      margin-bottom: 4px;
      font-weight: bolder; }
    .create-campaign__box .create-discount__form-box .create-discount__price-form-control {
      display: flex;
      align-items: center; }
    .create-campaign__box .create-discount__form-box .create-discount__discount {
      margin-left: 16px; }
  .create-campaign__box .create-discount__create-btn {
    display: inline-block;
    width: 100%;
    margin-top: 24px;
    border-radius: 24px;
    background: #ffd44c;
    font-weight: bolder;
    max-width: 200px; }
    .create-campaign__box .create-discount__create-btn:hover {
      color: white; }
  .create-campaign__box .create-discount__back-btn {
    display: inline-block;
    width: 100%;
    margin-top: 24px;
    border-radius: 24px;
    background: #ffd44c; }
    .create-campaign__box .create-discount__back-btn:hover {
      color: white; }
  .create-campaign__box .bootstrap-select {
    width: 100% !important; }
    .create-campaign__box .bootstrap-select .bs-searchbox input {
      border-radius: 0;
      background: #fafafa; }
    .create-campaign__box .bootstrap-select ul li {
      background: #fff3cd; }
    .create-campaign__box .bootstrap-select .dropdown-toggle {
      width: 100%;
      border: none;
      border-radius: 24px;
      padding: 8px;
      background: #fff3cd; }
      .create-campaign__box .bootstrap-select .dropdown-toggle:focus {
        outline: 0; }

@media (max-width: 767px) {
  .select-campaign__box {
    padding: 24px !important; } }

.select-campaign__box {
  margin: 0 auto;
  padding: 5rem;
  max-width: 1000px;
  background: white; }
  .select-campaign__box .fa-check-square {
    font-size: 20px !important; }
  .select-campaign__box .fa-square {
    font-size: 21px !important; }
  .select-campaign__box .select-checkbox:after {
    width: 18px !important;
    height: 18px !important; }
  .select-campaign__box .select-checkbox:before {
    width: 18px !important;
    height: 18px !important; }
  .select-campaign__box .center {
    display: flex;
    align-items: center;
    justify-content: center; }
  .select-campaign__box .dataTables_wrapper .dataTables_length {
    float: right !important; }
  .select-campaign__box .dataTables_length select {
    border-radius: 0px !important;
    padding: 0px !important;
    width: auto !important; }
  .select-campaign__box .table .fa,
  .select-campaign__box .table .fas {
    font-weight: normal !important; }
  .select-campaign__box .select-checkbox:before {
    margin-left: -9px !important; }
  .select-campaign__box .select-checkbox:after {
    margin-left: -8px !important; }
  .select-campaign__box .divCenter {
    margin: auto;
    display: block; }
  .select-campaign__box .page-title {
    text-align: center; }
  .select-campaign__box .been {
    margin-top: 1rem; }
  .select-campaign__box .content-list__search-box {
    display: flex;
    flex: 1;
    margin-right: 16px; }
    .select-campaign__box .content-list__search-box .content-list__search-input {
      width: 100%;
      min-width: 120px;
      height: 40px;
      border: 0;
      border-radius: 24px 0 0 24px;
      padding: 0 32px;
      background: #eaeaea; }
      .select-campaign__box .content-list__search-box .content-list__search-input:focus {
        outline-width: 0; }
    .select-campaign__box .content-list__search-box .content-list__search-btn {
      cursor: pointer; }
      .select-campaign__box .content-list__search-box .content-list__search-btn .fa-search {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 56px;
        height: 40px;
        border-radius: 0 24px 24px 0;
        background: #ffd44c; }
        .select-campaign__box .content-list__search-box .content-list__search-btn .fa-search:hover {
          background: #eaeaea; }
  .select-campaign__box .tableBook {
    overflow-x: auto; }
  .select-campaign__box .create-discount__form-box {
    margin-top: 24px; }
    .select-campaign__box .create-discount__form-box input[type="date"],
    .select-campaign__box .create-discount__form-box input[type="text"],
    .select-campaign__box .create-discount__form-box input[type="number"],
    .select-campaign__box .create-discount__form-box select {
      width: 100%;
      border-radius: 24px;
      padding: 8px; }
      .select-campaign__box .create-discount__form-box input[type="date"]:focus,
      .select-campaign__box .create-discount__form-box input[type="text"]:focus,
      .select-campaign__box .create-discount__form-box input[type="number"]:focus,
      .select-campaign__box .create-discount__form-box select:focus {
        outline: 0; }
      .select-campaign__box .create-discount__form-box input[type="date"]:disabled,
      .select-campaign__box .create-discount__form-box input[type="text"]:disabled,
      .select-campaign__box .create-discount__form-box input[type="number"]:disabled,
      .select-campaign__box .create-discount__form-box select:disabled {
        border: 0; }
    .select-campaign__box .create-discount__form-box .keyword input[type="date"],
    .select-campaign__box .create-discount__form-box .keyword input[type="text"],
    .select-campaign__box .create-discount__form-box .keyword input[type="number"],
    .select-campaign__box .create-discount__form-box .keyword select {
      width: 100%;
      height: 40px;
      border: 0;
      border-radius: 24px 0 0 24px;
      padding: 0 32px;
      background: #eaeaea; }
      .select-campaign__box .create-discount__form-box .keyword input[type="date"]:focus,
      .select-campaign__box .create-discount__form-box .keyword input[type="text"]:focus,
      .select-campaign__box .create-discount__form-box .keyword input[type="number"]:focus,
      .select-campaign__box .create-discount__form-box .keyword select:focus {
        outline: 0; }
      .select-campaign__box .create-discount__form-box .keyword input[type="date"]:disabled,
      .select-campaign__box .create-discount__form-box .keyword input[type="text"]:disabled,
      .select-campaign__box .create-discount__form-box .keyword input[type="number"]:disabled,
      .select-campaign__box .create-discount__form-box .keyword select:disabled {
        border: 0; }
    .select-campaign__box .create-discount__form-box .create-discount__old-price-box {
      color: gray; }
      .select-campaign__box .create-discount__form-box .create-discount__old-price-box select {
        background: #fafafa;
        padding: 0; }
    .select-campaign__box .create-discount__form-box input[type="number"] {
      margin-right: 8px; }
    .select-campaign__box .create-discount__form-box .create-discount__price-box {
      margin-bottom: 16px;
      padding: 16px;
      background: #fafafa; }
    .select-campaign__box .create-discount__form-box .create-discount__form-control-box:not(:last-child) {
      margin-bottom: 16px; }
    .select-campaign__box .create-discount__form-box .create-discount__form-control-box_date {
      padding-left: 1rem;
      padding-right: 1rem; }
      .select-campaign__box .create-discount__form-box .create-discount__form-control-box_date:not(:last-child) {
        margin-bottom: 16px; }
      .select-campaign__box .create-discount__form-box .create-discount__form-control-box_date > select {
        max-width: 176px !important; }
    .select-campaign__box .create-discount__form-box .create-discount__field {
      margin-bottom: 4px;
      font-weight: bolder; }
    .select-campaign__box .create-discount__form-box .create-discount__price-form-control {
      display: flex;
      align-items: center; }
    .select-campaign__box .create-discount__form-box .create-discount__discount {
      margin-left: 16px; }
  .select-campaign__box .saveBtn {
    display: flex;
    align-items: center;
    justify-content: center; }
  .select-campaign__box .create-discount__create-btn {
    display: inline-block;
    width: 100%;
    border-radius: 24px;
    background: #dedede;
    font-weight: bolder;
    max-width: 200px; }
    .select-campaign__box .create-discount__create-btn:hover {
      color: white;
      background: #4cb400; }
  .select-campaign__box .save {
    position: absolute;
    bottom: 0; }
  @media (max-width: 768px) {
    .select-campaign__box .saveBtn {
      display: "";
      align-items: "";
      justify-content: ""; }
    .select-campaign__box .create-discount__create-btn {
      display: inline-block;
      width: 100%;
      border-radius: 24px;
      background: #dedede;
      font-weight: bolder;
      max-width: 250px; }
      .select-campaign__box .create-discount__create-btn:hover {
        color: white;
        background: #4cb400; }
    .select-campaign__box .save {
      position: relative;
      margin: 1rem; } }
  .select-campaign__box .save-discount__save-btn {
    display: inline-block;
    width: 100%;
    border-radius: 24px;
    background: #dedede;
    font-weight: bolder;
    max-width: 250px; }
    .select-campaign__box .save-discount__save-btn:hover {
      color: black;
      background: #ffd44b; }
  .select-campaign__box .create-discount__back-btn {
    display: inline-block;
    width: 100%;
    border-radius: 24px;
    background: white;
    border-color: black;
    max-width: 250px; }
    .select-campaign__box .create-discount__back-btn:hover {
      color: white;
      background: #5a6268; }
  .select-campaign__box .bootstrap-select {
    width: 100% !important; }
    .select-campaign__box .bootstrap-select .bs-searchbox input {
      border-radius: 0;
      background: #fafafa; }
    .select-campaign__box .bootstrap-select ul li {
      background: #fff3cd; }
    .select-campaign__box .bootstrap-select .dropdown-toggle {
      width: 100%;
      border: none;
      border-radius: 24px;
      padding: 8px;
      background: #fff3cd; }
      .select-campaign__box .bootstrap-select .dropdown-toggle:focus {
        outline: 0; }

.modalSuccess .modal-header {
  background-color: white !important;
  border-color: white !important; }

.modalSuccess .bold {
  font-weight: bold; }

.modalSuccess .imgCenter {
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center; }

.modalSuccess .title {
  display: block;
  margin: auto;
  font-weight: bold; }

.modalSuccess .save-discount__save-btn {
  display: inline-block;
  width: 100%;
  margin-top: 24px;
  border-radius: 24px;
  background: #4cb400;
  font-weight: bolder;
  max-width: 200px;
  margin: 0 auto;
  display: block;
  color: white; }
  .modalSuccess .save-discount__save-btn:hover {
    color: white; }

.modalSuccess .padding {
  padding-bottom: 1rem; }

.create-discount__box {
  margin: 0 auto;
  padding: 24px;
  max-width: 640px;
  background: white; }
  .create-discount__box .create-discount__form-box {
    margin-top: 24px; }
    .create-discount__box .create-discount__form-box input[type="date"],
    .create-discount__box .create-discount__form-box input[type="text"],
    .create-discount__box .create-discount__form-box input[type="number"],
    .create-discount__box .create-discount__form-box select {
      width: 100%;
      border: none;
      border-radius: 24px;
      padding: 8px;
      background: #fff3cd; }
      .create-discount__box .create-discount__form-box input[type="date"]:focus,
      .create-discount__box .create-discount__form-box input[type="text"]:focus,
      .create-discount__box .create-discount__form-box input[type="number"]:focus,
      .create-discount__box .create-discount__form-box select:focus {
        outline: 0; }
      .create-discount__box .create-discount__form-box input[type="date"]:disabled,
      .create-discount__box .create-discount__form-box input[type="text"]:disabled,
      .create-discount__box .create-discount__form-box input[type="number"]:disabled,
      .create-discount__box .create-discount__form-box select:disabled {
        border: 0; }
    .create-discount__box .create-discount__form-box .create-discount__old-price-box {
      color: gray; }
      .create-discount__box .create-discount__form-box .create-discount__old-price-box select {
        background: #fafafa;
        padding: 0; }
    .create-discount__box .create-discount__form-box input[type="number"] {
      margin-right: 8px; }
    .create-discount__box .create-discount__form-box .create-discount__price-box {
      margin-bottom: 16px;
      padding: 16px;
      background: #fafafa; }
    .create-discount__box .create-discount__form-box .create-discount__form-control-box:not(:last-child) {
      margin-bottom: 16px; }
    .create-discount__box .create-discount__form-box .create-discount__field {
      margin-bottom: 4px;
      font-weight: bolder; }
    .create-discount__box .create-discount__form-box .create-discount__price-form-control {
      display: flex;
      align-items: center; }
    .create-discount__box .create-discount__form-box .create-discount__discount {
      margin-left: 16px; }
  .create-discount__box .create-discount__create-btn {
    display: inline-block;
    width: 100%;
    margin-top: 24px;
    border-radius: 24px;
    background: #ffd44c;
    font-weight: bolder; }
    .create-discount__box .create-discount__create-btn:hover {
      color: white; }
  .create-discount__box .create-discount__back-btn {
    display: inline-block;
    width: 100%;
    margin-top: 24px;
    border-radius: 24px;
    background: #ffd44c; }
    .create-discount__box .create-discount__back-btn:hover {
      color: white;
      background: #5a6268; }
  .create-discount__box .bootstrap-select {
    width: 100% !important; }
    .create-discount__box .bootstrap-select .bs-searchbox input {
      border-radius: 0;
      background: #fafafa; }
    .create-discount__box .bootstrap-select ul li {
      background: #fff3cd; }
    .create-discount__box .bootstrap-select .dropdown-toggle {
      width: 100%;
      border: none;
      border-radius: 24px;
      padding: 8px;
      background: #fff3cd; }
      .create-discount__box .bootstrap-select .dropdown-toggle:focus {
        outline: 0; }

.ui-datepicker {
  font-size: 14px; }

.create-discount__box {
  margin: 0 auto;
  padding: 24px;
  max-width: 640px;
  background: white; }
  .create-discount__box .create-discount__form-box {
    margin-top: 24px; }
    .create-discount__box .create-discount__form-box input[type="date"],
    .create-discount__box .create-discount__form-box input[type="text"],
    .create-discount__box .create-discount__form-box select {
      width: 100%;
      border: none;
      border-radius: 24px;
      padding: 8px;
      background: #fff3cd; }
      .create-discount__box .create-discount__form-box input[type="date"]:focus,
      .create-discount__box .create-discount__form-box input[type="text"]:focus,
      .create-discount__box .create-discount__form-box select:focus {
        outline: 0; }
      .create-discount__box .create-discount__form-box input[type="date"]:disabled,
      .create-discount__box .create-discount__form-box input[type="text"]:disabled,
      .create-discount__box .create-discount__form-box select:disabled {
        border: 0; }
    .create-discount__box .create-discount__form-box .categories {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      height: 100% !important; }
    .create-discount__box .create-discount__form-box .categories__input {
      cursor: pointer !important;
      height: 40px !important;
      width: 50% !important;
      border: 2px solid black !important;
      padding: 24px 16px !important;
      font-size: 18px !important;
      text-align: center !important;
      background: transparent !important; }
      .create-discount__box .create-discount__form-box .categories__input:hover {
        background: #ffd44c !important; }
      .create-discount__box .create-discount__form-box .categories__input:focus {
        outline: none; }
    .create-discount__box .create-discount__form-box .create-discount__old-price-box {
      color: gray; }
      .create-discount__box .create-discount__form-box .create-discount__old-price-box select {
        background: #fafafa;
        padding: 0; }
    .create-discount__box .create-discount__form-box input[type="number"] {
      margin-right: 8px; }
    .create-discount__box .create-discount__form-box .create-discount__price-box {
      margin-bottom: 16px;
      padding: 16px;
      background: #fafafa; }
    .create-discount__box .create-discount__form-box .create-discount__form-control-box:not(:last-child) {
      margin-bottom: 16px; }
    .create-discount__box .create-discount__form-box .create-discount__field {
      margin-bottom: 4px;
      font-weight: bolder; }
    .create-discount__box .create-discount__form-box .create-discount__price-form-control {
      display: flex;
      align-items: center; }
    .create-discount__box .create-discount__form-box .create-discount__discount {
      margin-left: 16px; }
  .create-discount__box .create-discount__create-btn {
    display: inline-block;
    width: 100%;
    margin-top: 24px;
    border-radius: 24px;
    background: #ffd44c;
    font-weight: bolder; }
    .create-discount__box .create-discount__create-btn:hover {
      color: white; }
  .create-discount__box .create-discount__back-btn {
    display: inline-block;
    width: 100%;
    margin-top: 24px;
    border-radius: 24px;
    background: #ffd44c; }
    .create-discount__box .create-discount__back-btn:hover {
      color: white; }
  .create-discount__box .bootstrap-select {
    width: 100% !important; }
    .create-discount__box .bootstrap-select .bs-searchbox input {
      border-radius: 0;
      background: #fafafa; }
    .create-discount__box .bootstrap-select ul li {
      background: #fff3cd; }
    .create-discount__box .bootstrap-select .dropdown-toggle {
      width: 100%;
      border: none;
      border-radius: 24px;
      padding: 8px;
      background: #fff3cd; }
      .create-discount__box .bootstrap-select .dropdown-toggle:focus {
        outline: 0; }

.select-discount__box {
  margin: 0 auto;
  padding: 24px;
  background: white; }
  .select-discount__box .flex-container {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;
    /* NEW, Spec - Firefox, Chrome, Opera */
    justify-content: center;
    align-items: center;
    background-color: #ffffe0;
    padding: 1rem; }
  .select-discount__box .btnSearch {
    border-radius: 24px;
    background: #ffd44c;
    border-color: #ffd44c;
    color: black; }
  .select-discount__box .btnDetail {
    border-radius: 24px;
    background: #ffd44c;
    border-color: #ffd44c;
    color: black; }
  .select-discount__box .page-title {
    text-align: center; }
  .select-discount__box .create-discount__form-box {
    margin-top: 24px; }
    .select-discount__box .create-discount__form-box input[type="text"],
    .select-discount__box .create-discount__form-box input[type="date"],
    .select-discount__box .create-discount__form-box select {
      width: 100%;
      border: none;
      border-radius: 24px;
      padding: 8px;
      background: #fff3cd; }
      .select-discount__box .create-discount__form-box input[type="text"]:focus,
      .select-discount__box .create-discount__form-box input[type="date"]:focus,
      .select-discount__box .create-discount__form-box select:focus {
        outline: 0; }
      .select-discount__box .create-discount__form-box input[type="text"]:disabled,
      .select-discount__box .create-discount__form-box input[type="date"]:disabled,
      .select-discount__box .create-discount__form-box select:disabled {
        border: 0; }
    .select-discount__box .create-discount__form-box .create-discount__old-price-box {
      color: gray; }
      .select-discount__box .create-discount__form-box .create-discount__old-price-box select {
        background: #fafafa;
        padding: 0; }
    .select-discount__box .create-discount__form-box input[type="number"] {
      margin-right: 8px; }
    .select-discount__box .create-discount__form-box .create-discount__price-box {
      margin-bottom: 16px;
      padding: 16px;
      background: #fafafa; }
    .select-discount__box .create-discount__form-box .create-discount__form-control-box:not(:last-child) {
      margin-bottom: 16px; }
    .select-discount__box .create-discount__form-box .create-discount__field {
      margin-bottom: 4px;
      font-weight: bolder; }
    .select-discount__box .create-discount__form-box .create-discount__price-form-control {
      display: flex;
      align-items: center; }
    .select-discount__box .create-discount__form-box .create-discount__discount {
      margin-left: 16px; }
  .select-discount__box .create-discount__create-btn {
    display: inline-block;
    width: 100%;
    margin-top: 24px;
    border-radius: 24px;
    background: #ffd44c;
    font-weight: bolder; }
    .select-discount__box .create-discount__create-btn:hover {
      color: white; }
  .select-discount__box .create-discount__back-btn {
    display: inline-block;
    width: 100%;
    margin-top: 24px;
    border-radius: 24px;
    background: #ffd44c; }
    .select-discount__box .create-discount__back-btn:hover {
      color: white; }
  .select-discount__box .bootstrap-select {
    width: 100% !important; }
    .select-discount__box .bootstrap-select .bs-searchbox input {
      border-radius: 0;
      background: #fafafa; }
    .select-discount__box .bootstrap-select ul li {
      background: #fff3cd; }
    .select-discount__box .bootstrap-select .dropdown-toggle {
      width: 100%;
      border: none;
      border-radius: 24px;
      padding: 8px;
      background: #fff3cd; }
      .select-discount__box .bootstrap-select .dropdown-toggle:focus {
        outline: 0; }
  .select-discount__box .content-list__add-btn {
    cursor: pointer;
    height: 40px;
    margin-top: 16px;
    margin-right: 16px;
    border-radius: 24px;
    padding: 8px 32px;
    text-decoration: none;
    font-weight: bolder;
    color: black; }
    .select-discount__box .content-list__add-btn:hover {
      background: #eaeaea; }
    .select-discount__box .content-list__add-btn .fa-plus {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 20px;
      height: 20px;
      margin-right: 4px;
      border-radius: 50%;
      padding: 4px;
      color: white;
      background: black; }
  .select-discount__box .content-list__search-input {
    width: 100%;
    min-width: 120px;
    height: 40px;
    border: 0;
    border-radius: 24px 0 0 24px;
    padding: 0 32px;
    background: #eaeaea; }
    .select-discount__box .content-list__search-input:focus {
      outline-width: 0; }
  .select-discount__box .content-list__search-btn {
    cursor: pointer; }
    .select-discount__box .content-list__search-btn .fa-search {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 56px;
      height: 40px;
      border-radius: 0 24px 24px 0;
      background: #ffd44c; }
      .select-discount__box .content-list__search-btn .fa-search:hover {
        background: #eaeaea; }
  .select-discount__box .content-list__filter-box {
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 0;
    padding-right: 0; }
    .select-discount__box .content-list__filter-box .content-list__add-btn {
      cursor: pointer;
      height: 40px;
      margin-top: 16px;
      margin-right: 16px;
      border-radius: 24px;
      padding: 8px 32px;
      text-decoration: none;
      font-weight: bolder;
      color: black; }
      .select-discount__box .content-list__filter-box .content-list__add-btn:hover {
        background: #eaeaea; }
      .select-discount__box .content-list__filter-box .content-list__add-btn .fa-plus {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 20px;
        height: 20px;
        margin-right: 4px;
        border-radius: 50%;
        padding: 4px;
        color: white;
        background: black; }
    .select-discount__box .content-list__filter-box .content-list__search-box {
      display: flex;
      flex: 1;
      margin-top: 16px;
      margin-right: 16px; }
      .select-discount__box .content-list__filter-box .content-list__search-box .content-list__search-input {
        width: 100%;
        min-width: 120px;
        height: 40px;
        border: 0;
        border-radius: 24px 0 0 24px;
        padding: 0 32px;
        background: #eaeaea; }
        .select-discount__box .content-list__filter-box .content-list__search-box .content-list__search-input:focus {
          outline-width: 0; }
      .select-discount__box .content-list__filter-box .content-list__search-box .content-list__search-btn {
        cursor: pointer; }
        .select-discount__box .content-list__filter-box .content-list__search-box .content-list__search-btn .fa-search {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 56px;
          height: 40px;
          border-radius: 0 24px 24px 0;
          background: #ffd44c; }
          .select-discount__box .content-list__filter-box .content-list__search-box .content-list__search-btn .fa-search:hover {
            background: #eaeaea; }
    .select-discount__box .content-list__filter-box .content-list__sort {
      cursor: pointer;
      height: 40px;
      margin-top: 16px;
      margin-right: 16px;
      border: 0;
      border-radius: 24px;
      padding: 8px 16px;
      font-size: 14px;
      background: #eaeaea; }
      .select-discount__box .content-list__filter-box .content-list__sort:focus {
        outline-width: 0; }
    .select-discount__box .content-list__filter-box select {
      cursor: pointer !important;
      height: 40px !important;
      margin-top: 16px !important;
      margin-right: 16px !important;
      border: 0 !important;
      border-radius: 24px !important;
      padding: 8px 16px !important;
      font-size: 14px !important;
      background: #eaeaea !important; }
      .select-discount__box .content-list__filter-box select:focus {
        outline-width: 0 !important; }

.discount-price__box {
  margin: 0 auto;
  padding: 24px;
  max-width: 640px;
  background: white; }
  .discount-price__box .alert {
    color: red;
    text-align: center;
    display: block; }
  .discount-price__box .create-discount__form-box {
    margin-top: 24px; }
    .discount-price__box .create-discount__form-box input[type="date"],
    .discount-price__box .create-discount__form-box input[type="text"],
    .discount-price__box .create-discount__form-box select {
      width: 100%;
      border: none;
      border-radius: 24px;
      padding: 8px;
      background: #fff3cd !important; }
      .discount-price__box .create-discount__form-box input[type="date"]:focus,
      .discount-price__box .create-discount__form-box input[type="text"]:focus,
      .discount-price__box .create-discount__form-box select:focus {
        outline: 0; }
      .discount-price__box .create-discount__form-box input[type="date"]:disabled,
      .discount-price__box .create-discount__form-box input[type="text"]:disabled,
      .discount-price__box .create-discount__form-box select:disabled {
        border: 0; }
    .discount-price__box .create-discount__form-box .create-discount__old-price-box {
      color: gray; }
      .discount-price__box .create-discount__form-box .create-discount__old-price-box select {
        background: #fafafa;
        padding: 0; }
    .discount-price__box .create-discount__form-box input[type="number"] {
      margin-right: 8px;
      width: 100% !important;
      border-radius: 24px !important;
      padding: 8px !important; }
    .discount-price__box .create-discount__form-box .create-discount__price-box {
      margin-bottom: 16px;
      padding: 16px;
      background: #fafafa; }
    .discount-price__box .create-discount__form-box .create-discount__form-control-box:not(:last-child) {
      margin-bottom: 16px; }
    .discount-price__box .create-discount__form-box .create-discount__field {
      margin-bottom: 4px;
      font-weight: bolder; }
    .discount-price__box .create-discount__form-box .create-discount__price-form-control {
      display: flex;
      align-items: center; }
    .discount-price__box .create-discount__form-box .create-discount__discount {
      margin-left: 16px; }
  .discount-price__box .create-discount__create-btn {
    display: inline-block;
    width: 100%;
    margin-top: 24px;
    border-radius: 24px;
    background: #ffd44c;
    font-weight: bolder; }
    .discount-price__box .create-discount__create-btn:hover {
      color: white; }
  .discount-price__box .create-discount__back-btn {
    display: inline-block;
    width: 100%;
    margin-top: 24px;
    border-radius: 24px;
    background: #ffd44c; }
    .discount-price__box .create-discount__back-btn:hover {
      color: white; }
  .discount-price__box .bootstrap-select {
    width: 100% !important; }
    .discount-price__box .bootstrap-select .bs-searchbox input {
      border-radius: 0;
      background: #fafafa; }
    .discount-price__box .bootstrap-select ul li {
      background: #fff3cd; }
    .discount-price__box .bootstrap-select .dropdown-toggle {
      width: 100%;
      border: none;
      border-radius: 24px;
      padding: 8px;
      background: #fff3cd; }
      .discount-price__box .bootstrap-select .dropdown-toggle:focus {
        outline: 0; }

.modalEdit .header1 {
  text-align: center;
  display: block;
  font-size: 24px;
  font-weight: bold; }

.modalEdit .header2 {
  text-align: center;
  display: block;
  font-size: 20px;
  font-weight: bold; }

.modalEdit .bg {
  background-color: #ffffe0;
  padding: 1rem;
  margin: 1rem; }

.modalEdit select {
  width: 100%;
  height: 40px;
  border: 0;
  background: #ffffff;
  border: 1px solid lightgray; }

.modalCancel .header1 {
  text-align: center;
  display: block;
  font-size: 24px;
  font-weight: bold; }

.modalCancel .header2 {
  text-align: center;
  display: block;
  font-size: 20px;
  font-weight: bold; }

.ui-datepicker {
  font-size: 14px; }

.createPromotion .padding {
  padding: 1rem; }

.createPromotion .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.createPromotion .page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder;
  padding-top: 1rem; }

.createPromotion .btnSubmit {
  background-color: #ffd44c !important;
  padding: 6px 35px;
  color: black;
  border-color: #ffd44c !important;
  border-radius: 24px; }

.createPromotion .btnCancel {
  color: black;
  background-color: #ffd44c !important;
  border-color: #ffd44c !important;
  border-radius: 24px;
  padding: 6px 35px; }

.createPromotion .btnSubmitPopup {
  background-color: #ffd44c;
  color: black;
  border-color: #ffd44c; }

.createPromotion .btnSecondaryPopup {
  color: black;
  background-color: #ffd44c !important;
  border-color: #ffd44c !important; }

.createPromotion .header {
  text-align: center;
  display: block;
  padding: 1rem;
  font-weight: bold;
  font-size: 18px; }

.createPromotion .btnDetail,
.createPromotion .btnAddOn,
.createPromotion .btnAddSelect {
  color: black !important;
  cursor: pointer !important;
  display: inline-block !important;
  text-align: center !important;
  border-radius: 24px !important;
  padding: 6px 19px !important;
  background: #ffd44c !important;
  border-color: #ffd44c !important; }

.createPromotion .uploading-page {
  position: fixed;
  z-index: 999999 !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.createPromotion input[type="text"] {
  border-radius: 24px; }

.createPromotion input[type="date"] {
  border-radius: 24px; }

.createPromotion input[type="textarea"] {
  border-radius: 24px; }

.createPromotion .btn:hover {
  color: #fff; }

.createPromotion .textInput {
  display: block;
  text-align: right; }
  @media (pointer: none), (pointer: coarse) {
    .createPromotion .textInput {
      text-align: left; } }

.dashboard {
  padding: 1rem; }
  .dashboard a {
    color: black !important;
    text-decoration: none; }
  .dashboard .labelHead {
    text-align: center;
    padding: 1rem;
    font-size: 24px; }
  .dashboard .card {
    min-height: 233px !important; }
  .dashboard .text-value {
    text-align: right !important;
    display: block !important; }
  .dashboard .boxCard {
    margin-top: 0.5rem;
    font-size: 20px; }
  .dashboard .boxDetail {
    font-size: 18px; }
  .dashboard .boxTop {
    text-align: center;
    padding-top: 1rem; }
  .dashboard .boxCenter {
    text-align: center; }

.textHeader {
  margin-bottom: 1rem;
  font-weight: bolder;
  font-size: 1.7rem;
  margin-top: 1rem;
  text-align: center;
  display: block; }

.simple-spinner {
  width: 30px;
  height: 30px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); }

.simple-spinner {
  float: right;
  display: block;
  width: 30px;
  height: 30px;
  border: 3px solid transparent;
  border-radius: 50%;
  border-right-color: rgba(255, 255, 255, 0.7);
  animation: spinner-anim 0.8s linear infinite; }

@keyframes spinner-anim {
  from {
    transform: rotate(0); }
  to {
    transform: rotate(360deg); } }

.cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.wrapper {
  background: white;
  padding: 10px;
  box-shadow: 5px 10px 18px lightsteelblue;
  border-radius: 1rem;
  border-width: 10px;
  position: relative; }

.header {
  font-size: 2rem !important; }

.dashboardBuffetBook input[type="textarea"] {
  border-radius: 24px !important;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.dashboardBuffetBook input[type="text"] {
  border-radius: 24px;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.dashboardBuffetBook .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.dashboardBuffetBook .textInput {
  display: block;
  text-align: right; }
  @media (pointer: none), (pointer: coarse) {
    .dashboardBuffetBook .textInput {
      text-align: left; } }

.dashboardBuffetBook .addBook {
  text-align: right;
  display: block;
  padding: 1rem; }

.dashboardBuffetBook .back {
  text-align: left;
  display: block;
  padding: 1rem; }

.dashboardBuffetBook .btnDetail {
  color: black;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 24px;
  padding: 6px 19px;
  background: #ffd44c;
  border-color: #ffd44c; }

.dashboardBuffetBook .MuiTableCell-head {
  background: #ffd44c !important;
  font-size: 16px !important;
  font-family: "Kanit", sans-serif !important;
  color: black !important; }

.dashboardBuffetBook input[type="textarea"] {
  border-radius: 24px !important;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.dashboardBuffetBook .nav-tabs .nav-link.active {
  background: #ffd44c !important; }

.dashboardBuffetBook .btnDetail,
.dashboardBuffetBook .btnAddOn,
.dashboardBuffetBook .btnAddSelect {
  color: black;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 24px;
  padding: 6px 19px;
  background: #ffd44c !important;
  border-color: #ffd44c !important; }

.dashboardBuffetBook .btn-info {
  background: #ffd44c !important;
  border-color: #ffd44c !important; }

.dashboardBuffetBook .center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem; }

.dashboardBuffetBook .buttonMove {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; }

.dashboardBuffetBook .bgTable {
  background: lightgray;
  padding: 1rem; }

.dashboardBuffetBook #gridNotBuffetBook {
  border: 1px solid lightgray;
  border-collapse: collapse;
  width: 100%; }

.dashboardBuffetBook #gridNotBuffetBook td {
  border-left: 1px solid lightgray;
  border-right: 1px solid lightgray;
  border-collapse: collapse;
  padding: 5px; }

.dashboardBuffetBook .selected {
  background-color: #f0e68c; }

.dashboardBuffetBook .blockCheckBox {
  background-color: #fafad2;
  padding: 1rem; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder;
  padding-top: 1rem; }

.btnSubmitPopup {
  background-color: #ffd44c !important;
  color: black !important;
  border-color: #ffd44c !important; }

.btnSecondaryPopup {
  color: black;
  background-color: #ffd44c !important;
  border-color: #ffd44c !important; }

.dashboardBuffetMagazine input[type="textarea"] {
  border-radius: 24px !important;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.dashboardBuffetMagazine input[type="text"] {
  border-radius: 24px;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.dashboardBuffetMagazine .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.dashboardBuffetMagazine .textInput {
  display: block;
  text-align: right; }
  @media (pointer: none), (pointer: coarse) {
    .dashboardBuffetMagazine .textInput {
      text-align: left; } }

.dashboardBuffetMagazine .addBook {
  text-align: right;
  display: block;
  padding: 1rem; }

.dashboardBuffetMagazine .back {
  text-align: left;
  display: block;
  padding: 1rem; }

.dashboardBuffetMagazine .btnDetail {
  color: black;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 24px;
  padding: 6px 19px;
  background: #ffd44c;
  border-color: #ffd44c; }

.dashboardBuffetMagazine .MuiTableCell-head {
  background: #ffd44c !important;
  font-size: 16px !important;
  font-family: "Kanit", sans-serif !important;
  color: black !important; }

.dashboardBuffetMagazine input[type="textarea"] {
  border-radius: 24px !important;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.dashboardBuffetMagazine .nav-tabs .nav-link.active {
  background: #ffd44c !important; }

.dashboardBuffetMagazine .btnDetail,
.dashboardBuffetMagazine .btnAddOn,
.dashboardBuffetMagazine .btnAddSelect {
  color: black;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 24px;
  padding: 6px 19px;
  background: #ffd44c !important;
  border-color: #ffd44c !important; }

.dashboardBuffetMagazine .btn-info {
  background: #ffd44c !important;
  border-color: #ffd44c !important; }

.dashboardBuffetMagazine .center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem; }

.dashboardBuffetMagazine .buttonMove {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; }

.dashboardBuffetMagazine .bgTable {
  background: lightgray;
  padding: 1rem; }

.dashboardBuffetMagazine #gridNotBuffetBook {
  border: 1px solid lightgray;
  border-collapse: collapse;
  width: 100%; }

.dashboardBuffetMagazine #gridNotBuffetBook td {
  border-left: 1px solid lightgray;
  border-right: 1px solid lightgray;
  border-collapse: collapse;
  padding: 5px; }

.dashboardBuffetMagazine .selected {
  background-color: #f0e68c; }

.dashboardBuffetMagazine .blockCheckBox {
  background-color: #fafad2;
  padding: 1rem; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder;
  padding-top: 1rem; }

.btnSubmitPopup {
  background-color: #ffd44c !important;
  color: black !important;
  border-color: #ffd44c !important; }

.btnSecondaryPopup {
  color: black;
  background-color: #ffd44c !important;
  border-color: #ffd44c !important; }

.dashboardPromotionCode input[type="textarea"] {
  border-radius: 24px !important;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.dashboardPromotionCode input[type="text"] {
  border-radius: 24px;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.dashboardPromotionCode .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.dashboardPromotionCode .btnApproved {
  color: black;
  background: #ffd44c;
  border-color: #ffd44c;
  border-radius: 24px;
  margin: 0.5rem !important; }

.dashboardPromotionCode .textInput {
  display: block;
  text-align: right; }
  @media (pointer: none), (pointer: coarse) {
    .dashboardPromotionCode .textInput {
      text-align: left; } }

.dashboardPromotionCode .addBook {
  text-align: right;
  display: block;
  padding: 1rem; }

.dashboardPromotionCode .back {
  text-align: left;
  display: block;
  padding: 1rem; }

.dashboardPromotionCode .btnDetail {
  color: black;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 24px;
  padding: 6px 19px;
  background: #ffd44c;
  border-color: #ffd44c; }

.dashboardPromotionCode .MuiTableCell-head {
  background: #ffd44c !important;
  font-size: 16px !important;
  font-family: "Kanit", sans-serif !important;
  color: black !important; }

.dashboardPromotionCode input[type="textarea"] {
  border-radius: 24px !important;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.dashboardPromotionCode .nav-tabs .nav-link.active {
  background: #ffd44c !important; }

.dashboardPromotionCode .btnDetail,
.dashboardPromotionCode .btnAddOn,
.dashboardPromotionCode .btnAddSelect {
  color: black;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 24px;
  padding: 6px 19px;
  background: #ffd44c !important;
  border-color: #ffd44c !important; }

.dashboardPromotionCode .btn-info {
  background: #ffd44c !important;
  border-color: #ffd44c !important; }

.dashboardPromotionCode .center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem; }

.dashboardPromotionCode .buttonMove {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; }

.dashboardPromotionCode .bgTable {
  background: lightgray;
  padding: 1rem; }

.dashboardPromotionCode #gridNotBuffetBook {
  border: 1px solid lightgray;
  border-collapse: collapse;
  width: 100%; }

.dashboardPromotionCode #gridNotBuffetBook td {
  border-left: 1px solid lightgray;
  border-right: 1px solid lightgray;
  border-collapse: collapse;
  padding: 5px; }

.dashboardPromotionCode .selected {
  background-color: #f0e68c; }

.dashboardPromotionCode .blockCheckBox {
  background-color: #fafad2;
  padding: 1rem; }

.dashboardPromotionCode .table-responsive {
  display: none; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder;
  padding-top: 1rem; }

.btnSubmitPopup {
  background-color: #ffd44c !important;
  color: black !important;
  border-color: #ffd44c !important; }

.btnSecondaryPopup {
  color: black;
  background-color: #ffd44c !important;
  border-color: #ffd44c !important; }

.dashboardSalePublisher .btnDetail {
  color: black;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 24px;
  padding: 6px 19px;
  background: #ffd44c;
  border-color: #ffd44c; }

.dashboardSalePublisher .MuiTableCell-head {
  background: #ffd44c !important;
  font-size: 16px !important;
  font-family: "Kanit", sans-serif !important;
  color: black !important; }

.dashboardSalePublisher input[type="textarea"] {
  border-radius: 24px !important;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.dashboardSalePublisher input[type="text"] {
  border-radius: 24px;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.dashboardSalePublisher .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.dashboardSalePublisher .textInput {
  display: block;
  text-align: right; }
  @media (pointer: none), (pointer: coarse) {
    .dashboardSalePublisher .textInput {
      text-align: left; } }

.dashboardSalePublisher .table-responsive {
  display: none; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder;
  padding-top: 1rem; }

.dashboardSaleBook input[type="textarea"] {
  border-radius: 24px !important;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.dashboardSaleBook input[type="text"] {
  border-radius: 24px;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.dashboardSaleBook .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.dashboardSaleBook .btnDetail {
  color: black;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 24px;
  padding: 6px 19px;
  background: #ffd44c;
  border-color: #ffd44c; }

.dashboardSaleBook .btnApproved {
  color: black;
  background: #ffd44c;
  border-color: #ffd44c;
  border-radius: 24px;
  margin: 0.5rem !important; }

.dashboardSaleBook .centerDashboard {
  width: 100% !important;
  text-align: center;
  display: block;
  margin: 0.5rem !important; }

.dashboardSaleBook .MuiTableCell-head {
  background: #ffd44c !important;
  font-size: 16px !important;
  font-family: "Kanit", sans-serif !important;
  color: black !important; }

.dashboardSaleBook input[type="textarea"] {
  border-radius: 24px !important;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.dashboardSaleBook .nav-tabs .nav-link.active {
  background: #ffd44c !important; }

.dashboardSaleBook .textInput {
  display: block;
  text-align: right; }
  @media (pointer: none), (pointer: coarse) {
    .dashboardSaleBook .textInput {
      text-align: left; } }

.dashboardSaleBook .table-responsive {
  display: none; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder;
  padding-top: 1rem; }

.btnSubmitPopup {
  background-color: #ffd44c !important;
  color: black !important;
  border-color: #ffd44c !important; }

.btnSecondaryPopup {
  color: black;
  background-color: #ffd44c !important;
  border-color: #ffd44c !important; }

.modalFrame {
  padding: 0 !important;
  background-color: white; }
  .modalFrame > .modalFrameHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: #ffd54c;
    margin-bottom: 1rem;
    font-weight: bolder; }
    .modalFrame > .modalFrameHeader > .textHeader {
      font-size: 1.2rem; }
    .modalFrame > .modalFrameHeader > .closeIcon {
      cursor: pointer; }
  .modalFrame > .modalFrameBody {
    padding: 1rem 1rem 2rem 1rem; }
  .modalFrame > .modalFrameFooter {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem;
    background-color: #f2f2f2; }
    .modalFrame > .modalFrameFooter > .link {
      font-size: 1rem;
      cursor: pointer;
      color: gray; }
      .modalFrame > .modalFrameFooter > .link:hover {
        text-decoration: underline; }
    .modalFrame > .modalFrameFooter .btn {
      border-radius: 0; }
    .modalFrame > .modalFrameFooter .btn-primary {
      border: none !important;
      background-color: #000;
      color: #fff; }
      .modalFrame > .modalFrameFooter .btn-primary:hover {
        color: #ffd54c; }
      .modalFrame > .modalFrameFooter .btn-primary:focus {
        border: 0;
        outline: 0; }

.btn-info,
.btn-success {
  background-color: #ffd44c;
  border-color: #ffd44c; }

.dashboardSaleMg input[type="textarea"] {
  border-radius: 24px !important;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.dashboardSaleMg input[type="text"] {
  border-radius: 24px;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.dashboardSaleMg .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.dashboardSaleMg .btnDetail {
  color: black;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 24px;
  padding: 6px 19px;
  background: #ffd44c;
  border-color: #ffd44c; }

.dashboardSaleMg .MuiTableCell-head {
  background: #ffd44c !important;
  font-size: 16px !important;
  font-family: "Kanit", sans-serif !important;
  color: black !important; }

.dashboardSaleMg .btnApproved {
  color: black;
  background: #ffd44c;
  border-color: #ffd44c;
  border-radius: 24px;
  margin: 0.5rem !important; }

.dashboardSaleMg .centerDashboard {
  width: 100% !important;
  text-align: center;
  display: block;
  margin: 0.5rem !important; }

.dashboardSaleMg .textInput {
  display: block;
  text-align: right; }
  @media (pointer: none), (pointer: coarse) {
    .dashboardSaleMg .textInput {
      text-align: left; } }

.dashboardSaleMg .table-responsive {
  display: none; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder;
  padding-top: 1rem; }

.detailBook input[type="textarea"] {
  border-radius: 24px !important;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.detailBook input[type="text"] {
  border-radius: 24px;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.detailBook .btnBack {
  background-color: #ffd44c !important;
  border-color: #ffd44c !important;
  color: black;
  min-width: 115px;
  border-radius: 24px; }

.detailBook .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder;
  padding-top: 1rem; }

.detailDashboardSale input[type="text"] {
  border-radius: 24px;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.detailDashboardSale input[type="textarea"] {
  border-radius: 24px;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.detailDashboardSale .btnBack {
  background-color: #ffd44c !important;
  border-color: #ffd44c !important;
  color: black;
  border-radius: 24px;
  margin: 0.5rem !important; }

.detailDashboardSale .btnCancel {
  background-color: #ffd44c !important;
  border-color: #ffd44c !important;
  color: black;
  min-width: 115px; }

.detailDashboardSale .btnSubmitPopup {
  background-color: #ffd44c !important;
  color: black !important;
  border-color: #ffd44c !important; }

.detailDashboardSale .btnSecondaryPopup {
  color: black;
  background-color: #ffd44c !important;
  border-color: #ffd44c !important; }

.detailDashboardSale .centerDashboard {
  width: 100% !important;
  text-align: center;
  display: block;
  margin: 0.5rem !important; }

.detailDashboardSale .btn-info {
  color: black;
  background-color: #ffd44c !important;
  border-color: #ffd44c !important; }

.detailDashboardSale .btn-info:hover {
  color: #fff;
  background-color: gray !important;
  border-color: gray !important; }

.detailDashboardSale .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.detailDashboardSale .textInput {
  display: block;
  text-align: right; }
  @media (pointer: none), (pointer: coarse) {
    .detailDashboardSale .textInput {
      text-align: left; } }

.detailDashboardSale .btn-success:hover {
  color: #fff;
  background-color: #ffd44c;
  border-color: #ffd44c; }

.detailDashboardSale .btn-success {
  color: black;
  background-color: #ffd44c !important;
  border-color: #ffd44c !important;
  border-radius: 24px; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder;
  padding-top: 1rem; }

.discount__create-btn {
  margin-bottom: 24px;
  border-radius: 24px;
  padding: 8px 32px;
  background: #ffd44c;
  max-width: 200px; }
  .discount__create-btn:hover {
    color: white; }
  .discount__create-btn i {
    margin-right: 8px; }

.discount__back-btn {
  margin-top: 24px;
  border-radius: 24px;
  padding: 8px 32px;
  background-color: #ffd44c !important;
  border-color: #ffd44c !important;
  margin-bottom: 1rem; }
  .discount__back-btn:hover {
    color: white;
    background: #5a6268; }
  .discount__back-btn i {
    margin-right: 8px; }

#discountPromotion__table {
  font-size: 14px; }
  #discountPromotion__table .discountPromotion__field {
    margin-right: 8px; }
  #discountPromotion__table .discount__cancel-btn {
    cursor: pointer;
    border-radius: 24px;
    font-size: 14px; }

#discount__cancel-modal .discount__cancel-reason {
  width: 100%; }

#discount__cancel-modal .btn-accept {
  background: #ffd44c; }
  #discount__cancel-modal .btn-accept:hover {
    color: white; }

#discount__cancel-modal .btn-decline:hover {
  background: #fafafa; }

#discountPromotion__table_filter input[type='search'] {
  border: 1px solid gray; }

.detailDiscountPromotion {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }
  .detailDiscountPromotion .page-title {
    text-align: center;
    display: block; }
  .detailDiscountPromotion .create-discount__box {
    background: #ffffe0;
    max-width: 700px;
    padding: 1rem;
    width: 50%;
    margin: 0 auto; }
    .detailDiscountPromotion .create-discount__box .create-discount__form-box {
      margin-top: 24px; }
      .detailDiscountPromotion .create-discount__box .create-discount__form-box input[type="date"],
      .detailDiscountPromotion .create-discount__box .create-discount__form-box input[type="text"],
      .detailDiscountPromotion .create-discount__box .create-discount__form-box select {
        width: 100%;
        border: none;
        border-radius: 24px;
        padding: 8px;
        background: #fff3cd; }
        .detailDiscountPromotion .create-discount__box .create-discount__form-box input[type="date"]:focus,
        .detailDiscountPromotion .create-discount__box .create-discount__form-box input[type="text"]:focus,
        .detailDiscountPromotion .create-discount__box .create-discount__form-box select:focus {
          outline: 0; }
        .detailDiscountPromotion .create-discount__box .create-discount__form-box input[type="date"]:disabled,
        .detailDiscountPromotion .create-discount__box .create-discount__form-box input[type="text"]:disabled,
        .detailDiscountPromotion .create-discount__box .create-discount__form-box select:disabled {
          border: 0; }
      .detailDiscountPromotion .create-discount__box .create-discount__form-box .create-discount__old-price-box {
        color: gray; }
        .detailDiscountPromotion .create-discount__box .create-discount__form-box .create-discount__old-price-box select {
          background: #fafafa;
          padding: 0; }
      .detailDiscountPromotion .create-discount__box .create-discount__form-box input[type="number"] {
        margin-right: 8px; }
      .detailDiscountPromotion .create-discount__box .create-discount__form-box .create-discount__price-box {
        margin-bottom: 16px;
        padding: 16px;
        background: #fafafa; }
      .detailDiscountPromotion .create-discount__box .create-discount__form-box .create-discount__form-control-box:not(:last-child) {
        margin-bottom: 16px; }
      .detailDiscountPromotion .create-discount__box .create-discount__form-box .create-discount__field {
        margin-bottom: 4px;
        font-weight: bolder; }
      .detailDiscountPromotion .create-discount__box .create-discount__form-box .create-discount__price-form-control {
        display: flex;
        align-items: center; }
      .detailDiscountPromotion .create-discount__box .create-discount__form-box .create-discount__discount {
        margin-left: 16px; }
    .detailDiscountPromotion .create-discount__box .create-discount__create-btn {
      display: inline-block;
      width: 100%;
      margin-top: 24px;
      border-radius: 24px;
      background: #ffd44c;
      font-weight: bolder; }
      .detailDiscountPromotion .create-discount__box .create-discount__create-btn:hover {
        color: white; }
    .detailDiscountPromotion .create-discount__box .create-discount__back-btn {
      display: inline-block;
      width: 100%;
      margin-top: 24px;
      border-radius: 24px;
      background: #ffd44c; }
      .detailDiscountPromotion .create-discount__box .create-discount__back-btn:hover {
        color: white;
        background: #5a6268; }
    .detailDiscountPromotion .create-discount__box .bootstrap-select {
      width: 100% !important; }
      .detailDiscountPromotion .create-discount__box .bootstrap-select .bs-searchbox input {
        border-radius: 0;
        background: #fafafa; }
      .detailDiscountPromotion .create-discount__box .bootstrap-select ul li {
        background: #fff3cd; }
      .detailDiscountPromotion .create-discount__box .bootstrap-select .dropdown-toggle {
        width: 100%;
        border: none;
        border-radius: 24px;
        padding: 8px;
        background: #fff3cd; }
        .detailDiscountPromotion .create-discount__box .bootstrap-select .dropdown-toggle:focus {
          outline: 0; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder;
  padding-top: 1rem; }

input[type="textarea"] {
  border-radius: 24px; }

.detailMessageBox .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }
  .detailMessageBox .cardInformation .body {
    padding: 1rem; }
    .detailMessageBox .cardInformation .body .subTitle {
      font-size: 20px;
      font-weight: bold; }
  .detailMessageBox .cardInformation .dateMessage {
    text-align: right;
    font-weight: bold; }
  .detailMessageBox .cardInformation .title {
    width: 100%;
    text-align: left;
    vertical-align: top;
    margin-bottom: 24px;
    font-size: 24px;
    border-bottom: 2px #aaaaaa solid;
    letter-spacing: -1px; }

.detailMessageBox .btnDetail {
  color: black;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 24px;
  padding: 6px 19px;
  background: #ffd44c;
  border-color: #ffd44c;
  margin-bottom: 1rem; }

.detailMessageBox img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: auto auto; }

.detailMessageBox .outer {
  max-width: 500px;
  max-height: 500px;
  display: block;
  margin-left: auto;
  margin-right: auto; }

.detailMessageBox .inner {
  display: table-cell;
  max-height: 500px;
  max-width: 500px;
  vertical-align: middle; }

.detailPromotion input[type="text"] {
  border-radius: 24px;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.detailPromotion .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.detailPromotion .page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder;
  padding-top: 1rem; }

.detailQueue input[type="text"] {
  border-radius: 24px;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.detailQueue .btnBack {
  background-color: #ffd44c !important;
  border-color: #ffd44c !important;
  color: black;
  border-radius: 24px; }

.detailQueue .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.detailQueue .page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder;
  padding-top: 1rem; }

.discount__create-btn {
  margin-bottom: 24px;
  border-radius: 24px;
  padding: 8px 32px;
  background: #ffd44c;
  max-width: 200px; }
  .discount__create-btn:hover {
    color: white; }
  .discount__create-btn i {
    margin-right: 8px; }

.discount__back-btn {
  margin-top: 24px;
  border-radius: 24px;
  padding: 8px 32px;
  background-color: #ffd44c !important;
  border-color: #ffd44c !important;
  margin-bottom: 1rem; }
  .discount__back-btn:hover {
    color: white;
    background: #5a6268; }
  .discount__back-btn i {
    margin-right: 8px; }

#discountPromotion__table {
  font-size: 14px; }
  #discountPromotion__table .discountPromotion__field {
    margin-right: 8px; }
  #discountPromotion__table .discount__cancel-btn {
    cursor: pointer;
    border-radius: 24px;
    font-size: 14px; }

#discount__cancel-modal .discount__cancel-reason {
  width: 100%; }

#discount__cancel-modal .btn-accept {
  background: #ffd44c; }
  #discount__cancel-modal .btn-accept:hover {
    color: white; }

#discount__cancel-modal .btn-decline:hover {
  background: #fafafa; }

#discountPromotion__table_filter input[type='search'] {
  border: 1px solid gray; }

.cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }
  .cardInformation .page-title {
    text-align: center;
    display: block; }
  .cardInformation .create-discount__box .create-discount__form-box {
    margin-top: 24px; }
    .cardInformation .create-discount__box .create-discount__form-box input[type="date"],
    .cardInformation .create-discount__box .create-discount__form-box input[type="text"],
    .cardInformation .create-discount__box .create-discount__form-box select {
      width: 100%;
      border: none;
      border-radius: 24px;
      padding: 8px;
      background: #fff3cd; }
      .cardInformation .create-discount__box .create-discount__form-box input[type="date"]:focus,
      .cardInformation .create-discount__box .create-discount__form-box input[type="text"]:focus,
      .cardInformation .create-discount__box .create-discount__form-box select:focus {
        outline: 0; }
      .cardInformation .create-discount__box .create-discount__form-box input[type="date"]:disabled,
      .cardInformation .create-discount__box .create-discount__form-box input[type="text"]:disabled,
      .cardInformation .create-discount__box .create-discount__form-box select:disabled {
        border: 0; }
    .cardInformation .create-discount__box .create-discount__form-box .create-discount__old-price-box {
      color: gray; }
      .cardInformation .create-discount__box .create-discount__form-box .create-discount__old-price-box select {
        background: #fafafa;
        padding: 0; }
    .cardInformation .create-discount__box .create-discount__form-box input[type="number"] {
      margin-right: 8px; }
    .cardInformation .create-discount__box .create-discount__form-box .create-discount__price-box {
      margin-bottom: 16px;
      padding: 16px;
      background: #fafafa; }
    .cardInformation .create-discount__box .create-discount__form-box .create-discount__form-control-box:not(:last-child) {
      margin-bottom: 16px; }
    .cardInformation .create-discount__box .create-discount__form-box .create-discount__field {
      margin-bottom: 4px;
      font-weight: bolder; }
    .cardInformation .create-discount__box .create-discount__form-box .create-discount__price-form-control {
      display: flex;
      align-items: center; }
    .cardInformation .create-discount__box .create-discount__form-box .create-discount__discount {
      margin-left: 16px; }
  .cardInformation .create-discount__box .create-discount__create-btn {
    display: inline-block;
    width: 100%;
    margin-top: 24px;
    border-radius: 24px;
    background: #ffd44c;
    font-weight: bolder; }
    .cardInformation .create-discount__box .create-discount__create-btn:hover {
      color: white; }
  .cardInformation .create-discount__box .create-discount__back-btn {
    display: inline-block;
    width: 100%;
    margin-top: 24px;
    border-radius: 24px;
    background: #ffd44c; }
    .cardInformation .create-discount__box .create-discount__back-btn:hover {
      color: white;
      background: #5a6268; }
  .cardInformation .create-discount__box .bootstrap-select {
    width: 100% !important; }
    .cardInformation .create-discount__box .bootstrap-select .bs-searchbox input {
      border-radius: 0;
      background: #fafafa; }
    .cardInformation .create-discount__box .bootstrap-select ul li {
      background: #fff3cd; }
    .cardInformation .create-discount__box .bootstrap-select .dropdown-toggle {
      width: 100%;
      border: none;
      border-radius: 24px;
      padding: 8px;
      background: #fff3cd; }
      .cardInformation .create-discount__box .bootstrap-select .dropdown-toggle:focus {
        outline: 0; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder;
  padding-top: 1rem; }

.editProfile .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.editProfile .container {
  padding: 2px 16px !important; }

.editProfile .btnSubmit {
  background-color: #ffd44c;
  padding: 6px 35px;
  color: black;
  border-color: #ffd44c;
  border-radius: 24px; }

.editProfile .textInput {
  display: inline-block;
  text-align: right; }
  @media (pointer: none), (pointer: coarse) {
    .editProfile .textInput {
      text-align: left; } }

.editProfile .buttonCenter {
  text-align: center; }

.editProfile .btn-success:hover {
  color: #fff;
  background-color: #ffd44c;
  border-color: #ffd44c; }

.editProfile .btn-success {
  color: black;
  background-color: #ffd44c !important;
  border-color: #ffd44c !important;
  border-radius: 24px; }

.editProfile .modal-header {
  background-color: #ffd44c !important; }

.editProfile .btnSecondary {
  color: black;
  background-color: #ffd44c !important;
  border-color: #ffd44c !important;
  border-radius: 24px;
  padding: 6px 35px; }

.editProfile .btnSecondary:hover {
  color: black;
  background-color: gray;
  border-color: gray; }

.editProfile .btnSubmitPopup {
  background-color: #ffd44c !important;
  color: black;
  border-color: #ffd44c !important; }

.editProfile .btnSecondaryPopup {
  color: black;
  background-color: #ffd44c !important;
  border-color: #ffd44c !important; }

.editProfile .img-responsive {
  max-width: 100%;
  height: auto; }

.editProfile .modal.show {
  display: block !important; }

.editProfile input[type="text"] {
  border-radius: 24px; }

.editProfile input[type="email"] {
  border-radius: 24px; }

.editProfile input[type="password"] {
  border-radius: 24px; }

.editProfile .uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.editProfile .header {
  text-align: center;
  display: block;
  font-size: 1.5rem !important; }

.editProfile .page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }

.editProfile .textHeader2 {
  font-weight: bold;
  font-size: 20px; }

.editProfile input::-webkit-outer-spin-button,
.editProfile input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0;
  /* <-- Apparently some margin are still there even though it's hidden */ }

.editProfile input[type="number"] {
  -moz-appearance: textfield;
  /* Firefox */ }

.editProfile input[type="number"] {
  border-radius: 24px; }

.btnSubmitPopup {
  background-color: #ffd44c !important;
  color: black;
  border-color: #ffd44c !important;
  border-radius: 24px; }

.btnSecondaryPopup {
  color: black;
  background-color: #ffd44c !important;
  border-color: #ffd44c !important;
  border-radius: 24px; }

.box {
  border-radius: 16px;
  padding: 48px 20px; }
  .box .textHeader {
    margin-bottom: 1rem;
    font-weight: bolder;
    font-size: 1.2rem; }
  .box .textHeader2 {
    margin-bottom: 1rem;
    font-weight: bolder;
    font-size: 1.1rem; }
  .box .cardInformation {
    border-radius: 16px;
    padding: 48px 32px;
    background: white;
    border-color: #ffd44c;
    border-style: solid;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s; }

.editPromotion .padding {
  padding: 1rem; }

.editPromotion .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.editPromotion .page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder;
  padding-top: 1rem; }

.editPromotion .btnSubmit {
  background-color: #ffd44c;
  padding: 6px 35px;
  color: black;
  border-color: #ffd44c;
  border-radius: 24px; }

.editPromotion .btnCancel {
  color: black;
  background-color: #ffd44c !important;
  border-color: #ffd44c !important;
  border-radius: 24px;
  padding: 6px 35px; }

.editPromotion .btnSubmitPopup {
  background-color: #ffd44c;
  color: black;
  border-color: #ffd44c; }

.editPromotion .btnSecondaryPopup {
  color: black;
  background-color: #ffd44c !important;
  border-color: #ffd44c !important; }

.editPromotion .manageBox {
  padding-top: 1rem;
  padding-bottom: 1rem; }

.editPromotion .btnDetail {
  color: black;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 24px;
  padding: 6px 19px;
  background: #ffd44c;
  border-color: #ffd44c; }

.editPromotion .MuiTableCell-head {
  background: #ffd44c !important;
  font-size: 16px !important;
  font-family: "Kanit", sans-serif !important;
  color: black !important; }

.editPromotion .colorHeader {
  background: #f0e68c !important; }

.editPromotion .btnBack {
  background-color: #ffd44c !important;
  border-color: #ffd44c !important;
  color: black;
  min-width: 115px;
  border-radius: 24px; }

.editPromotion .uploading-page {
  position: fixed;
  z-index: 999999 !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.editPromotion input[type="text"] {
  border-radius: 24px; }

.editPromotion input[type="date"] {
  border-radius: 24px; }

.editPromotion input[type="textarea"] {
  border-radius: 24px; }

.editPromotion .btn:hover {
  color: #fff; }

.editPromotion .textInput {
  display: block;
  text-align: right; }
  @media (pointer: none), (pointer: coarse) {
    .editPromotion .textInput {
      text-align: left; } }

.editPromotion textarea {
  width: 300px;
  height: 150px; }

.generateCover .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }
  .generateCover .cardInformation .canvas1 {
    width: 400px;
    margin-left: auto;
    margin-right: auto; }
  .generateCover .cardInformation .img {
    width: 100px; }
  .generateCover .cardInformation .img-rounded {
    border-radius: 6px; }
  .generateCover .cardInformation .img-responsive {
    display: block;
    width: 100% \9;
    max-width: 100%;
    height: auto; }
  .generateCover .cardInformation .btnDetail {
    color: black;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    border-radius: 24px;
    padding: 6px 19px;
    background: #ffd44c;
    border-color: #ffd44c; }

.navClass {
  background-color: "#ffd44c"; }

.dashboard__menu-box {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 16px;
  margin-bottom: 24px;
  background: white;
  width: 100%;
  padding-top: 16%;
  padding-bottom: 16%; }
  .dashboard__menu-box:hover {
    font-weight: bolder; }
  .dashboard__menu-box .dashboard__menu-pic {
    width: 64%;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #ffd44c; }
  .dashboard__menu-box .dashboard__menu-text {
    display: flex;
    justify-content: center;
    text-decoration: none;
    font-size: 16px;
    color: black; }

@media (max-width: 575px) {
  .dashboard-col {
    width: 50% !important; } }

.dashboard-col a {
  text-decoration: none; }

@media (pointer: none), (pointer: coarse) {
  .main-content {
    background-image: none !important; } }

#modalSuccess .header {
  text-align: center;
  display: block;
  font-size: 18px !important; }

#modalSuccess .newImage {
  max-width: 260px !important; }

#modalMessage .title {
  font-size: 23px;
  text-align: center;
  font-weight: bold; }

#modalMessage .subTitle {
  padding: 1rem;
  text-align: center;
  font-size: 20px; }

#modalMessage .bodyMessage {
  padding: 1rem; }

#modalMessage .dateMessage {
  text-align: right;
  font-weight: bold; }

#modalMessage img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: auto auto; }

#modalMessage .outer {
  max-width: 500px;
  max-height: 500px;
  display: block;
  margin-left: auto;
  margin-right: auto; }

#modalMessage .inner {
  display: table-cell;
  max-height: 500px;
  max-width: 500px;
  vertical-align: middle; }

.custom-control {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
  color-adjust: exact; }

.custom-control-inline {
  display: inline-flex;
  margin-right: 1rem; }

.custom-control-input {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 1rem;
  height: 1.25rem;
  opacity: 0; }
  .custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #007bff;
    background-color: #007bff; }
  .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
  .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #80bdff; }
  .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    color: #fff;
    background-color: #b3d7ff;
    border-color: #b3d7ff; }
  .custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label {
    color: #6c757d; }
    .custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before {
      background-color: #e9ecef; }

.custom-control-label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top; }
  .custom-control-label::before {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: #adb5bd solid 1px; }
  .custom-control-label::after {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: 50% / 50% 50% no-repeat; }

.custom-checkbox .custom-control-label::before {
  border-radius: 0.25rem; }

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e"); }

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: #007bff;
  background-color: #007bff; }

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e"); }

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5); }

.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5); }

.custom-radio .custom-control-label::before {
  border-radius: 50%; }

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }

.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5); }

.custom-switch {
  padding-left: 2.25rem; }
  .custom-switch .custom-control-label::before {
    left: -2.25rem;
    width: 1.75rem;
    pointer-events: all;
    border-radius: 0.5rem; }
  .custom-switch .custom-control-label::after {
    top: calc(0.25rem + 2px);
    left: calc(-2.25rem + 2px);
    width: calc(1rem - 4px);
    height: calc(1rem - 4px);
    background-color: #adb5bd;
    border-radius: 0.5rem;
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
    @media (prefers-reduced-motion: reduce) {
      .custom-switch .custom-control-label::after {
        transition: none; } }
  .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #fff;
    transform: translateX(0.75rem); }
  .custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(0, 123, 255, 0.5); }

.custom-select {
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  vertical-align: middle;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  appearance: none; }
  .custom-select:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
    .custom-select:focus::-ms-value {
      color: #495057;
      background-color: #fff; }
  .custom-select[multiple], .custom-select[size]:not([size="1"]) {
    height: auto;
    padding-right: 0.75rem;
    background-image: none; }
  .custom-select:disabled {
    color: #6c757d;
    background-color: #e9ecef; }
  .custom-select::-ms-expand {
    display: none; }
  .custom-select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #495057; }

.custom-select-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem; }

.custom-select-lg {
  height: calc(1.5em + 1rem + 2px);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 1.25rem; }

.custom-file {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin-bottom: 0; }

.custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin: 0;
  overflow: hidden;
  opacity: 0; }
  .custom-file-input:focus ~ .custom-file-label {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
  .custom-file-input[disabled] ~ .custom-file-label,
  .custom-file-input:disabled ~ .custom-file-label {
    background-color: #e9ecef; }
  .custom-file-input:lang(en) ~ .custom-file-label::after {
    content: "Browse"; }
  .custom-file-input ~ .custom-file-label[data-browse]::after {
    content: attr(data-browse); }

.custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  overflow: hidden;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem; }
  .custom-file-label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    height: calc(1.5em + 0.75rem);
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    color: #495057;
    content: "Browse";
    background-color: #e9ecef;
    border-left: inherit;
    border-radius: 0 0.25rem 0.25rem 0; }

.custom-range {
  width: 100%;
  height: 1.4rem;
  padding: 0;
  background-color: transparent;
  appearance: none; }
  .custom-range:focus {
    outline: 0; }
    .custom-range:focus::-webkit-slider-thumb {
      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
    .custom-range:focus::-moz-range-thumb {
      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
    .custom-range:focus::-ms-thumb {
      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
  .custom-range::-moz-focus-outer {
    border: 0; }
  .custom-range::-webkit-slider-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: -0.25rem;
    background-color: #007bff;
    border: 0;
    border-radius: 1rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none; }
    @media (prefers-reduced-motion: reduce) {
      .custom-range::-webkit-slider-thumb {
        transition: none; } }
    .custom-range::-webkit-slider-thumb:active {
      background-color: #b3d7ff; }
  .custom-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: #dee2e6;
    border-color: transparent;
    border-radius: 1rem; }
  .custom-range::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    background-color: #007bff;
    border: 0;
    border-radius: 1rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none; }
    @media (prefers-reduced-motion: reduce) {
      .custom-range::-moz-range-thumb {
        transition: none; } }
    .custom-range::-moz-range-thumb:active {
      background-color: #b3d7ff; }
  .custom-range::-moz-range-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: #dee2e6;
    border-color: transparent;
    border-radius: 1rem; }
  .custom-range::-ms-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: 0;
    margin-right: 0.2rem;
    margin-left: 0.2rem;
    background-color: #007bff;
    border: 0;
    border-radius: 1rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none; }
    @media (prefers-reduced-motion: reduce) {
      .custom-range::-ms-thumb {
        transition: none; } }
    .custom-range::-ms-thumb:active {
      background-color: #b3d7ff; }
  .custom-range::-ms-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: transparent;
    border-color: transparent;
    border-width: 0.5rem; }
  .custom-range::-ms-fill-lower {
    background-color: #dee2e6;
    border-radius: 1rem; }
  .custom-range::-ms-fill-upper {
    margin-right: 15px;
    background-color: #dee2e6;
    border-radius: 1rem; }
  .custom-range:disabled::-webkit-slider-thumb {
    background-color: #adb5bd; }
  .custom-range:disabled::-webkit-slider-runnable-track {
    cursor: default; }
  .custom-range:disabled::-moz-range-thumb {
    background-color: #adb5bd; }
  .custom-range:disabled::-moz-range-track {
    cursor: default; }
  .custom-range:disabled::-ms-thumb {
    background-color: #adb5bd; }

.custom-control-label::before,
.custom-file-label,
.custom-select {
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
  @media (prefers-reduced-motion: reduce) {
    .custom-control-label::before,
    .custom-file-label,
    .custom-select {
      transition: none; } }

.popupOverlay {
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 550px;
  display: none; }
  .popupOverlay.open {
    display: block; }
  .popupOverlay > .popupCloseIcon {
    position: absolute;
    top: 0;
    right: 0;
    background-color: white;
    padding: 0.25rem 0.4rem;
    border-radius: 50%;
    border: 1px solid;
    cursor: pointer; }
  .popupOverlay > .popupLink {
    cursor: pointer;
    width: 100%;
    display: block; }
    .popupOverlay > .popupLink > .popupImage {
      width: 100%;
      padding: 0.5rem; }
      @media (max-width: 767px) {
        .popupOverlay > .popupLink > .popupImage {
          padding: 0.5rem; } }

.popUpBookFair {
  z-index: 9999;
  max-width: 60%;
  position: fixed;
  bottom: 0;
  right: 0;
  margin-right: 0rem;
  max-width: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* ----------- iPad Pro ----------- */ }
  @media (max-width: 767px) {
    .popUpBookFair {
      z-index: 9999;
      width: 80%;
      position: fixed;
      bottom: 0;
      right: 0;
      margin-right: 0rem;
      max-width: 100%;
      position: fixed;
      top: 42%;
      left: 50%;
      transform: translate(-50%, -50%); } }
  @media screen and (orientation: landscape) and (max-device-width: 767px) {
    .popUpBookFair {
      width: 350px; } }
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .popUpBookFair {
      z-index: 9999;
      width: 60%;
      position: fixed;
      bottom: 0;
      right: 0;
      margin-right: 0rem;
      max-width: 100%;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); } }
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .popUpBookFair {
      z-index: 9999;
      width: 60%;
      position: fixed;
      bottom: 0;
      right: 0;
      margin-right: 0rem;
      max-width: 100%;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); } }
  @media only screen and (min-width: 1024px) and (max-height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) {
    .popUpBookFair {
      z-index: 9999;
      width: 60%;
      position: fixed;
      bottom: 0;
      right: 0;
      margin-right: 0rem;
      max-width: 100%;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); } }

.messageBox .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }
  @media (pointer: none), (pointer: coarse) {
    .messageBox .cardInformation {
      padding: 0px !important; } }
  .messageBox .cardInformation .container {
    padding: 1rem; }
    .messageBox .cardInformation .container .subTitle {
      font-size: 20px;
      font-weight: bold; }
  .messageBox .cardInformation .isRead {
    font-weight: bold; }

.messageBox .textLong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.messageBox .header {
  text-align: left;
  display: block;
  font-size: 20px !important; }

.messageBox .mouse {
  cursor: pointer; }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

.index__box {
  height: 100%;
  background: white; }
  .index__box .container2 {
    background: lightgray; }
    .index__box .container2 .bg {
      background-color: yellow; }

* {
  box-sizing: border-box;
  line-height: 1.5;
  font-family: 'Kanit', sans-serif; }

img {
  max-width: 100%; }

.container2 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: lightgray;
  padding: 0rem !important; }

.container2 .card {
  position: relative;
  background: #ffd44c;
  width: 400px;
  height: 100%;
  border-radius: 6px;
  padding: 2rem;
  color: #aaa;
  box-shadow: 0 0.25rem 0.25rem #ffd44c, 0 0 1rem rgba(0, 0, 0, 0.2);
  overflow: hidden;
  max-height: 700px;
  min-height: 600px; }
  .container2 .card__image-container {
    margin: -2rem -2rem 1rem -2rem; }
  .container2 .card__line {
    opacity: 0;
    animation: LineFadeIn .8s .8s forwards ease-in; }
  .container2 .card__image {
    opacity: 0;
    animation: ImageFadeIn .8s 1.4s forwards; }
  .container2 .card__title {
    color: grey;
    margin-top: 0rem;
    font-weight: 800;
    letter-spacing: 0.01em; }
    @media (pointer: none), (pointer: coarse) {
      .container2 .card__title {
        margin-top: -2rem; } }
  .container2 .card__content {
    margin-top: 3rem;
    opacity: 0;
    animation: ContentFadeIn .8s 1.6s forwards; }
  .container2 .card__svg {
    position: absolute;
    left: 0;
    top: 150px; }

@keyframes LineFadeIn {
  0% {
    opacity: 0;
    d: path("M 0 300 Q 0 300 0 300 Q 0 300 0 300 C 0 300 0 300 0 300 Q 0 300 0 300 ");
    stroke: #fff; }
  50% {
    opacity: 1;
    d: path("M 0 300 Q 50 300 100 300 Q 250 300 350 300 C 350 300 500 300 650 300 Q 750 300 800 300");
    stroke: #ffd44c; }
  100% {
    opacity: 1;
    d: path("M -2 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 802 400");
    stroke: #ffd44c; } }

@keyframes ContentFadeIn {
  0% {
    transform: translateY(-1rem);
    opacity: 0; }
  100% {
    transform: translateY(0);
    opacity: 1; } }

@keyframes ImageFadeIn {
  0% {
    transform: translate(-0.5rem, -0.5rem) scale(1.05);
    opacity: 0;
    filter: blur(2px); }
  50% {
    opacity: 1;
    filter: blur(2px); }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: blur(0); } }

.btnHome {
  color: black;
  background-color: white !important;
  border-color: #ffd44c !important;
  padding: 0.5rem 2.5rem;
  font-size: 20px;
  border-radius: 26px; }

.newImage {
  height: auto;
  border-radius: 60px;
  max-width: 270px !important;
  width: 100%;
  min-width: 200px; }
  @media (pointer: none), (pointer: coarse) {
    .newImage {
      text-align: left; } }

.btnHome:hover {
  color: black !important; }

.manageBtn {
  text-align: center;
  padding: 1rem; }

.img-responsive {
  max-width: 100%;
  height: auto; }

p {
  text-indent: 1.5em !important;
  margin-top: 0;
  word-wrap: break-word;
  line-height: 20pt;
  word-break: break-word;
  padding-top: 1.5rem; }

@media (pointer: none), (pointer: coarse) {
  .showPc {
    display: none; } }

@media only screen and (min-width: 1024px) and (max-height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) {
  .showPc {
    display: block; } }

#pinto-popup-content {
  padding: 0.75rem; }

.custom-control {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
  color-adjust: exact; }

.custom-control-inline {
  display: inline-flex;
  margin-right: 1rem; }

.custom-control-input {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 1rem;
  height: 1.25rem;
  opacity: 0; }
  .custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #007bff;
    background-color: #007bff; }
  .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
  .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #80bdff; }
  .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    color: #fff;
    background-color: #b3d7ff;
    border-color: #b3d7ff; }
  .custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label {
    color: #6c757d; }
    .custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before {
      background-color: #e9ecef; }

.custom-control-label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top; }
  .custom-control-label::before {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: #adb5bd solid 1px; }
  .custom-control-label::after {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: 50% / 50% 50% no-repeat; }

.custom-checkbox .custom-control-label::before {
  border-radius: 0.25rem; }

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e"); }

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: #007bff;
  background-color: #007bff; }

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e"); }

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5); }

.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5); }

.custom-radio .custom-control-label::before {
  border-radius: 50%; }

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }

.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5); }

.custom-switch {
  padding-left: 2.25rem; }
  .custom-switch .custom-control-label::before {
    left: -2.25rem;
    width: 1.75rem;
    pointer-events: all;
    border-radius: 0.5rem; }
  .custom-switch .custom-control-label::after {
    top: calc(0.25rem + 2px);
    left: calc(-2.25rem + 2px);
    width: calc(1rem - 4px);
    height: calc(1rem - 4px);
    background-color: #adb5bd;
    border-radius: 0.5rem;
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
    @media (prefers-reduced-motion: reduce) {
      .custom-switch .custom-control-label::after {
        transition: none; } }
  .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #fff;
    transform: translateX(0.75rem); }
  .custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(0, 123, 255, 0.5); }

.custom-select {
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  vertical-align: middle;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  appearance: none; }
  .custom-select:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
    .custom-select:focus::-ms-value {
      color: #495057;
      background-color: #fff; }
  .custom-select[multiple], .custom-select[size]:not([size="1"]) {
    height: auto;
    padding-right: 0.75rem;
    background-image: none; }
  .custom-select:disabled {
    color: #6c757d;
    background-color: #e9ecef; }
  .custom-select::-ms-expand {
    display: none; }
  .custom-select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #495057; }

.custom-select-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem; }

.custom-select-lg {
  height: calc(1.5em + 1rem + 2px);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 1.25rem; }

.custom-file {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin-bottom: 0; }

.custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin: 0;
  overflow: hidden;
  opacity: 0; }
  .custom-file-input:focus ~ .custom-file-label {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
  .custom-file-input[disabled] ~ .custom-file-label,
  .custom-file-input:disabled ~ .custom-file-label {
    background-color: #e9ecef; }
  .custom-file-input:lang(en) ~ .custom-file-label::after {
    content: "Browse"; }
  .custom-file-input ~ .custom-file-label[data-browse]::after {
    content: attr(data-browse); }

.custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  overflow: hidden;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem; }
  .custom-file-label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    height: calc(1.5em + 0.75rem);
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    color: #495057;
    content: "Browse";
    background-color: #e9ecef;
    border-left: inherit;
    border-radius: 0 0.25rem 0.25rem 0; }

.custom-range {
  width: 100%;
  height: 1.4rem;
  padding: 0;
  background-color: transparent;
  appearance: none; }
  .custom-range:focus {
    outline: 0; }
    .custom-range:focus::-webkit-slider-thumb {
      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
    .custom-range:focus::-moz-range-thumb {
      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
    .custom-range:focus::-ms-thumb {
      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
  .custom-range::-moz-focus-outer {
    border: 0; }
  .custom-range::-webkit-slider-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: -0.25rem;
    background-color: #007bff;
    border: 0;
    border-radius: 1rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none; }
    @media (prefers-reduced-motion: reduce) {
      .custom-range::-webkit-slider-thumb {
        transition: none; } }
    .custom-range::-webkit-slider-thumb:active {
      background-color: #b3d7ff; }
  .custom-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: #dee2e6;
    border-color: transparent;
    border-radius: 1rem; }
  .custom-range::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    background-color: #007bff;
    border: 0;
    border-radius: 1rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none; }
    @media (prefers-reduced-motion: reduce) {
      .custom-range::-moz-range-thumb {
        transition: none; } }
    .custom-range::-moz-range-thumb:active {
      background-color: #b3d7ff; }
  .custom-range::-moz-range-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: #dee2e6;
    border-color: transparent;
    border-radius: 1rem; }
  .custom-range::-ms-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: 0;
    margin-right: 0.2rem;
    margin-left: 0.2rem;
    background-color: #007bff;
    border: 0;
    border-radius: 1rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none; }
    @media (prefers-reduced-motion: reduce) {
      .custom-range::-ms-thumb {
        transition: none; } }
    .custom-range::-ms-thumb:active {
      background-color: #b3d7ff; }
  .custom-range::-ms-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: transparent;
    border-color: transparent;
    border-width: 0.5rem; }
  .custom-range::-ms-fill-lower {
    background-color: #dee2e6;
    border-radius: 1rem; }
  .custom-range::-ms-fill-upper {
    margin-right: 15px;
    background-color: #dee2e6;
    border-radius: 1rem; }
  .custom-range:disabled::-webkit-slider-thumb {
    background-color: #adb5bd; }
  .custom-range:disabled::-webkit-slider-runnable-track {
    cursor: default; }
  .custom-range:disabled::-moz-range-thumb {
    background-color: #adb5bd; }
  .custom-range:disabled::-moz-range-track {
    cursor: default; }
  .custom-range:disabled::-ms-thumb {
    background-color: #adb5bd; }

.custom-control-label::before,
.custom-file-label,
.custom-select {
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
  @media (prefers-reduced-motion: reduce) {
    .custom-control-label::before,
    .custom-file-label,
    .custom-select {
      transition: none; } }

html,
body {
  font-family: "Kanit", sans-serif !important; }

.Valentine {
  background-color: transparent;
  background-image: url("https://img.ookbee.com/Shop/ookbee/Background/background%20Valentine.png");
  background-position: center center; }

.promotionValentine {
  font-family: "Kanit";
  background-color: white; }
  .promotionValentine > .promotionBanner {
    padding-top: 1rem;
    margin-bottom: 1rem; }
    .promotionValentine > .promotionBanner > .promotionBannerImage {
      width: 100%; }
  .promotionValentine > .promotionHeader {
    margin-bottom: 0.5rem; }
    @media (min-width: 768px) {
      .promotionValentine > .promotionHeader {
        margin-bottom: 1rem; } }
    .promotionValentine > .promotionHeader > .promotionTitle {
      text-align: left;
      font-weight: bold;
      font-size: 1.5rem; }
      @media (min-width: 576px) {
        .promotionValentine > .promotionHeader > .promotionTitle {
          font-size: 1.7rem; } }
      @media (min-width: 768px) {
        .promotionValentine > .promotionHeader > .promotionTitle {
          font-size: 1.8rem; } }
      @media (min-width: 992px) {
        .promotionValentine > .promotionHeader > .promotionTitle {
          font-size: 2.2rem; } }
      .promotionValentine > .promotionHeader > .promotionTitle > .highlight {
        color: darkorange; }
    .promotionValentine > .promotionHeader .promotionSubTitle {
      text-align: left;
      font-size: 0.9rem;
      color: gray; }
      @media (min-width: 576px) {
        .promotionValentine > .promotionHeader .promotionSubTitle {
          font-size: 1rem; } }
      @media (min-width: 768px) {
        .promotionValentine > .promotionHeader .promotionSubTitle {
          font-size: 1.2rem; } }
      @media (min-width: 992px) {
        .promotionValentine > .promotionHeader .promotionSubTitle {
          font-size: 1.4rem; } }
  .promotionValentine > .promotionDetail > .promotionDescription {
    margin-bottom: 0.5rem; }
    .promotionValentine > .promotionDetail > .promotionDescription > .text {
      font-size: 1rem; }
      @media (min-width: 576px) {
        .promotionValentine > .promotionDetail > .promotionDescription > .text {
          font-size: 1.1rem; } }
      @media (min-width: 768px) {
        .promotionValentine > .promotionDetail > .promotionDescription > .text {
          font-size: 1.2rem; } }
      @media (min-width: 992px) {
        .promotionValentine > .promotionDetail > .promotionDescription > .text {
          font-size: 1.3rem; } }
  .promotionValentine > .promotionDetail > .promotionDescriptionRemark {
    margin-bottom: 1rem; }
    .promotionValentine > .promotionDetail > .promotionDescriptionRemark > .text {
      color: #9A9A9A;
      font-size: 0.9rem; }
      @media (min-width: 576px) {
        .promotionValentine > .promotionDetail > .promotionDescriptionRemark > .text {
          font-size: 1rem; } }
      @media (min-width: 768px) {
        .promotionValentine > .promotionDetail > .promotionDescriptionRemark > .text {
          font-size: 1.1rem; } }
      @media (min-width: 992px) {
        .promotionValentine > .promotionDetail > .promotionDescriptionRemark > .text {
          font-size: 1.2rem; } }
  .promotionValentine > .promotionDetail > .promotionPolicy {
    margin-bottom: 1rem; }
    .promotionValentine > .promotionDetail > .promotionPolicy:last-of-type {
      margin-bottom: 0; }
    @media (min-width: 576px) {
      .promotionValentine > .promotionDetail > .promotionPolicy > .app {
        padding: ""; } }
    @media (min-width: 768px) {
      .promotionValentine > .promotionDetail > .promotionPolicy > .app {
        padding: 0rem; } }
    @media (min-width: 992px) {
      .promotionValentine > .promotionDetail > .promotionPolicy > .app {
        padding: 0rem; } }
    .promotionValentine > .promotionDetail > .promotionPolicy > .app > .application {
      color: #ffd413;
      font-weight: bold;
      margin: 0rem; }
    .promotionValentine > .promotionDetail > .promotionPolicy > .app > .download {
      color: black;
      margin: 0rem;
      font-weight: bold; }
    .promotionValentine > .promotionDetail > .promotionPolicy > .newCustomer {
      color: #f68740; }
    .promotionValentine > .promotionDetail > .promotionPolicy > .currentCustomer {
      color: #f0346d; }
    .promotionValentine > .promotionDetail > .promotionPolicy > .description {
      color: #33333380; }
    .promotionValentine > .promotionDetail > .promotionPolicy > .img-download {
      max-height: 100%;
      max-width: 100%;
      display: block;
      margin: auto; }
      @media (min-width: 576px) {
        .promotionValentine > .promotionDetail > .promotionPolicy > .img-download {
          max-width: 135px;
          max-height: 40px;
          padding: 0.5rem; } }
    .promotionValentine > .promotionDetail > .promotionPolicy > .imgs img {
      max-height: 100px !important;
      max-width: 100px !important; }
      @media (min-width: 576px) {
        .promotionValentine > .promotionDetail > .promotionPolicy > .imgs img {
          max-height: 80px !important;
          max-width: 80px !important; } }
      @media (min-width: 768px) {
        .promotionValentine > .promotionDetail > .promotionPolicy > .imgs img {
          max-height: 80px !important;
          max-width: 80px !important; } }
      @media (min-width: 992px) {
        .promotionValentine > .promotionDetail > .promotionPolicy > .imgs img {
          max-height: 100px !important;
          max-width: 100px !important; } }
    .promotionValentine > .promotionDetail > .promotionPolicy > .text {
      font-size: 1rem;
      margin-left: 1.7rem; }
      @media (min-width: 576px) {
        .promotionValentine > .promotionDetail > .promotionPolicy > .text {
          font-size: 1.1rem;
          margin-left: 1.7rem; } }
      @media (min-width: 768px) {
        .promotionValentine > .promotionDetail > .promotionPolicy > .text {
          font-size: 1.2rem;
          margin-left: 3.7rem; } }
      @media (min-width: 992px) {
        .promotionValentine > .promotionDetail > .promotionPolicy > .text {
          font-size: 1.3rem;
          margin-left: 3.7rem; } }
    .promotionValentine > .promotionDetail > .promotionPolicy > .title {
      font-weight: bold;
      font-size: 1.3rem; }
      @media (min-width: 576px) {
        .promotionValentine > .promotionDetail > .promotionPolicy > .title {
          font-size: 1.5rem; } }
      @media (min-width: 768px) {
        .promotionValentine > .promotionDetail > .promotionPolicy > .title {
          font-size: 1.7rem; } }
      @media (min-width: 992px) {
        .promotionValentine > .promotionDetail > .promotionPolicy > .title {
          font-size: 2rem; } }
    .promotionValentine > .promotionDetail > .promotionPolicy > .list {
      padding-left: 2rem; }
      @media (min-width: 768px) {
        .promotionValentine > .promotionDetail > .promotionPolicy > .list {
          padding-left: 4rem; } }
      .promotionValentine > .promotionDetail > .promotionPolicy > .list > .listItem {
        margin-bottom: 0.2rem;
        font-size: 1rem; }
        .promotionValentine > .promotionDetail > .promotionPolicy > .list > .listItem > .links {
          color: #4989bf !important; }
        @media (min-width: 576px) {
          .promotionValentine > .promotionDetail > .promotionPolicy > .list > .listItem {
            font-size: 1.1rem; } }
        @media (min-width: 768px) {
          .promotionValentine > .promotionDetail > .promotionPolicy > .list > .listItem {
            font-size: 1.2rem; } }
        @media (min-width: 992px) {
          .promotionValentine > .promotionDetail > .promotionPolicy > .list > .listItem {
            font-size: 1.3rem; } }
    .promotionValentine > .promotionDetail > .promotionPolicy > .promotionSubDescription {
      font-size: 0.9rem; }
      .promotionValentine > .promotionDetail > .promotionPolicy > .promotionSubDescription > .hightlight {
        font-weight: bold; }
      @media (min-width: 576px) {
        .promotionValentine > .promotionDetail > .promotionPolicy > .promotionSubDescription {
          font-size: 1rem; } }
      @media (min-width: 768px) {
        .promotionValentine > .promotionDetail > .promotionPolicy > .promotionSubDescription {
          font-size: 1.2rem; } }
      @media (min-width: 992px) {
        .promotionValentine > .promotionDetail > .promotionPolicy > .promotionSubDescription {
          font-size: 1.4rem; } }
      .promotionValentine > .promotionDetail > .promotionPolicy > .promotionSubDescription > .links {
        color: #4989bf !important; }
  .promotionValentine > .promotionDetail > .promotionRemark {
    font-size: 1rem; }
    .promotionValentine > .promotionDetail > .promotionRemark > .text > .links {
      color: #4989bf !important; }
    @media (min-width: 576px) {
      .promotionValentine > .promotionDetail > .promotionRemark {
        font-size: 1.1rem; } }
    @media (min-width: 768px) {
      .promotionValentine > .promotionDetail > .promotionRemark {
        font-size: 1.2rem; } }
    @media (min-width: 992px) {
      .promotionValentine > .promotionDetail > .promotionRemark {
        font-size: 1.3rem; } }
  .promotionValentine > .promotionDetail > .promotionBuy {
    text-align: center; }
    .promotionValentine > .promotionDetail > .promotionBuy .btnJoinPromotion {
      display: block;
      background-color: darkorange !important;
      border: 1px solid transparent;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
      outline: none;
      padding: 0.5rem;
      border-radius: 0.2rem;
      color: white;
      margin-bottom: 4px;
      width: 100%;
      border-radius: 3rem;
      max-width: 200px;
      margin: 0 auto;
      margin-bottom: 0.5rem; }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

.android-price-log__back-btn {
  padding: 8px 16px;
  background: #ffd44c; }
  .android-price-log__back-btn:hover {
    background: #fff3cd; }

#android-price-log__table tr:hover td {
  background: #fff3cd; }

#android-price-log__table_wrapper input[type="search"] {
  padding: 4px;
  border: 1px solid #ffd44c;
  outline: none;
  background: #fff3cd; }

#android-price-log__table_wrapper .dataTables_paginate a {
  border: 0;
  border-radius: 0;
  color: white !important;
  background: black; }
  #android-price-log__table_wrapper .dataTables_paginate a.disabled {
    color: #dee2e6 !important;
    background: transparent; }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

.section-intro,
.android-price,
.android-price .row,
.mdc-top-app-bar--fixed-adjust,
.android-price .col-6 {
  height: 100%; }

.back {
  padding: 0rem; }

.android-price__manage {
  display: flex;
  flex-direction: column;
  height: 100%; }
  .android-price__manage .android-price__title {
    margin-bottom: 24px; }
  .android-price__manage .android-price__history-btn {
    padding: 8px 16px;
    background: #ffd44c; }
    .android-price__manage .android-price__history-btn:hover {
      background: #e9ecef; }
    .android-price__manage .android-price__history-btn i {
      margin-right: 8px; }
  .android-price__manage .android-price__change-all-btn {
    float: right;
    padding: 8px 16px;
    background: #ffd44c; }
    .android-price__manage .android-price__change-all-btn:hover {
      background: #fff3cd; }
  .android-price__manage .android-price__btn-group {
    margin-bottom: 16px; }
  .android-price__manage .android-price__price-list {
    flex: 1;
    overflow-y: auto; }
  .android-price__manage #android-price__page {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px; }
    .android-price__manage #android-price__page .pagination {
      margin-bottom: 0; }
    .android-price__manage #android-price__page .page-item a {
      border-radius: 0 !important; }
    .android-price__manage #android-price__page .page-item.disabled a {
      color: #dee2e6; }
    .android-price__manage #android-price__page .page-item:not(.disabled) a {
      color: black; }
    .android-price__manage #android-price__page .page-item.active a {
      color: white;
      border-color: #495057;
      background: #495057; }

.android-price__guide {
  padding: 24px;
  color: #856404;
  background: #fff3cd;
  overflow-y: auto;
  height: 100%; }
  .android-price__guide p {
    margin-bottom: 8px;
    padding-top: 0;
    text-indent: 0px !important;
    text-align: justify; }
  .android-price__guide .header2 {
    text-indent: 24px !important; }
  .android-price__guide hr {
    border-color: #856404; }

.android-price__waiting-alert {
  border: 1px dashed #856404;
  padding: 24px;
  color: #856404;
  background-color: #fff3cd;
  text-align: center;
  font-weight: bolder; }
  .android-price__waiting-alert i {
    margin-right: 8px; }
  .android-price__waiting-alert a {
    color: black;
    text-decoration: underline; }

.android-price__danger-alert {
  border: 1px dashed #721c24;
  padding: 24px;
  color: #721c24;
  background-color: #f8d7da;
  text-align: center;
  font-weight: bolder; }
  .android-price__danger-alert i {
    margin-right: 8px; }

.android-price__table-caption {
  margin-bottom: 8px;
  font-weight: bold;
  padding-left: 1rem; }

#android-price__table_wrapper {
  border: 0;
  color: #856404; }
  #android-price__table_wrapper tr:hover td {
    background: #dee2e6; }
  #android-price__table_wrapper tr td:nth-child(1) {
    text-align: center; }
  #android-price__table_wrapper th {
    border-color: #856404;
    text-align: center;
    vertical-align: middle;
    background: #fafafa; }
  #android-price__table_wrapper td {
    border: 1px solid #856404;
    text-align: right;
    background: white; }
  #android-price__table_wrapper .android-price__table-rec {
    background: #ffd44c; }
  #android-price__table_wrapper .dataTables_scrollBody {
    border-bottom: 0; }
  #android-price__table_wrapper .table-bordered {
    border: 1px solid transparent !important; }

.android-price-log__modal .btn-accept {
  background: #ffd44c; }
  .android-price-log__modal .btn-accept:hover {
    background: #fff3cd; }

.android-price-log__modal .btn-decline {
  border: 1px solid #dee2e6; }
  .android-price-log__modal .btn-decline:hover {
    background: #e9ecef; }

.android-price__price-list-text {
  display: flex;
  justify-content: center;
  padding: 64px 0;
  color: #6c757d; }

.btnAndroid-price {
  color: black;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  padding: 6px 19px;
  background: #ffd44c;
  border-color: #ffd44c; }

.androidNewPriceTable table.dataTable {
  margin: 0 auto; }

.androidNewPriceTable div.dataTables_scroll {
  margin: 0 auto; }

.androidNewPriceTable .dataTables_wrapper {
  margin: 0 auto;
  width: 100%; }

#android-new-price__table_wrapper {
  border: 0;
  color: #856404; }
  #android-new-price__table_wrapper tr:hover td {
    background: #dee2e6; }
  #android-new-price__table_wrapper tr td:nth-child(1) {
    text-align: center; }
  #android-new-price__table_wrapper th {
    border-color: #856404;
    text-align: center;
    vertical-align: middle;
    background: #fafafa; }
  #android-new-price__table_wrapper td {
    border: 1px solid #856404;
    text-align: right;
    background: white; }
  #android-new-price__table_wrapper .android-price__table-rec {
    background: #ffd44c; }
  #android-new-price__table_wrapper .dataTables_scrollBody {
    border-bottom: 0; }
  #android-new-price__table_wrapper .table-bordered {
    border: 1px solid transparent !important; }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

.android-price-item {
  display: flex;
  margin-top: 8px;
  background: white;
  border: 1px solid #dee2e6;
  padding: 8px; }

.android-price-item__cover-box {
  padding-right: 8px; }
  .android-price-item__cover-box img {
    width: 80px; }

.android-price-item__detail-box {
  width: 100%; }
  .android-price-item__detail-box .android-price-item__name {
    padding: 8px 0;
    border-bottom: 1px solid #dee2e6;
    font-size: 18px;
    font-weight: bolder; }
  .android-price-item__detail-box .android-price-item__price {
    display: flex;
    align-items: center;
    padding: 8px 0; }
    .android-price-item__detail-box .android-price-item__price .android-price-item__price-text {
      height: 32px; }
  .android-price-item__detail-box .android-price-item__price-title {
    margin-bottom: 8px;
    font-size: 14px; }
    .android-price-item__detail-box .android-price-item__price-title span {
      font-size: 10px !important; }
  .android-price-item__detail-box .android-price-item__arrow {
    padding: 0 16px; }
  .android-price-item__detail-box select {
    height: 32px;
    border: 1px solid #ffd44c !important;
    background: rgba(255, 212, 76, 0.25) !important; }
  .android-price-item__detail-box .android-price-item__submit {
    cursor: pointer;
    margin-left: 8px;
    border: 1px solid #dee2e6;
    padding: 4px 8px;
    font-size: 14px;
    background: #f8f9fa; }
    .android-price-item__detail-box .android-price-item__submit:hover {
      background: #e9ecef; }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

.section-intro,
.android-price,
.android-price .row,
.mdc-top-app-bar--fixed-adjust,
.android-price .col-6 {
  height: 100%; }

.android-price-new .android-price__manage {
  display: flex;
  flex-direction: column;
  height: 100%; }
  .android-price-new .android-price__manage .android-price__title {
    margin-bottom: 24px; }
  .android-price-new .android-price__manage .android-price__history-btn {
    padding: 8px 16px;
    background: white; }
    .android-price-new .android-price__manage .android-price__history-btn:hover {
      background: #e9ecef; }
    .android-price-new .android-price__manage .android-price__history-btn i {
      margin-right: 8px; }
  .android-price-new .android-price__manage .android-price__change-all-btn {
    float: right;
    padding: 8px 16px;
    background: #ffd44c; }
    .android-price-new .android-price__manage .android-price__change-all-btn:hover {
      background: #fff3cd; }
  .android-price-new .android-price__manage .android-price__btn-group {
    margin-bottom: 16px; }
  .android-price-new .android-price__manage .android-price__price-list {
    flex: 1;
    overflow-y: auto; }
  .android-price-new .android-price__manage #android-price__page {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px; }
    .android-price-new .android-price__manage #android-price__page .pagination {
      margin-bottom: 0; }
    .android-price-new .android-price__manage #android-price__page .page-item a {
      border-radius: 0 !important; }
    .android-price-new .android-price__manage #android-price__page .page-item.disabled a {
      color: #dee2e6; }
    .android-price-new .android-price__manage #android-price__page .page-item:not(.disabled) a {
      color: black; }
    .android-price-new .android-price__manage #android-price__page .page-item.active a {
      color: white;
      border-color: #495057;
      background: #495057; }

.android-price-new .android-price__guide {
  padding: 24px;
  color: black !important;
  background: #fff3cd;
  overflow-y: auto;
  height: 100%; }
  .android-price-new .android-price__guide .android-price__guide-title {
    text-align: center; }
  .android-price-new .android-price__guide .content {
    padding-left: 15rem;
    padding-right: 15rem; }
    @media (pointer: none), (pointer: coarse) {
      .android-price-new .android-price__guide .content {
        padding-left: 0rem !important;
        padding-right: 0rem !important; } }
    .android-price-new .android-price__guide .content .top {
      padding-top: 1rem; }
  .android-price-new .android-price__guide p {
    margin-bottom: 8px;
    padding-top: 0;
    text-indent: 0px !important;
    text-align: justify; }
  .android-price-new .android-price__guide .header2 {
    text-indent: 24px !important; }
  .android-price-new .android-price__guide hr {
    border-color: #856404; }

.android-price__waiting-alert {
  border: 1px dashed #856404;
  padding: 24px;
  color: #856404;
  background-color: #fff3cd;
  text-align: center;
  font-weight: bolder; }
  .android-price__waiting-alert i {
    margin-right: 8px; }
  .android-price__waiting-alert a {
    color: black;
    text-decoration: underline; }

.android-price__danger-alert {
  border: 1px dashed #721c24;
  padding: 24px;
  color: #721c24;
  background-color: #f8d7da;
  text-align: center;
  font-weight: bolder; }
  .android-price__danger-alert i {
    margin-right: 8px; }

.android-price__table-caption {
  margin-bottom: 8px;
  font-weight: bold;
  padding-left: 1rem; }

#android-price__table_wrapper {
  border: 0;
  color: #856404; }
  #android-price__table_wrapper tr:hover td {
    background: #dee2e6; }
  #android-price__table_wrapper tr td:nth-child(1) {
    text-align: center; }
  #android-price__table_wrapper th {
    border-color: #856404;
    text-align: center;
    vertical-align: middle;
    background: #fafafa; }
  #android-price__table_wrapper td {
    border: 1px solid #856404;
    text-align: right;
    background: white; }
  #android-price__table_wrapper .android-price__table-rec {
    background: #ffd44c; }
  #android-price__table_wrapper .dataTables_scrollBody {
    border-bottom: 0; }
  #android-price__table_wrapper .table-bordered {
    border: 1px solid transparent !important; }

.android-price-log__modal .btn-accept {
  background: #ffd44c; }
  .android-price-log__modal .btn-accept:hover {
    background: #fff3cd; }

.android-price-log__modal .btn-decline {
  border: 1px solid #dee2e6; }
  .android-price-log__modal .btn-decline:hover {
    background: #e9ecef; }

.android-price__price-list-text {
  display: flex;
  justify-content: center;
  padding: 64px 0;
  color: #6c757d; }

.promotion__content-box-android {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; }
  .promotion__content-box-android a {
    text-decoration: none;
    color: black; }
  .promotion__content-box-android .promotion__menu-item {
    display: inline-block;
    margin: 24px;
    border-radius: 16px;
    padding: 24px;
    width: 240px;
    background: #fafafa;
    height: 320px; }
    .promotion__content-box-android .promotion__menu-item .promotion__menu-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100px;
      font-size: 48px;
      font-weight: bolder;
      text-shadow: 0px 1px black; }
    .promotion__content-box-android .promotion__menu-item .promotion__item-text {
      margin-top: 16px;
      font-size: 18px;
      text-align: center; }
    .promotion__content-box-android .promotion__menu-item p {
      height: 80px !important; }

.manageAndroid {
  text-align: center;
  display: block;
  margin-top: 1rem; }
  .manageAndroid .btnAndroid {
    cursor: pointer;
    display: inline-block;
    text-align: center;
    padding: 8px 32px;
    text-decoration: none;
    color: black;
    background: #ffd44c;
    border-color: transparent; }

.androidPriceTable table.dataTable {
  margin: 0 auto; }

.androidPriceTable div.dataTables_scroll {
  margin: 0 auto; }

.androidPriceTable .dataTables_wrapper {
  margin: 0 auto;
  width: 100%; }

.fa-info-circle {
  transform: translateY(7%); }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

.apple-price-log__back-btn {
  padding: 8px 16px;
  background: #ffd44c; }
  .apple-price-log__back-btn:hover {
    background: #fff3cd; }

#apple-price-log__table tr td:nth-child(3),
#apple-price-log__table tr td:nth-child(4) {
  text-align: right; }

#apple-price-log__table tr:hover td {
  background: #fff3cd; }

#apple-price-log__table_wrapper input[type="search"] {
  padding: 4px;
  border: 1px solid #ffd44c;
  outline: none;
  background: #fff3cd; }

#apple-price-log__table_wrapper th:nth-child(3),
#apple-price-log__table_wrapper th:nth-child(4) {
  text-align: right; }

#apple-price-log__table_wrapper .dataTables_paginate a {
  border: 0;
  border-radius: 0;
  color: white !important;
  background: black; }
  #apple-price-log__table_wrapper .dataTables_paginate a.disabled {
    color: #dee2e6 !important;
    background: transparent; }

.btnExport {
  background: white;
  padding: 1rem;
  border-radius: 24px; }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

.apple-price-item {
  display: flex;
  margin-top: 8px;
  background: white;
  border: 1px solid #dee2e6;
  padding: 8px; }

.apple-price-item__cover-box {
  padding-right: 8px; }
  .apple-price-item__cover-box img {
    width: 80px; }

.apple-price-item__detail-box {
  width: 100%; }
  .apple-price-item__detail-box .apple-price-item__name {
    padding: 8px 0;
    border-bottom: 1px solid #dee2e6;
    font-size: 18px;
    font-weight: bolder; }
  .apple-price-item__detail-box .apple-price-item__price {
    display: flex;
    align-items: center;
    padding: 8px 0; }
    .apple-price-item__detail-box .apple-price-item__price .apple-price-item__price-text {
      height: 32px; }
  .apple-price-item__detail-box .apple-price-item__price-title {
    margin-bottom: 8px;
    font-size: 14px; }
  .apple-price-item__detail-box .apple-price-item__arrow {
    padding: 0 16px; }
  .apple-price-item__detail-box select {
    height: 32px;
    border: 1px solid #ffd44c !important;
    background: rgba(255, 212, 76, 0.25) !important; }
  .apple-price-item__detail-box .apple-price-item__submit {
    cursor: pointer;
    margin-left: 8px;
    border: 1px solid #dee2e6;
    padding: 4px 8px;
    font-size: 14px;
    background: #f8f9fa; }
    .apple-price-item__detail-box .apple-price-item__submit:hover {
      background: #e9ecef; }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

.section-intro,
.apple-price,
.apple-price .row,
.mdc-top-app-bar--fixed-adjust,
.apple-price .col-6 {
  height: 100%; }

.apple-price__manage {
  display: flex;
  flex-direction: column;
  height: 100%; }
  .apple-price__manage .apple-price__title {
    margin-bottom: 24px; }
  .apple-price__manage .apple-price__history-btn {
    padding: 8px 16px;
    background: white; }
    .apple-price__manage .apple-price__history-btn:hover {
      background: #e9ecef; }
    .apple-price__manage .apple-price__history-btn i {
      margin-right: 8px; }
  .apple-price__manage .apple-price__change-all-btn {
    float: right;
    padding: 8px 16px;
    background: #ffd44c; }
    .apple-price__manage .apple-price__change-all-btn:hover {
      background: #fff3cd; }
  .apple-price__manage .apple-price__btn-group {
    margin-bottom: 16px; }
  .apple-price__manage .apple-price__price-list {
    flex: 1;
    overflow-y: auto;
    margin-right: -1rem; }
  .apple-price__manage #apple-price__page {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px; }
    .apple-price__manage #apple-price__page .pagination {
      margin-bottom: 0; }
    .apple-price__manage #apple-price__page .page-item a {
      border-radius: 0 !important; }
    .apple-price__manage #apple-price__page .page-item.disabled a {
      color: #dee2e6; }
    .apple-price__manage #apple-price__page .page-item:not(.disabled) a {
      color: black; }
    .apple-price__manage #apple-price__page .page-item.active a {
      color: white;
      border-color: #495057;
      background: #495057; }

.apple-price__guide {
  padding: 24px;
  color: #856404;
  background: #fff3cd;
  overflow-y: auto;
  height: 100%; }
  .apple-price__guide p {
    margin-bottom: 8px;
    padding-top: 0;
    text-indent: 24px; }
  .apple-price__guide hr {
    border-color: #856404; }

.apple-price__waiting-alert {
  border: 1px dashed #856404;
  padding: 24px;
  color: #856404;
  background-color: #fff3cd;
  text-align: center;
  font-weight: bolder; }
  .apple-price__waiting-alert i {
    margin-right: 8px; }
  .apple-price__waiting-alert a {
    color: black;
    text-decoration: underline; }

.apple-price__danger-alert {
  border: 1px dashed #721c24;
  padding: 24px;
  color: #721c24;
  background-color: #f8d7da;
  text-align: center;
  font-weight: bolder; }
  .apple-price__danger-alert i {
    margin-right: 8px; }

.apple-price__table-caption {
  margin-bottom: 8px;
  text-align: center; }

#apple-price__table_wrapper {
  border: 0;
  color: #856404; }
  #apple-price__table_wrapper tr:hover td {
    background: #dee2e6; }
  #apple-price__table_wrapper tr td:nth-child(1) {
    text-align: center; }
  #apple-price__table_wrapper th {
    border-color: #856404;
    text-align: center;
    vertical-align: middle;
    background: #fafafa; }
  #apple-price__table_wrapper td {
    border: 1px solid #856404;
    text-align: right;
    background: white; }
  #apple-price__table_wrapper .apple-price__table-rec {
    background: #ffd44c; }
  #apple-price__table_wrapper .dataTables_scrollBody {
    border-bottom: 0; }

.apple-price-log__modal .btn-accept {
  background: #ffd44c; }
  .apple-price-log__modal .btn-accept:hover {
    background: #fff3cd; }

.apple-price-log__modal .btn-decline {
  border: 1px solid #dee2e6; }
  .apple-price-log__modal .btn-decline:hover {
    background: #e9ecef; }

.apple-price__price-list-text {
  display: flex;
  justify-content: center;
  padding: 64px 0;
  color: #6c757d; }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

.section-intro,
.apple-price,
.apple-price .row,
.mdc-top-app-bar--fixed-adjust,
.apple-price .col-6 {
  height: 100%; }

.apple-price__manage {
  display: flex;
  flex-direction: column;
  height: 100%; }
  .apple-price__manage .apple-price__title {
    margin-bottom: 24px; }
  .apple-price__manage .apple-price__history-btn {
    padding: 8px 16px;
    background: white; }
    .apple-price__manage .apple-price__history-btn:hover {
      background: #e9ecef; }
    .apple-price__manage .apple-price__history-btn i {
      margin-right: 8px; }
  .apple-price__manage .apple-price__change-all-btn {
    float: right;
    padding: 8px 16px;
    background: #ffd44c; }
    .apple-price__manage .apple-price__change-all-btn:hover {
      background: #fff3cd; }
  .apple-price__manage .apple-price__btn-group {
    margin-bottom: 16px; }
  .apple-price__manage .apple-price__price-list {
    flex: 1;
    overflow-y: auto; }
  .apple-price__manage #apple-price__page {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px; }
    .apple-price__manage #apple-price__page .pagination {
      margin-bottom: 0; }
    .apple-price__manage #apple-price__page .page-item a {
      border-radius: 0 !important; }
    .apple-price__manage #apple-price__page .page-item.disabled a {
      color: #dee2e6; }
    .apple-price__manage #apple-price__page .page-item:not(.disabled) a {
      color: black; }
    .apple-price__manage #apple-price__page .page-item.active a {
      color: white;
      border-color: #495057;
      background: #495057; }

.apple-price__guide {
  padding: 24px;
  color: #856404;
  background: #fff3cd;
  overflow-y: auto;
  height: 100%; }
  .apple-price__guide p {
    margin-bottom: 8px;
    padding-top: 0;
    text-indent: 24px; }
  .apple-price__guide hr {
    border-color: #856404; }

.apple-price__waiting-alert {
  border: 1px dashed #856404;
  padding: 24px;
  color: #856404;
  background-color: #fff3cd;
  text-align: center;
  font-weight: bolder; }
  .apple-price__waiting-alert i {
    margin-right: 8px; }
  .apple-price__waiting-alert a {
    color: black;
    text-decoration: underline; }

.apple-price__danger-alert {
  border: 1px dashed #721c24;
  padding: 24px;
  color: #721c24;
  background-color: #f8d7da;
  text-align: center;
  font-weight: bolder; }
  .apple-price__danger-alert i {
    margin-right: 8px; }

.apple-price__table-caption {
  margin-bottom: 8px;
  text-align: center; }

#apple-price__table_wrapper {
  border: 0;
  color: #856404; }
  #apple-price__table_wrapper tr:hover td {
    background: #dee2e6; }
  #apple-price__table_wrapper tr td:nth-child(1) {
    text-align: center; }
  #apple-price__table_wrapper th {
    border-color: #856404;
    text-align: center;
    vertical-align: middle;
    background: #fafafa; }
  #apple-price__table_wrapper td {
    border: 1px solid #856404;
    text-align: right;
    background: white; }
  #apple-price__table_wrapper .apple-price__table-rec {
    background: #ffd44c; }
  #apple-price__table_wrapper .dataTables_scrollBody {
    border-bottom: 0; }

.apple-price-log__modal .btn-accept {
  background: #ffd44c; }
  .apple-price-log__modal .btn-accept:hover {
    background: #fff3cd; }

.apple-price-log__modal .btn-decline {
  border: 1px solid #dee2e6; }
  .apple-price-log__modal .btn-decline:hover {
    background: #e9ecef; }

.apple-price__price-list-text {
  display: flex;
  justify-content: center;
  padding: 64px 0;
  color: #6c757d; }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

.section-intro,
.android-price,
.android-price .row,
.mdc-top-app-bar--fixed-adjust,
.android-price .col-6 {
  height: 100%; }

.android-price-new .android-price__manage {
  display: flex;
  flex-direction: column;
  height: 100%; }
  .android-price-new .android-price__manage .android-price__title {
    margin-bottom: 24px; }
  .android-price-new .android-price__manage .android-price__history-btn {
    padding: 8px 16px;
    background: white; }
    .android-price-new .android-price__manage .android-price__history-btn:hover {
      background: #e9ecef; }
    .android-price-new .android-price__manage .android-price__history-btn i {
      margin-right: 8px; }
  .android-price-new .android-price__manage .android-price__change-all-btn {
    float: right;
    padding: 8px 16px;
    background: #ffd44c; }
    .android-price-new .android-price__manage .android-price__change-all-btn:hover {
      background: #fff3cd; }
  .android-price-new .android-price__manage .android-price__btn-group {
    margin-bottom: 16px; }
  .android-price-new .android-price__manage .android-price__price-list {
    flex: 1;
    overflow-y: auto; }
  .android-price-new .android-price__manage #android-price__page {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px; }
    .android-price-new .android-price__manage #android-price__page .pagination {
      margin-bottom: 0; }
    .android-price-new .android-price__manage #android-price__page .page-item a {
      border-radius: 0 !important; }
    .android-price-new .android-price__manage #android-price__page .page-item.disabled a {
      color: #dee2e6; }
    .android-price-new .android-price__manage #android-price__page .page-item:not(.disabled) a {
      color: black; }
    .android-price-new .android-price__manage #android-price__page .page-item.active a {
      color: white;
      border-color: #495057;
      background: #495057; }

.android-price-new .android-price__guide {
  padding: 24px;
  color: black !important;
  background: #fff3cd;
  overflow-y: auto;
  height: 100%; }
  .android-price-new .android-price__guide .android-price__guide-title {
    text-align: center; }
  .android-price-new .android-price__guide .content {
    padding-left: 15rem;
    padding-right: 15rem; }
    @media (pointer: none), (pointer: coarse) {
      .android-price-new .android-price__guide .content {
        padding-left: 0rem !important;
        padding-right: 0rem !important; } }
    .android-price-new .android-price__guide .content .top {
      padding-top: 1rem; }
  .android-price-new .android-price__guide p {
    margin-bottom: 8px;
    padding-top: 0;
    text-indent: 0px !important;
    line-height: 38px; }
  .android-price-new .android-price__guide .header2 {
    text-indent: 24px !important;
    font-size: 18px; }
  .android-price-new .android-price__guide hr {
    border-color: #856404; }

.android-price__waiting-alert {
  border: 1px dashed #856404;
  padding: 24px;
  color: #856404;
  background-color: #fff3cd;
  text-align: center;
  font-weight: bolder; }
  .android-price__waiting-alert i {
    margin-right: 8px; }
  .android-price__waiting-alert a {
    color: black;
    text-decoration: underline; }

.android-price__danger-alert {
  border: 1px dashed #721c24;
  padding: 24px;
  color: #721c24;
  background-color: #f8d7da;
  text-align: center;
  font-weight: bolder; }
  .android-price__danger-alert i {
    margin-right: 8px; }

.android-price__table-caption {
  margin-bottom: 8px;
  font-weight: bold;
  padding-left: 1rem; }

#android-price__table_wrapper {
  border: 0;
  color: #856404; }
  #android-price__table_wrapper tr:hover td {
    background: #dee2e6; }
  #android-price__table_wrapper tr td:nth-child(1) {
    text-align: center; }
  #android-price__table_wrapper th {
    border-color: #856404;
    text-align: center;
    vertical-align: middle;
    background: #fafafa; }
  #android-price__table_wrapper td {
    border: 1px solid #856404;
    text-align: right;
    background: white; }
  #android-price__table_wrapper .android-price__table-rec {
    background: #ffd44c; }
  #android-price__table_wrapper .dataTables_scrollBody {
    border-bottom: 0; }
  #android-price__table_wrapper .table-bordered {
    border: 1px solid transparent !important; }

.android-price-log__modal .btn-accept {
  background: #ffd44c; }
  .android-price-log__modal .btn-accept:hover {
    background: #fff3cd; }

.android-price-log__modal .btn-decline {
  border: 1px solid #dee2e6; }
  .android-price-log__modal .btn-decline:hover {
    background: #e9ecef; }

.android-price__price-list-text {
  display: flex;
  justify-content: center;
  padding: 64px 0;
  color: #6c757d; }

.promotion__content-box-android {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; }
  .promotion__content-box-android a {
    text-decoration: none;
    color: black; }
  .promotion__content-box-android .promotion__menu-item {
    display: inline-block;
    margin: 24px;
    border-radius: 16px;
    padding: 24px;
    width: 240px;
    background: #fafafa;
    height: 284px; }
    .promotion__content-box-android .promotion__menu-item .promotion__menu-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100px;
      font-size: 48px;
      font-weight: bolder;
      text-shadow: 0px 1px black; }
    .promotion__content-box-android .promotion__menu-item .promotion__item-text {
      margin-top: 16px;
      font-size: 18px;
      text-align: center; }
    .promotion__content-box-android .promotion__menu-item p {
      height: 56px !important; }

.manageAndroid {
  text-align: center;
  display: block;
  margin-top: 1rem; }
  .manageAndroid .btnAndroid {
    cursor: pointer;
    display: inline-block;
    text-align: center;
    padding: 8px 32px;
    text-decoration: none;
    color: black;
    background: #ffd44c;
    border-color: transparent; }

.androidPriceTable table.dataTable {
  margin: 0 auto; }

.androidPriceTable div.dataTables_scroll {
  margin: 0 auto; }

.androidPriceTable .dataTables_wrapper {
  margin: 0 auto;
  width: 100%; }

.fa-info-circle {
  transform: translateY(7%); }

#android-price__table {
  max-width: 500px !important; }

#android-price__table_paginate {
  float: none !important;
  text-align: center !important; }

.manage__box {
  display: flex;
  flex-direction: column;
  padding-top: 24px; }

.manage__title {
  text-align: center;
  margin-bottom: 48px;
  font-size: 24px; }

.manage__content-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; }
  .manage__content-box a {
    text-decoration: none;
    color: black; }
  .manage__content-box .manage__menu-item {
    display: inline-block;
    margin: 24px;
    border-radius: 16px;
    padding: 24px;
    width: 320px;
    height: 720px;
    background: #fafafa; }
    .manage__content-box .manage__menu-item .manage__menu-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 160px;
      font-size: 48px;
      font-weight: bolder;
      text-shadow: 0px 1px black; }
    .manage__content-box .manage__menu-item .manage__item-text {
      margin-top: 16px;
      font-size: 16px;
      color: #707070;
      padding: 1rem; }
    .manage__content-box .manage__menu-item .manage__item-detail {
      font-size: 14px;
      color: #898989;
      text-align: center;
      padding: 0.5rem;
      border-radius: 17px;
      border: 1px solid #bebebe; }

.manage__img {
  width: 100%;
  height: auto;
  max-width: 175px; }

.manage__btn1 {
  display: flex;
  justify-content: center;
  padding: 15px 0;
  padding-top: 2.5rem; }
  .manage__btn1 .fa-store {
    margin-right: 8px; }
  .manage__btn1 .drawer__store-btn {
    cursor: pointer;
    display: inline-block;
    text-align: center;
    border-radius: 24px;
    padding: 8px 32px;
    text-decoration: none;
    color: black;
    background: #ffd44c; }
    .manage__btn1 .drawer__store-btn:hover {
      background: #eaeaea; }

.manage__btn2 {
  display: flex;
  justify-content: center;
  padding: 15px 0; }
  .manage__btn2 .fa-store {
    margin-right: 8px; }
  .manage__btn2 .drawer__store-btn {
    cursor: pointer;
    display: inline-block;
    text-align: center;
    border-radius: 24px;
    padding: 8px 32px;
    text-decoration: none;
    color: black;
    background: #ffd44c; }
    .manage__btn2 .drawer__store-btn:hover {
      background: #eaeaea; }

.manage__padding {
  padding-top: 1rem; }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

.content-card {
  background-color: white;
  display: inline-block;
  width: 100%; }
  .content-card a {
    text-decoration: none;
    color: black; }
    .content-card a:hover {
      text-decoration: underline; }
  .content-card .content-card__cover {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #eaeaea;
    padding-top: calc((4 / 3) * 100%);
    background: white; }
    .content-card .content-card__cover img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: 100%;
      max-height: 100%; }
  .content-card .content-card__title {
    padding: 16px;
    padding-bottom: 0; }
    .content-card .content-card__title .truncate {
      min-height: 48px; }
  .content-card .content-card__detail {
    margin-top: 8px;
    padding: 16px;
    padding-top: 0;
    font-size: 12px; }
    .content-card .content-card__detail .content-card__field {
      font-weight: bolder; }
    .content-card .content-card__detail .content-card__waiting-remove {
      padding: 8px;
      text-align: center;
      font-size: 14px;
      background: #eaeaea; }
    .content-card .content-card__detail .content-card__btn-group {
      display: flex;
      margin-top: 16px; }
      .content-card .content-card__detail .content-card__btn-group .content-card__btn {
        cursor: pointer;
        display: flex;
        justify-content: center;
        min-width: 0;
        flex: 1;
        border: 1px solid #eaeaea;
        padding: 4px 16px;
        font-size: 14px;
        background: #eaeaea; }
        .content-card .content-card__detail .content-card__btn-group .content-card__btn:hover {
          background: #fafafa; }
      .content-card .content-card__detail .content-card__btn-group .content-card__remove-btn {
        margin-left: 8px; }
        .content-card .content-card__detail .content-card__btn-group .content-card__remove-btn:hover {
          border: 1px solid #f8d7da;
          background: #f8d7da; }

.shadow {
  box-shadow: 5px 10px 18px lightsteelblue !important; }

@media (max-width: 1199px) {
  .content-list__add-btn span {
    display: none; } }

@media (max-width: 575px) {
  .content-list__add-btn {
    width: 100%;
    text-align: center; }
    .content-list__add-btn span {
      display: inline; }
  .content-list__sort {
    width: 100%; }
  .page-item {
    display: none; }
  .pagination .first,
  .prev,
  .next,
  .last {
    display: list-item; }
  #content-list__remove-modal .modal-dialog {
    max-width: 100% !important;
    margin: 0 auto; } }

.content-list {
  display: flex;
  flex-direction: column;
  height: 100%; }
  .content-list .content-list__contetns {
    flex: 1; }

.content-list__filter-box {
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 16px;
  padding: 16px;
  padding-top: 0;
  padding-right: 0; }
  .content-list__filter-box .content-list__add-btn {
    cursor: pointer;
    height: 40px;
    margin-top: 16px;
    margin-right: 16px;
    border-radius: 24px;
    padding: 8px 32px;
    text-decoration: none;
    font-weight: bolder;
    color: black;
    background: #ffd44c; }
    .content-list__filter-box .content-list__add-btn:hover {
      background: #eaeaea; }
    .content-list__filter-box .content-list__add-btn .fa-plus {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 20px;
      height: 20px;
      margin-right: 4px;
      border-radius: 50%;
      padding: 4px;
      color: white;
      background: black; }
  .content-list__filter-box .content-list__search-box {
    display: flex;
    flex: 1;
    margin-top: 16px;
    margin-right: 16px; }
    .content-list__filter-box .content-list__search-box .content-list__search-input {
      width: 100%;
      min-width: 120px;
      height: 40px;
      border: 0;
      border-radius: 24px 0 0 24px;
      padding: 0 32px;
      background: #eaeaea; }
      .content-list__filter-box .content-list__search-box .content-list__search-input:focus {
        outline-width: 0; }
    .content-list__filter-box .content-list__search-box .content-list__search-btn {
      cursor: pointer; }
      .content-list__filter-box .content-list__search-box .content-list__search-btn .fa-search {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 56px;
        height: 40px;
        border-radius: 0 24px 24px 0;
        background: #ffd44c; }
        .content-list__filter-box .content-list__search-box .content-list__search-btn .fa-search:hover {
          background: #eaeaea; }
  .content-list__filter-box .content-list__sort {
    cursor: pointer;
    height: 40px;
    margin-top: 16px;
    margin-right: 16px;
    border: 0;
    border-radius: 24px;
    padding: 8px 16px;
    font-size: 14px;
    background: #eaeaea; }
    .content-list__filter-box .content-list__sort:focus {
      outline-width: 0; }
  .content-list__filter-box select {
    cursor: pointer !important;
    height: 40px !important;
    margin-top: 16px !important;
    margin-right: 16px !important;
    border: 0 !important;
    border-radius: 24px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    background: #eaeaea !important; }
    .content-list__filter-box select:focus {
      outline-width: 0 !important; }

.content-list__status-tab {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly; }
  .content-list__status-tab .content-list__status-item {
    cursor: pointer;
    display: inline-block;
    flex: 1;
    min-width: 200px;
    border: 1px solid #eaeaea;
    padding: 16px 8px;
    white-space: nowrap;
    text-align: center;
    font-size: 16px;
    color: black; }

.content-list .row {
  display: flex;
  align-items: flex-end;
  margin: 0 -13px;
  margin-bottom: 24px; }
  .content-list .row .content-list__card-box {
    display: inline-block;
    margin-top: 24px;
    padding: 0 12px; }

.content-list__empty {
  margin-top: 64px;
  font-size: 18px;
  text-align: center; }

.content-list__page-box {
  display: flex;
  justify-content: center; }
  .content-list__page-box .pagination {
    margin-bottom: 0; }
    .content-list__page-box .pagination a {
      color: black !important; }
    .content-list__page-box .pagination li.active a {
      background: #ffd44c;
      border-color: #ffd44c; }
    .content-list__page-box .pagination li.disabled a {
      color: #eee !important; }

div[disabled],
a[disabled] {
  pointer-events: none;
  opacity: 0.7; }

.manageText {
  color: #707070;
  font-weight: normal;
  font-size: 18px;
  padding-top: 0.5rem; }

@media (min-width: 1200px) and (max-width: 1919px) {
  #magazine-list .col-xl-2 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%; } }

@media (min-width: 1200px) and (max-width: 1440px) {
  .magazine-list__card-title {
    padding: 8px !important;
    font-size: 18px !important; }
  .magazine-list__card-footer {
    width: calc(100% - 16px) !important;
    margin: 0 8px 8px 8px !important;
    font-size: 12px !important; } }

@media (max-width: 1199px) {
  #magazine-list__info-modal .modal-dialog,
  #magazine-list__update-modal .modal-dialog {
    max-width: 80% !important; } }

@media (max-width: 767px) {
  .magazine-list__section-box {
    flex: 1; }
  .magazine-list__card-title {
    padding: 8px !important;
    font-size: 18px !important; }
  .magazine-list__card-footer {
    width: calc(100% - 16px) !important;
    margin: 0 8px 8px 8px !important;
    font-size: 12px !important; } }

@media (max-width: 575px) {
  #magazine-list .col-xs-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }
  .magazine-list__btn-group a {
    width: 100%; }
  #magazine-list__info-modal .modal-dialog,
  #magazine-list__update-modal .modal-dialog,
  #magazine-list__remove-modal .modal-dialog,
  #magazine-list__remove-header-modal .modal-dialog {
    max-width: 100% !important;
    margin: 0 auto; } }

.btn-info {
  background: #ffd44c;
  border-color: #ffd44c; }

#magazine-list {
  display: flex;
  flex-direction: column;
  height: 100%; }
  #magazine-list .magazine-list__list-box {
    flex: 1; }

.magazine-list__btn-group {
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  padding: 16px;
  padding-top: 0;
  padding-right: 0; }
  .magazine-list__btn-group a {
    text-decoration: none;
    line-height: 24px;
    color: black; }
  .magazine-list__btn-group .magazine-list__add-btn {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 16px;
    border-radius: 24px;
    margin-top: 16px;
    padding: 8px 16px;
    font-weight: bolder;
    background: #ffd44c; }
    .magazine-list__btn-group .magazine-list__add-btn:hover {
      background: #eaeaea; }
    .magazine-list__btn-group .magazine-list__add-btn .fa-plus {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 20px;
      height: 20px;
      margin-right: 4px;
      border-radius: 50%;
      padding: 4px;
      color: white;
      background: black; }
  .magazine-list__btn-group .magazine-list__search-box {
    display: flex;
    flex: 1;
    margin-top: 16px;
    margin-right: 16px; }
    .magazine-list__btn-group .magazine-list__search-box .magazine-list__search-input {
      width: 100%;
      min-width: 120px;
      height: 40px;
      border: 0;
      border-radius: 24px 0 0 24px;
      padding: 0 32px;
      background: #eaeaea; }
      .magazine-list__btn-group .magazine-list__search-box .magazine-list__search-input:focus {
        outline-width: 0; }
    .magazine-list__btn-group .magazine-list__search-box .magazine-list__search-btn .fa-search {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 56px;
      height: 40px;
      border-radius: 0 24px 24px 0;
      background: #eaeaea; }

.magazine-list__list [class*="col"] {
  margin-top: 24px; }

.magazine-list__list .magazine-list__empty {
  margin-top: 64px;
  font-size: 18px;
  text-align: center; }

.magazine-list__list .magazine-list__item {
  position: relative;
  background-color: white; }
  .magazine-list__list .magazine-list__item .magazine-list__status {
    position: absolute;
    right: 0;
    display: inline-block;
    opacity: 0.8;
    font-size: 12px;
    padding: 4px; }
  .magazine-list__list .magazine-list__item .magazine-list__item-header {
    padding-top: 16px;
    text-align: center;
    font-size: 14px; }
    .magazine-list__list .magazine-list__item .magazine-list__item-header a {
      text-decoration: none; }
    .magazine-list__list .magazine-list__item .magazine-list__item-header .magazine-list__mag-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 16px;
      font-weight: bolder;
      color: black; }
      .magazine-list__list .magazine-list__item .magazine-list__item-header .magazine-list__mag-name:hover {
        text-decoration: underline; }
  .magazine-list__list .magazine-list__item .magazine-list__item-body {
    position: relative;
    height: calc(170px + 42px + 42px + 42px + 24px);
    padding: 16px; }
    .magazine-list__list .magazine-list__item .magazine-list__item-body .magazine-list__square-group {
      cursor: pointer;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      width: 140px; }
      .magazine-list__list .magazine-list__item .magazine-list__item-body .magazine-list__square-group:hover {
        font-weight: bolder; }
      .magazine-list__list .magazine-list__item .magazine-list__item-body .magazine-list__square-group .magazine-list__square {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 120px;
        height: 150px;
        background: rgba(0, 0, 0, 0.3); }
      .magazine-list__list .magazine-list__item .magazine-list__item-body .magazine-list__square-group .magazine-list__square--2 {
        display: flex;
        flex-direction: column;
        z-index: 2;
        color: #ffd44c; }
        .magazine-list__list .magazine-list__item .magazine-list__item-body .magazine-list__square-group .magazine-list__square--2 .fa-plus {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 32px;
          height: 32px;
          margin-right: 4px;
          border-radius: 50%;
          color: black;
          background: #ffd44c; }
      .magazine-list__list .magazine-list__item .magazine-list__item-body .magazine-list__square-group .magazine-list__square--1 {
        top: 10px;
        left: 10px;
        z-index: 1; }
      .magazine-list__list .magazine-list__item .magazine-list__item-body .magazine-list__square-group .magazine-list__square--0 {
        top: 20px;
        left: 20px; }
  .magazine-list__list .magazine-list__item .magazine-list__item-tool {
    position: relative;
    top: calc(170px + 16px);
    display: flex;
    justify-content: space-evenly;
    padding: 8px;
    padding-top: 0; }
    .magazine-list__list .magazine-list__item .magazine-list__item-tool .magazine-list__tool-btn {
      cursor: pointer;
      flex: 1;
      height: 32px;
      border: 1px solid #eaeaea;
      padding: 4px 16px;
      text-align: center;
      text-decoration: none;
      font-size: 14px;
      color: black;
      background: #eaeaea; }
      .magazine-list__list .magazine-list__item .magazine-list__item-tool .magazine-list__tool-btn:hover {
        background: #fafafa; }
    .magazine-list__list .magazine-list__item .magazine-list__item-tool .magazine-list__remove-btn {
      margin-left: 8px; }
      .magazine-list__list .magazine-list__item .magazine-list__item-tool .magazine-list__remove-btn:hover {
        border: 1px solid #f8d7da;
        background: #f8d7da; }

.magazine-list__list .magazine-list__item--muted {
  opacity: 0.5; }

.magazine-list__section {
  margin: 16px;
  padding: 24px;
  background: white; }
  .magazine-list__section .magazine-list__title {
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: bolder;
    text-transform: uppercase; }
  .magazine-list__section .magazine-list__data {
    margin-top: 12px; }
    .magazine-list__section .magazine-list__data:first-child {
      margin-top: 0; }
    .magazine-list__section .magazine-list__data #isActive + label {
      margin-right: 16px;
      margin-bottom: 0; }
    .magazine-list__section .magazine-list__data .magazine-list__field {
      font-size: 14px;
      font-weight: bolder; }
    .magazine-list__section .magazine-list__data .magazine-list__value i {
      margin-right: 4px; }

.magazine-list__general-section input[type="text"],
.magazine-list__general-section input[type="number"],
.magazine-list__general-section select,
.magazine-list__general-section textarea {
  width: 100%; }

#magazine-list__info-modal.show {
  display: flex !important; }

#magazine-list__info-modal .modal-dialog {
  max-width: 50%;
  height: 80%; }

#magazine-list__info-modal .modal-content {
  height: 100%; }

#magazine-list__info-modal .modal-body {
  overflow-y: scroll;
  padding: 0; }
  #magazine-list__info-modal .modal-body .magazine-list__html {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background: #fafafa; }
    #magazine-list__info-modal .modal-body .magazine-list__html .magazine-list__section-box--left {
      flex: 1; }
  #magazine-list__info-modal .modal-body .magazine-list__price-item:not(:last-child) {
    margin-bottom: 8px; }
  #magazine-list__info-modal .modal-body .magazine-list__info-section {
    min-width: 272px; }

#magazine-list__update-modal.show {
  display: flex !important; }

#magazine-list__update-modal .modal-dialog {
  max-width: 50%;
  height: 80%;
  width: 60%; }
  @media (max-width: 767px) {
    #magazine-list__update-modal .modal-dialog {
      width: 100% !important; } }

#magazine-list__update-modal .modal-content {
  height: 100%; }

#magazine-list__update-modal .modal-body {
  overflow-y: scroll;
  padding: 0;
  background: #fafafa; }
  #magazine-list__update-modal .modal-body textarea {
    padding: 8px 16px; }
  #magazine-list__update-modal .modal-body input[type="text"],
  #magazine-list__update-modal .modal-body input[type="number"],
  #magazine-list__update-modal .modal-body select {
    height: 40px;
    border: 0;
    padding: 0 16px;
    background: #eaeaea; }
  #magazine-list__update-modal .modal-body input[type="text"],
  #magazine-list__update-modal .modal-body input[type="number"],
  #magazine-list__update-modal .modal-body textarea,
  #magazine-list__update-modal .modal-body select {
    border-radius: 24px; }
  #magazine-list__update-modal .modal-body .alert-success {
    color: black;
    background: #fff3cd; }
  #magazine-list__update-modal .modal-body .form-group {
    margin-bottom: 0; }
  #magazine-list__update-modal .modal-body .required input:not(:disabled),
  #magazine-list__update-modal .modal-body .required select,
  #magazine-list__update-modal .modal-body .required textarea {
    border: 0;
    background: #fff3cd; }
  #magazine-list__update-modal .modal-body .magazine-list__data:not(:first-child) {
    margin-top: 16px; }
  #magazine-list__update-modal .modal-body .magazine-list__data .magazine-list__field {
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: normal; }
  #magazine-list__update-modal .modal-body .magazine-list__data .magazine-list__field--required {
    font-weight: bolder; }
  #magazine-list__update-modal .modal-body .magazine-list__isfree-label {
    margin-bottom: 0; }
  #magazine-list__update-modal .modal-body .magazine-list__price-box {
    max-width: 325px;
    margin-top: 8px;
    padding: 16px;
    background: #eaeaea; }
    #magazine-list__update-modal .modal-body .magazine-list__price-box .magazine-list__price-item {
      padding: 16px;
      background: #fafafa; }
      #magazine-list__update-modal .modal-body .magazine-list__price-box .magazine-list__price-item:not(:last-child) {
        margin-bottom: 8px; }
      #magazine-list__update-modal .modal-body .magazine-list__price-box .magazine-list__price-item .magazine-list__price-input {
        display: flex; }
        #magazine-list__update-modal .modal-body .magazine-list__price-box .magazine-list__price-item .magazine-list__price-input input[type="number"],
        #magazine-list__update-modal .modal-body .magazine-list__price-box .magazine-list__price-item .magazine-list__price-input select {
          flex: 1;
          min-width: 0 !important;
          border-radius: 24px 0 0 24px; }
        #magazine-list__update-modal .modal-body .magazine-list__price-box .magazine-list__price-item .magazine-list__price-input input[name="isUse"] {
          margin-right: 8px;
          margin-top: 8px; }
        #magazine-list__update-modal .modal-body .magazine-list__price-box .magazine-list__price-item .magazine-list__price-input .magazine-list__currency {
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 0 24px 24px 0;
          padding: 0 8px;
          background: #eaeaea; }
    #magazine-list__update-modal .modal-body .magazine-list__price-box .magazine-list__apple-price select {
      width: 100%; }
  #magazine-list__update-modal .modal-body .magazine-list__subscription {
    display: none; }
  #magazine-list__update-modal .modal-body .magazine-list__appcode-section select {
    min-width: 0;
    border-radius: 24px 0 0 24px; }
  #magazine-list__update-modal .modal-body .magazine-list__appcode-section .magazine-list__data {
    width: 100%; }
    #magazine-list__update-modal .modal-body .magazine-list__appcode-section .magazine-list__data .magazine-list__value .form-group {
      display: flex; }
      #magazine-list__update-modal .modal-body .magazine-list__appcode-section .magazine-list__data .magazine-list__value .form-group select {
        flex: 1; }
    #magazine-list__update-modal .modal-body .magazine-list__appcode-section .magazine-list__data #magazine-list__new-appcode {
      height: 40px;
      border: 0;
      background: #eaeaea; }
    #magazine-list__update-modal .modal-body .magazine-list__appcode-section .magazine-list__data .magazine-list__add-appcode-btn {
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40px;
      height: 40px;
      border: 1px solid #ffd44c;
      border-radius: 0 24px 24px 0;
      vertical-align: top;
      font-weight: bolder;
      background: #ffd44c; }
      #magazine-list__update-modal .modal-body .magazine-list__appcode-section .magazine-list__data .magazine-list__add-appcode-btn:hover {
        border-color: #eaeaea;
        background: #eaeaea; }
      #magazine-list__update-modal .modal-body .magazine-list__appcode-section .magazine-list__data .magazine-list__add-appcode-btn i {
        margin: 0; }
    #magazine-list__update-modal .modal-body .magazine-list__appcode-section .magazine-list__data .magazine-list__appcode-item {
      display: flex;
      margin-top: 8px; }
      #magazine-list__update-modal .modal-body .magazine-list__appcode-section .magazine-list__data .magazine-list__appcode-item .magazine-list__appcode-name {
        display: flex;
        align-items: center;
        flex: 1;
        height: 40px;
        border-radius: 24px 0 0 24px;
        padding: 0 16px;
        background: #fafafa; }
      #magazine-list__update-modal .modal-body .magazine-list__appcode-section .magazine-list__data .magazine-list__appcode-item .magazine-list__remove-appcode-btn {
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        border-radius: 0 24px 24px 0;
        text-decoration: none;
        color: black;
        background: #eaeaea; }
        #magazine-list__update-modal .modal-body .magazine-list__appcode-section .magazine-list__data .magazine-list__appcode-item .magazine-list__remove-appcode-btn:hover {
          background: #f8d7da; }
        #magazine-list__update-modal .modal-body .magazine-list__appcode-section .magazine-list__data .magazine-list__appcode-item .magazine-list__remove-appcode-btn i {
          margin: 0; }
  #magazine-list__update-modal .modal-body .magazine-list__submit {
    margin: 16px; }
    #magazine-list__update-modal .modal-body .magazine-list__submit .magazine-list__submit-btn {
      width: 100%;
      border: 0;
      border-radius: 24px;
      padding: 8px;
      font-size: 18px;
      font-weight: bolder;
      background: #ffd44c; }
      #magazine-list__update-modal .modal-body .magazine-list__submit .magazine-list__submit-btn:hover {
        background: #eaeaea; }

#magazine-list__buffet-modal.show {
  display: flex !important; }

#magazine-list__remove-modal.show {
  display: flex !important; }

#magazine-list__remove-modal .modal-body {
  width: 300px; }

#magazine-list__remove-modal .btn {
  border: 0;
  color: black; }
  #magazine-list__remove-modal .btn:hover {
    background: #eaeaea; }

#magazine-list__remove-modal .btn-accept {
  background: #ffd44c; }

#magazine-list__remove-modal .btn-decline {
  background: white;
  border: 1px solid #eaeaea; }

#magazine-list__remove-header-modal.show {
  display: flex !important; }

#magazine-list__remove-header-modal .modal-dialog {
  width: 500px; }

#magazine-list__remove-header-modal .modal-body .content-detail__remove-reason {
  width: 100%; }

#magazine-list__remove-header-modal .btn {
  border: 0;
  color: black; }
  #magazine-list__remove-header-modal .btn:hover {
    background: #eaeaea; }

#magazine-list__remove-header-modal .btn-accept {
  background: #ffd44c; }

#magazine-list__remove-header-modal .btn-decline {
  background: white;
  border: 1px solid #eaeaea; }

.warn1 {
  background: rgba(0, 0, 0, 0.3); }
  .warn1 .warn {
    margin-left: 0.5rem;
    margin-right: 0.5rem; }

.txtRight {
  padding: 0.1rem;
  text-align: right;
  display: block;
  margin-top: 0.5rem; }
  @media (pointer: none), (pointer: coarse) {
    .txtRight {
      text-align: center !important; } }
  .txtRight .txt {
    font-size: 14px;
    padding-right: 1rem; }

.shadow {
  box-shadow: 5px 10px 18px lightsteelblue; }

.magazine-list__card-grid {
  display: flex;
  justify-content: center; }

.magazine-list__card {
  position: relative;
  padding-top: calc(4 / 3 * 100%);
  width: 100%;
  height: 100%; }
  .magazine-list__card .magazine-list__manage-btn-group.show .magazine-list__card-manage-btn {
    color: black;
    background: #ffd44c; }
  .magazine-list__card [id*="magazine-list__manage-btn"] {
    padding: 16px 16px 0 0; }
    .magazine-list__card [id*="magazine-list__manage-btn"]:hover {
      color: #ffd44c; }
  .magazine-list__card .magazine-list__dropdown-menu {
    border-radius: 0 !important; }
    .magazine-list__card .magazine-list__dropdown-menu a:hover {
      background: #ffd44c; }
  .magazine-list__card .magazine-list__card-cover-box {
    position: absolute;
    top: 0;
    z-index: 0;
    overflow: hidden;
    width: 100%; }
    .magazine-list__card .magazine-list__card-cover-box .magazine-list__card-cover {
      padding-top: calc(4 / 3 * 100%);
      width: 100%;
      height: 100%;
      transform: scale(1);
      transition: 0.3s ease-in-out;
      filter: blur(2px);
      background-size: cover !important;
      background-position: top center !important; }
      .magazine-list__card .magazine-list__card-cover-box .magazine-list__card-cover.inactive {
        filter: blur(2px) grayscale(100%); }
  .magazine-list__card .magazine-list__card-inner {
    position: absolute;
    top: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); }
    .magazine-list__card .magazine-list__card-inner:hover + .magazine-list__card-cover-box .magazine-list__card-cover {
      transform: scale(1.2);
      filter: blur(0); }
  .magazine-list__card .magazine-list__card-header {
    flex: 1;
    display: flex;
    color: white; }
    .magazine-list__card .magazine-list__card-header .magazine-list__card-title {
      cursor: pointer;
      flex: 1;
      padding: 16px;
      font-size: 24px;
      font-weight: bolder; }
  .magazine-list__card .magazine-list__card-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: calc(100% - 32px);
    display: flex;
    margin: 0 16px 16px 16px;
    color: black; }
    .magazine-list__card .magazine-list__card-footer .magazine-list__card-list-btn {
      flex: 1;
      display: flex;
      align-items: center;
      padding: 8px 16px;
      background: rgba(255, 255, 255, 0.6); }
      .magazine-list__card .magazine-list__card-footer .magazine-list__card-list-btn.inactive {
        color: white;
        background: transparent; }
    .magazine-list__card .magazine-list__card-footer .magazine-list__card-manage-btn {
      cursor: pointer;
      padding: 8px;
      color: black;
      background: white; }
      .magazine-list__card .magazine-list__card-footer .magazine-list__card-manage-btn:hover {
        color: black;
        background: #ffd44c; }
    .magazine-list__card .magazine-list__card-footer .magazine-list__card-inactive {
      flex: 1;
      padding: 8px;
      text-align: center;
      color: white; }

#magazine-list .modal-dialog {
  overflow-y: initial !important; }

#magazine-list .modal-body {
  max-height: 900px;
  overflow-y: auto; }

.manageText {
  color: #707070;
  font-weight: normal;
  font-size: 18px;
  padding-top: 0.5rem; }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

@media (min-width: 768px) {
  .cate-box .cate-box__main-item-grid {
    padding-top: calc(1/4 * 100%); } }

@media (max-width: 767px) {
  .cate-box .cate-box__main-item-grid {
    padding-top: calc(1/3 * 100%); } }

@media (max-width: 575px) {
  .cate-box .col-xs-6 {
    width: 50%; }
  .cate-box .cate-box__main-item-grid {
    padding-top: calc(1/2 * 100%); } }

.cate-box {
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 24px; }
  .cate-box .cate-box__header {
    z-index: 1;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    border-bottom: 1px solid gray;
    padding-bottom: 8px; }
    .cate-box .cate-box__header .cate-box__category {
      flex: 1;
      text-align: right; }
  .cate-box .cate-box__body {
    flex: 1;
    overflow: auto; }
  .cate-box .linkTitle:hover {
    color: black !important;
    border-color: black !important; }
  .cate-box .linkTitle {
    color: black !important; }

.cate-box__main-item-grid {
  height: 0; }
  .cate-box__main-item-grid .cate-box__main-item-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 8px;
    padding-top: 16px;
    padding-bottom: 0; }
  .cate-box__main-item-grid .cate-box__main-item {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    padding: 8px;
    align-items: center;
    text-align: center;
    font-size: 16px; }
    .cate-box__main-item-grid .cate-box__main-item:hover .cate-box__main-item-icon {
      background: #ffd44c; }
    .cate-box__main-item-grid .cate-box__main-item .cate-box__main-item-icon {
      box-sizing: content-box;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
      height: 50%;
      margin-bottom: 8px;
      border: 1px solid black;
      border-radius: 50%; }
    .cate-box__main-item-grid .cate-box__main-item i {
      font-size: 24px; }
    .cate-box__main-item-grid .cate-box__main-item .cate-box__main-item-title {
      font-size: 16px; }

.cate-box__sub-cate-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%; }
  .cate-box__sub-cate-box .cate-box__sub-cate-title {
    display: flex;
    margin-top: 8px; }
    .cate-box__sub-cate-box .cate-box__sub-cate-title i {
      margin-left: 16px; }
  .cate-box__sub-cate-box .cate-box__sub-cate-title {
    z-index: 1; }
  .cate-box__sub-cate-box .cate-box__sub-cate-list {
    z-index: 1;
    flex: 1;
    overflow: auto;
    padding-left: 24px; }
  .cate-box__sub-cate-box .cate-box__sub-item-box {
    cursor: pointer;
    display: inline-block;
    margin-top: 16px;
    font-size: 18px; }
    .cate-box__sub-cate-box .cate-box__sub-item-box:hover {
      text-decoration: underline; }
  .cate-box__sub-cate-box .cate-box__sub-cate-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffd44c;
    border-radius: 50%;
    padding-top: 100%;
    width: 100%;
    height: 0;
    top: 0;
    transform: translate(25%, 25%);
    opacity: 0.125; }
    .cate-box__sub-cate-box .cate-box__sub-cate-icon i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 25vh; }
  .cate-box__sub-cate-box .cate-box__back-btn {
    cursor: pointer;
    z-index: 1;
    margin-top: 16px;
    font-size: 18px;
    font-weight: bolder; }
    .cate-box__sub-cate-box .cate-box__back-btn:hover {
      text-decoration: underline; }

.backBox {
  font-weight: bold;
  cursor: pointer;
  font-size: 20px; }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

.categories {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%; }

.categories__input {
  cursor: pointer;
  height: 40px;
  width: 50%;
  border: 2px solid black;
  padding: 24px 16px;
  font-size: 18px;
  text-align: center;
  background: transparent; }
  .categories__input:hover {
    background: #ffd44c; }
  .categories__input:focus {
    outline: none; }

#categories__modal.show .modal-dialog {
  margin: 0 auto;
  max-width: 720px;
  height: 100%; }

#categories__modal.show .modal-content {
  height: 100%; }

#categories__modal.show .modal-body {
  height: 100%;
  padding: 0; }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

@media (max-width: 1199px) {
  .content-detail__right-box {
    width: 100% !important; } }

@media (max-width: 991px) {
  .content-detail__cover {
    padding-top: calc((4 / 3) * 288px) !important; } }

@media (max-width: 767px) {
  .content-detail__side-box {
    width: 100% !important; } }

.content__page {
  flex: 1; }

.content-detail__box .alert {
  text-align: center; }
  .content-detail__box .alert i {
    margin-right: 8px; }

.content-detail__box .content-detail__status {
  padding: 16px;
  text-align: center;
  background: #fafafa; }

.content-detail__box .content-detail__btn {
  cursor: pointer;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  border-top: 1px solid #eaeaea;
  padding: 8px 16px;
  text-decoration: none;
  color: black;
  white-space: nowrap; }
  .content-detail__box .content-detail__btn:hover {
    background: #eaeaea; }
  .content-detail__box .content-detail__btn i {
    margin-right: 8px; }
  .content-detail__box .content-detail__btn .fa-chevron-right {
    margin-left: 8px; }

.content-detail__box .content-detail__top-btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly; }
  .content-detail__box .content-detail__top-btn .content-detail__btn:not(:first-child) {
    border-left: 0; }
  .content-detail__box .content-detail__top-btn .content-detail__submit {
    border: 1px solid #ffd44c;
    font-weight: bolder;
    background: #ffd44c; }
    .content-detail__box .content-detail__top-btn .content-detail__submit:hover {
      border: 1px solid #eaeaea;
      background: #eaeaea; }
  .content-detail__box .content-detail__top-btn .content-detail__pending-release {
    cursor: text;
    border: 1px solid #ffd44c;
    background: #ffd44c; }

.content-detail__box .content-detail__info {
  margin-top: 24px; }
  .content-detail__box .content-detail__info .content-detail__side-box {
    width: 288px;
    margin: 0 auto; }
    .content-detail__box .content-detail__info .content-detail__side-box .content-detail__cover {
      position: relative;
      width: 100%;
      margin: 0 auto;
      padding-top: calc((4 / 3) * 100%); }
      .content-detail__box .content-detail__info .content-detail__side-box .content-detail__cover img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 100%;
        max-height: 100%; }
    .content-detail__box .content-detail__info .content-detail__side-box .content-detail__side-btn {
      display: flex;
      flex-direction: column;
      margin-bottom: 24px;
      font-size: 14px;
      background: white; }
  .content-detail__box .content-detail__info .content-detail__right-box {
    width: 640px; }
  .content-detail__box .content-detail__info .content-detail__meta {
    margin-bottom: 24px;
    padding: 0;
    padding-bottom: 24px; }
    .content-detail__box .content-detail__info .content-detail__meta .content-detail__meta-title {
      padding: 8px 24px;
      font-size: 18px;
      font-weight: bolder;
      background: #eaeaea; }
    .content-detail__box .content-detail__info .content-detail__meta .content-detail__data {
      margin-top: 16px;
      padding: 0 24px; }
      .content-detail__box .content-detail__info .content-detail__meta .content-detail__data .content-detail__field {
        font-size: 14px;
        font-weight: bolder; }
        .content-detail__box .content-detail__info .content-detail__meta .content-detail__data .content-detail__field i {
          margin-right: 8px; }
    .content-detail__box .content-detail__info .content-detail__meta .content-detail__test-data {
      margin: 0 24px;
      margin-top: 16px;
      padding: 8px;
      background: #ffd44c; }
    .content-detail__box .content-detail__info .content-detail__meta .content-detail__price-item {
      margin-bottom: 8px; }
      .content-detail__box .content-detail__info .content-detail__meta .content-detail__price-item:last-child {
        margin-bottom: 0; }
  .content-detail__box .content-detail__info .content-detail__sale-date {
    margin-bottom: 0 !important; }

#content-detail__affiliate-modal.show {
  display: flex !important; }

#content-detail__affiliate-modal .modal-body {
  padding: 24px; }
  #content-detail__affiliate-modal .modal-body textarea,
  #content-detail__affiliate-modal .modal-body input {
    width: 100%;
    border: 0;
    padding: 8px;
    font-size: 14px;
    background: #eaeaea; }
  #content-detail__affiliate-modal .modal-body .content-detail__affiliate-link {
    margin-top: 16px; }

#content-detail__test-book-modal.show {
  display: flex !important; }

#content-detail__remove-modal.show {
  display: flex !important; }

#content-detail__remove-modal .modal-dialog {
  width: 278px; }

#content-detail__remove-modal .modal-body .content-detail__remove-reason {
  width: 100%; }

#content-detail__remove-modal .btn {
  border: 0;
  color: black; }
  #content-detail__remove-modal .btn:hover {
    background: #eaeaea; }

#content-detail__remove-modal .btn-accept {
  background: #ffd44c; }

#content-detail__remove-modal .btn-decline {
  background: white;
  border: 1px solid #eaeaea; }

#content-detail-release__remove-modal.show {
  display: flex !important; }

#content-detail-release__remove-modal .modal-body .content-detail__remove-reason {
  width: 100%; }

#content-detail-release__remove-modal .btn {
  border: 0;
  color: black; }
  #content-detail-release__remove-modal .btn:hover {
    background: #eaeaea; }

#content-detail-release__remove-modal .btn-accept {
  background: #ffd44c; }

#content-detail-release__remove-modal .btn-decline {
  background: white;
  border: 1px solid #eaeaea; }

div[disabled],
a[disabled] {
  pointer-events: none;
  opacity: 0.7; }

.shadow {
  box-shadow: 5px 10px 18px lightsteelblue !important; }

.shadowGray {
  box-shadow: 5px 10px 18px lightgrey !important; }

.bg {
  background-color: white !important; }

.top {
  margin-top: 1rem; }

@media (max-width: 1199px) {
  .content-wizard__status-icon {
    width: 80px !important;
    height: 80px !important; }
  .content-wizard__next-icon {
    display: none !important; } }

.bgManage {
  background-repeat: no-repeat !important;
  background-size: 110px 110px !important; }

.content-wizard__status {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin-bottom: 24px; }
  .content-wizard__status .content-wizard__status-item--active {
    font-weight: bolder; }
    .content-wizard__status .content-wizard__status-item--active .content-wizard__status-icon {
      background: #ffd44c !important; }
  .content-wizard__status .content-wizard__status-item--active {
    font-weight: bolder; }
    @media only screen and (min-device-width: 768px) {
      .content-wizard__status .content-wizard__status-item--active .content-wizard__status-icon1 {
        background-image: url("/static/image/flow/ic_createbook_02.png") !important; }
      .content-wizard__status .content-wizard__status-item--active .content-wizard__status-icon2 {
        background-image: url("/static/image/flow/ic_test_02.png") !important; }
      .content-wizard__status .content-wizard__status-item--active .content-wizard__status-icon3 {
        background-image: url("/static/image/flow/ic_comfirm_02.png") !important; }
      .content-wizard__status .content-wizard__status-item--active .content-wizard__status-icon4 {
        background-image: url("/static/image/flow/ic_wait_02.png") !important; }
      .content-wizard__status .content-wizard__status-item--active .content-wizard__status-icon5 {
        background-image: url("/static/image/flow/ic_finished_02.png") !important; } }
    @media (pointer: none), (pointer: coarse) {
      .content-wizard__status .content-wizard__status-item--active .content-wizard__status-icon1 {
        background-image: "" !important; }
      .content-wizard__status .content-wizard__status-item--active .content-wizard__status-icon2 {
        background-image: "" !important; }
      .content-wizard__status .content-wizard__status-item--active .content-wizard__status-icon3 {
        background-image: "" !important; }
      .content-wizard__status .content-wizard__status-item--active .content-wizard__status-icon4 {
        background-image: "" !important; }
      .content-wizard__status .content-wizard__status-item--active .content-wizard__status-icon5 {
        background-image: "" !important; } }
  .content-wizard__status .content-wizard__status-item {
    display: flex;
    justify-content: space-evenly; }
    @media only screen and (min-device-width: 768px) {
      .content-wizard__status .content-wizard__status-item {
        min-width: 120px;
        margin-bottom: 16px; } }
    .content-wizard__status .content-wizard__status-item div {
      display: flex;
      flex-direction: column;
      align-items: center; }
      @media (pointer: none), (pointer: coarse) {
        .content-wizard__status .content-wizard__status-item div .content-wizard__status-icon1 {
          margin-bottom: 8px;
          font-size: 30px;
          background-image: "" !important; }
        .content-wizard__status .content-wizard__status-item div .content-wizard__status-icon2 {
          margin-bottom: 8px;
          font-size: 30px;
          background-image: "" !important; }
        .content-wizard__status .content-wizard__status-item div .content-wizard__status-icon3 {
          margin-bottom: 8px;
          font-size: 30px;
          background-image: "" !important; }
        .content-wizard__status .content-wizard__status-item div .content-wizard__status-icon4 {
          margin-bottom: 8px;
          font-size: 30px;
          background-image: "" !important; }
        .content-wizard__status .content-wizard__status-item div .content-wizard__status-icon5 {
          margin-bottom: 8px;
          font-size: 30px;
          background-image: "" !important; } }
      @media only screen and (min-device-width: 768px) {
        .content-wizard__status .content-wizard__status-item div .content-wizard__status-icon {
          width: 110px;
          height: 110px;
          margin-bottom: 8px;
          font-size: 40px;
          background: #eaeaea; }
        .content-wizard__status .content-wizard__status-item div .content-wizard__status-icon1 {
          width: 110px;
          height: 110px;
          margin-bottom: 8px;
          font-size: 40px;
          background-image: url("/static/image/flow/ic_createbook_01.png"); }
        .content-wizard__status .content-wizard__status-item div .content-wizard__status-icon2 {
          width: 110px;
          height: 110px;
          margin-bottom: 8px;
          font-size: 40px;
          background-image: url("/static/image/flow/ic_test_01.png"); }
        .content-wizard__status .content-wizard__status-item div .content-wizard__status-icon3 {
          width: 110px;
          height: 110px;
          margin-bottom: 8px;
          font-size: 40px;
          background-image: url("/static/image/flow/ic_comfirm_01.png"); }
        .content-wizard__status .content-wizard__status-item div .content-wizard__status-icon4 {
          width: 110px;
          height: 110px;
          margin-bottom: 8px;
          font-size: 40px;
          background-image: url("/static/image/flow/ic_wait_01.png"); }
        .content-wizard__status .content-wizard__status-item div .content-wizard__status-icon5 {
          width: 110px;
          height: 110px;
          margin-bottom: 8px;
          font-size: 40px;
          background-image: url("/static/image/flow/ic_finished_01.png"); }
        .content-wizard__status .content-wizard__status-item div .content-wizard__status-title {
          text-align: center;
          font-size: 18px; } }
  .content-wizard__status .content-wizard__next-icon {
    display: flex;
    align-items: center;
    height: 120px;
    margin-top: 24px;
    padding: 0 32px;
    font-size: 48px;
    color: gray; }

.manageRole .btnDetail {
  color: black !important;
  cursor: pointer !important;
  display: inline-block !important;
  text-align: center !important;
  border-radius: 24px !important;
  padding: 6px 19px !important;
  background: #ffd44c !important;
  border-color: #ffd44c !important; }

.manageRole input[type="text"] {
  border-radius: 24px;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.manageRole .textInput {
  display: block;
  text-align: right; }
  @media (pointer: none), (pointer: coarse) {
    .manageRole .textInput {
      text-align: left; } }

.manageRole .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.manageRole .MuiTableCell-head {
  background: #ffd44c !important;
  font-size: 16px !important;
  font-family: "Kanit", sans-serif !important;
  color: black !important; }

.manageRole .colorHeader {
  background: #f0e68c !important; }

.manageRole .shadow {
  box-shadow: 5px 10px 18px lightsteelblue !important; }

input[type="text"] {
  border-radius: 24px;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.btnSubmitPopup {
  background-color: #ffd44c !important;
  color: black !important;
  border-color: #ffd44c !important; }

.btnSecondaryPopup {
  color: black;
  background-color: #ffd44c !important;
  border-color: #ffd44c !important; }

.btnSubmitPopup:hover {
  color: #fff !important; }

.manual__box {
  display: flex;
  flex-direction: column;
  padding-top: 24px; }
  .manual__box .manual__title {
    text-align: center;
    margin-bottom: 48px; }
  .manual__box .title {
    width: 100%;
    text-align: center;
    vertical-align: top;
    margin-bottom: 24px;
    font-size: 2rem;
    border-bottom: 2px #aaaaaa solid;
    letter-spacing: -1px; }
  .manual__box .cardInformation {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #e1e6f1;
    border-radius: 3px;
    padding: 48px 32px;
    margin-bottom: 1.5rem; }
  .manual__box .card {
    background-color: #eff1f9 !important; }
  .manual__box .bgHeader {
    background-color: #ffd44c !important; }
  .manual__box .btnDetail {
    color: black;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    border-radius: 24px;
    padding: 6px 19px;
    background: #ffd44c;
    border-color: #ffd44c;
    max-width: 153px;
    margin-bottom: 1rem; }

.manual__item {
  display: flex;
  flex-direction: column;
  padding-top: 24px; }
  .manual__item .manual__title {
    text-align: center;
    margin-bottom: 48px; }
  .manual__item .title {
    width: 100%;
    text-align: center;
    vertical-align: top;
    margin-bottom: 24px;
    font-size: 2rem;
    border-bottom: 2px #aaaaaa solid;
    letter-spacing: -1px; }
  .manual__item .cardInformation {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #e1e6f1;
    border-radius: 3px;
    padding: 48px 32px;
    margin-bottom: 1.5rem; }
  .manual__item .card {
    background-color: #eff1f9 !important; }
  .manual__item .bgHeader {
    background-color: #ffd44c !important; }
  .manual__item .btnDetail {
    color: black;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    border-radius: 24px;
    padding: 6px 19px;
    background: #ffd44c;
    border-color: #ffd44c;
    max-width: 153px;
    margin-bottom: 1rem; }
  .manual__item #affiliate-content {
    border: dotted 1px #dddddd;
    padding: 16px 20px 16px 20px;
    background-color: #fefdcd;
    font-size: 1.1em;
    color: #555555; }
  .manual__item #affiliate-intro-message {
    font-size: 1em; }
  .manual__item .affiliate-title {
    margin-bottom: 5px; }
  .manual__item .affiliate-title + p {
    padding-left: 30px; }
  .manual__item .affiliate-title {
    margin-bottom: 5px; }
  .manual__item .img-responsive {
    max-width: 100%;
    height: auto; }
  .manual__item .img-report {
    width: 200px;
    align-content: center;
    display: block;
    margin: auto; }
  .manual__item .img-report2 {
    align-content: center;
    display: block;
    margin: auto; }
  .manual__item .img-report3 {
    width: 400px;
    height: 637.06px; }

.marketingChoice .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.marketingChoice .title {
  width: 100%;
  text-align: center;
  vertical-align: top;
  margin-bottom: 24px;
  font-size: 2rem;
  border-bottom: 2px #aaaaaa solid;
  letter-spacing: -1px; }

.marketingChoice .text-container {
  margin: 10px 0; }

.privacyPolicy .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.privacyPolicy .title {
  width: 100%;
  text-align: center;
  vertical-align: top;
  margin-bottom: 24px;
  font-size: 2rem;
  border-bottom: 2px #aaaaaa solid;
  letter-spacing: -1px; }

.privacyPolicy .font-size-22 {
  font-size: 1em; }


.profitSharing .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.profitSharing .title {
  width: 100%;
  text-align: center;
  vertical-align: top;
  margin-bottom: 24px;
  font-size: 2rem;
  border-bottom: 2px #aaaaaa solid;
  letter-spacing: -1px; }

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

.profitSharing .box--70 {
  margin: 0 auto;
  width: 70%; }

.profitSharing .table--medium {
  width: 70%; }

.profitSharing .table--center {
  margin: 0 auto; }

.profitSharing .table-bordered {
  border: 1px solid #ddd; }

.profitSharing #table--payProfit td {
  padding-bottom: 20px; }

.profitSharing .tr--bottomOffset td {
  padding-bottom: 10px; }

.profitSharing .td--rightOffset {
  padding-right: 10px; }

.profitSharing .td--top {
  vertical-align: top; }

.profitSharing .td--left {
  text-align: left; }

.profitSharing .img-responsive {
  max-width: 100%;
  height: auto;
  width: 1000px; }

.profitSharing p {
  padding-top: 0rem !important; }

.profitSharing .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.profitSharing .title {
  width: 100%;
  text-align: center;
  vertical-align: top;
  margin-bottom: 24px;
  font-size: 2rem;
  border-bottom: 2px #aaaaaa solid;
  letter-spacing: -1px; }

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

.profitSharing .box--70 {
  margin: 0 auto;
  width: 70%; }

.profitSharing .table--medium {
  width: 70%; }

.profitSharing .table--center {
  margin: 0 auto; }

.profitSharing .table-bordered {
  border: 1px solid #ddd; }

.profitSharing #table--payProfit td {
  padding-bottom: 20px; }

.profitSharing .tr--bottomOffset td {
  padding-bottom: 10px; }

.profitSharing .td--rightOffset {
  padding-right: 10px; }

.profitSharing .td--top {
  vertical-align: top; }

.profitSharing .td--left {
  text-align: left; }

.profitSharing .img-responsive {
  max-width: 100%;
  height: auto;
  width: 1000px; }

.profitSharing .hightLight {
  text-align: center;
  color: black;
  background: #ffd44c; }

.profitSharing .hightLight2 {
  text-align: center;
  color: black;
  background: #fae39c; }

.profitSharing .imgBuffets {
  width: 70% !important; }

.custom-control {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
  color-adjust: exact; }

.custom-control-inline {
  display: inline-flex;
  margin-right: 1rem; }

.custom-control-input {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 1rem;
  height: 1.25rem;
  opacity: 0; }
  .custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #007bff;
    background-color: #007bff; }
  .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
  .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #80bdff; }
  .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    color: #fff;
    background-color: #b3d7ff;
    border-color: #b3d7ff; }
  .custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label {
    color: #6c757d; }
    .custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before {
      background-color: #e9ecef; }

.custom-control-label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top; }
  .custom-control-label::before {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: #adb5bd solid 1px; }
  .custom-control-label::after {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: 50% / 50% 50% no-repeat; }

.custom-checkbox .custom-control-label::before {
  border-radius: 0.25rem; }

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e"); }

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: #007bff;
  background-color: #007bff; }

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e"); }

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5); }

.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5); }

.custom-radio .custom-control-label::before {
  border-radius: 50%; }

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }

.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5); }

.custom-switch {
  padding-left: 2.25rem; }
  .custom-switch .custom-control-label::before {
    left: -2.25rem;
    width: 1.75rem;
    pointer-events: all;
    border-radius: 0.5rem; }
  .custom-switch .custom-control-label::after {
    top: calc(0.25rem + 2px);
    left: calc(-2.25rem + 2px);
    width: calc(1rem - 4px);
    height: calc(1rem - 4px);
    background-color: #adb5bd;
    border-radius: 0.5rem;
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
    @media (prefers-reduced-motion: reduce) {
      .custom-switch .custom-control-label::after {
        transition: none; } }
  .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #fff;
    transform: translateX(0.75rem); }
  .custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(0, 123, 255, 0.5); }

.custom-select {
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  vertical-align: middle;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  appearance: none; }
  .custom-select:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
    .custom-select:focus::-ms-value {
      color: #495057;
      background-color: #fff; }
  .custom-select[multiple], .custom-select[size]:not([size="1"]) {
    height: auto;
    padding-right: 0.75rem;
    background-image: none; }
  .custom-select:disabled {
    color: #6c757d;
    background-color: #e9ecef; }
  .custom-select::-ms-expand {
    display: none; }
  .custom-select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #495057; }

.custom-select-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem; }

.custom-select-lg {
  height: calc(1.5em + 1rem + 2px);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 1.25rem; }

.custom-file {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin-bottom: 0; }

.custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin: 0;
  overflow: hidden;
  opacity: 0; }
  .custom-file-input:focus ~ .custom-file-label {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
  .custom-file-input[disabled] ~ .custom-file-label,
  .custom-file-input:disabled ~ .custom-file-label {
    background-color: #e9ecef; }
  .custom-file-input:lang(en) ~ .custom-file-label::after {
    content: "Browse"; }
  .custom-file-input ~ .custom-file-label[data-browse]::after {
    content: attr(data-browse); }

.custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  overflow: hidden;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem; }
  .custom-file-label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    height: calc(1.5em + 0.75rem);
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    color: #495057;
    content: "Browse";
    background-color: #e9ecef;
    border-left: inherit;
    border-radius: 0 0.25rem 0.25rem 0; }

.custom-range {
  width: 100%;
  height: 1.4rem;
  padding: 0;
  background-color: transparent;
  appearance: none; }
  .custom-range:focus {
    outline: 0; }
    .custom-range:focus::-webkit-slider-thumb {
      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
    .custom-range:focus::-moz-range-thumb {
      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
    .custom-range:focus::-ms-thumb {
      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
  .custom-range::-moz-focus-outer {
    border: 0; }
  .custom-range::-webkit-slider-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: -0.25rem;
    background-color: #007bff;
    border: 0;
    border-radius: 1rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none; }
    @media (prefers-reduced-motion: reduce) {
      .custom-range::-webkit-slider-thumb {
        transition: none; } }
    .custom-range::-webkit-slider-thumb:active {
      background-color: #b3d7ff; }
  .custom-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: #dee2e6;
    border-color: transparent;
    border-radius: 1rem; }
  .custom-range::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    background-color: #007bff;
    border: 0;
    border-radius: 1rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none; }
    @media (prefers-reduced-motion: reduce) {
      .custom-range::-moz-range-thumb {
        transition: none; } }
    .custom-range::-moz-range-thumb:active {
      background-color: #b3d7ff; }
  .custom-range::-moz-range-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: #dee2e6;
    border-color: transparent;
    border-radius: 1rem; }
  .custom-range::-ms-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: 0;
    margin-right: 0.2rem;
    margin-left: 0.2rem;
    background-color: #007bff;
    border: 0;
    border-radius: 1rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none; }
    @media (prefers-reduced-motion: reduce) {
      .custom-range::-ms-thumb {
        transition: none; } }
    .custom-range::-ms-thumb:active {
      background-color: #b3d7ff; }
  .custom-range::-ms-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: transparent;
    border-color: transparent;
    border-width: 0.5rem; }
  .custom-range::-ms-fill-lower {
    background-color: #dee2e6;
    border-radius: 1rem; }
  .custom-range::-ms-fill-upper {
    margin-right: 15px;
    background-color: #dee2e6;
    border-radius: 1rem; }
  .custom-range:disabled::-webkit-slider-thumb {
    background-color: #adb5bd; }
  .custom-range:disabled::-webkit-slider-runnable-track {
    cursor: default; }
  .custom-range:disabled::-moz-range-thumb {
    background-color: #adb5bd; }
  .custom-range:disabled::-moz-range-track {
    cursor: default; }
  .custom-range:disabled::-ms-thumb {
    background-color: #adb5bd; }

.custom-control-label::before,
.custom-file-label,
.custom-select {
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
  @media (prefers-reduced-motion: reduce) {
    .custom-control-label::before,
    .custom-file-label,
    .custom-select {
      transition: none; } }

.campaignBookFairsTop {
  padding-top: 0rem !important; }

@media (max-width: 767px) {
  .campaignBookFairsTop {
    padding-top: 1rem !important; } }

.campaignBookFairs {
  font-family: "Kanit";
  background-color: white; }
  .campaignBookFairs ul {
    padding-left: 1rem !important; }
  .campaignBookFairs > .promotionBanner {
    padding-top: 1rem;
    margin-bottom: 1rem; }
    .campaignBookFairs > .promotionBanner > .promotionBannerImage {
      width: 100%; }
  .campaignBookFairs > .promotionHeader {
    margin-bottom: 0 !important; }
    @media (min-width: 768px) {
      .campaignBookFairs > .promotionHeader {
        margin-bottom: 1rem; } }
    .campaignBookFairs > .promotionHeader .promotionTitle {
      font-weight: bold;
      font-size: 26px; }
      @media (max-width: 767px) {
        .campaignBookFairs > .promotionHeader .promotionTitle {
          font-size: 20px !important; } }
      @media (min-width: 768px) {
        .campaignBookFairs > .promotionHeader .promotionTitle {
          font-size: 26px !important; } }
      @media (min-width: 992px) {
        .campaignBookFairs > .promotionHeader .promotionTitle {
          font-size: 26px !important; } }
      .campaignBookFairs > .promotionHeader .promotionTitle > .highlight {
        color: #ff3066; }
    .campaignBookFairs > .promotionHeader .promotionSubTitle {
      text-align: left;
      font-size: 22px;
      text-indent: 1.5em !important;
      color: black; }
      @media (max-width: 767px) {
        .campaignBookFairs > .promotionHeader .promotionSubTitle {
          font-size: 14px; } }
      @media (min-width: 576px) {
        .campaignBookFairs > .promotionHeader .promotionSubTitle {
          font-size: 14px; } }
      @media (min-width: 768px) {
        .campaignBookFairs > .promotionHeader .promotionSubTitle {
          font-size: 22px; } }
      @media (min-width: 992px) {
        .campaignBookFairs > .promotionHeader .promotionSubTitle {
          font-size: 22px; } }
  .campaignBookFairs > .promotionDetail {
    margin-bottom: 1rem; }
    .campaignBookFairs > .promotionDetail > .promotionDescription {
      margin-bottom: 0.5rem; }
      .campaignBookFairs > .promotionDetail > .promotionDescription > .text {
        font-size: 22px; }
        @media (max-width: 767px) {
          .campaignBookFairs > .promotionDetail > .promotionDescription > .text {
            font-size: 14px; } }
    .campaignBookFairs > .promotionDetail > .promotionDescriptionRemark {
      margin-bottom: 1rem; }
      .campaignBookFairs > .promotionDetail > .promotionDescriptionRemark > .text {
        color: #9A9A9A;
        font-size: 0.9rem; }
        @media (min-width: 576px) {
          .campaignBookFairs > .promotionDetail > .promotionDescriptionRemark > .text {
            font-size: 1rem; } }
        @media (min-width: 768px) {
          .campaignBookFairs > .promotionDetail > .promotionDescriptionRemark > .text {
            font-size: 1.1rem; } }
        @media (min-width: 992px) {
          .campaignBookFairs > .promotionDetail > .promotionDescriptionRemark > .text {
            font-size: 1.2rem; } }
    .campaignBookFairs > .promotionDetail > .promotionPolicy {
      margin-bottom: 1rem; }
      .campaignBookFairs > .promotionDetail > .promotionPolicy:last-of-type {
        margin-bottom: 0; }
      @media (min-width: 576px) {
        .campaignBookFairs > .promotionDetail > .promotionPolicy > .app {
          padding: ""; } }
      @media (min-width: 768px) {
        .campaignBookFairs > .promotionDetail > .promotionPolicy > .app {
          padding: 0rem; } }
      @media (min-width: 992px) {
        .campaignBookFairs > .promotionDetail > .promotionPolicy > .app {
          padding: 0rem; } }
      .campaignBookFairs > .promotionDetail > .promotionPolicy > .app > .application {
        color: #ffd413;
        font-weight: bold;
        margin: 0rem; }
      .campaignBookFairs > .promotionDetail > .promotionPolicy > .app > .download {
        color: black;
        margin: 0rem;
        font-weight: bold; }
      .campaignBookFairs > .promotionDetail > .promotionPolicy > .newCustomer {
        color: black; }
      .campaignBookFairs > .promotionDetail > .promotionPolicy > .currentCustomer {
        color: black; }
      .campaignBookFairs > .promotionDetail > .promotionPolicy > .description {
        color: #33333380; }
      .campaignBookFairs > .promotionDetail > .promotionPolicy > .img-download {
        max-height: 100%;
        max-width: 100%;
        display: block;
        margin: auto; }
        @media (min-width: 576px) {
          .campaignBookFairs > .promotionDetail > .promotionPolicy > .img-download {
            max-width: 135px;
            max-height: 40px;
            padding: 0.5rem; } }
      .campaignBookFairs > .promotionDetail > .promotionPolicy > .imgs img {
        max-height: 100px !important;
        max-width: 100px !important; }
        @media (min-width: 576px) {
          .campaignBookFairs > .promotionDetail > .promotionPolicy > .imgs img {
            max-height: 80px !important;
            max-width: 80px !important; } }
        @media (min-width: 768px) {
          .campaignBookFairs > .promotionDetail > .promotionPolicy > .imgs img {
            max-height: 80px !important;
            max-width: 80px !important; } }
        @media (min-width: 992px) {
          .campaignBookFairs > .promotionDetail > .promotionPolicy > .imgs img {
            max-height: 100px !important;
            max-width: 100px !important; } }
      .campaignBookFairs > .promotionDetail > .promotionPolicy > .text {
        font-size: 1rem;
        margin-left: 1.7rem; }
        @media (min-width: 576px) {
          .campaignBookFairs > .promotionDetail > .promotionPolicy > .text {
            font-size: 1.1rem;
            margin-left: 1.7rem; } }
        @media (min-width: 768px) {
          .campaignBookFairs > .promotionDetail > .promotionPolicy > .text {
            font-size: 1.2rem;
            margin-left: 3.7rem; } }
        @media (min-width: 992px) {
          .campaignBookFairs > .promotionDetail > .promotionPolicy > .text {
            font-size: 1.3rem;
            margin-left: 3.7rem; } }
      .campaignBookFairs > .promotionDetail > .promotionPolicy > .title {
        font-weight: bold;
        font-size: 22px;
        margin: 0; }
        @media (max-width: 767px) {
          .campaignBookFairs > .promotionDetail > .promotionPolicy > .title {
            font-size: 14px;
            margin-bottom: 0; } }
        @media (min-width: 768px) {
          .campaignBookFairs > .promotionDetail > .promotionPolicy > .title {
            font-size: 22px; } }
        @media (min-width: 992px) {
          .campaignBookFairs > .promotionDetail > .promotionPolicy > .title {
            font-size: 22px; } }
      .campaignBookFairs > .promotionDetail > .promotionPolicy > .list {
        padding-left: 2rem; }
        @media (min-width: 768px) {
          .campaignBookFairs > .promotionDetail > .promotionPolicy > .list {
            padding-left: 4rem; } }
        .campaignBookFairs > .promotionDetail > .promotionPolicy > .list > .hightLight {
          color: #ff6403; }
          @media (max-width: 767px) {
            .campaignBookFairs > .promotionDetail > .promotionPolicy > .list > .hightLight {
              font-size: 14px !important; } }
          @media (min-width: 768px) {
            .campaignBookFairs > .promotionDetail > .promotionPolicy > .list > .hightLight {
              font-size: 22px !important; } }
          @media (min-width: 992px) {
            .campaignBookFairs > .promotionDetail > .promotionPolicy > .list > .hightLight {
              font-size: 22px !important; } }
        @media (max-width: 767px) {
          .campaignBookFairs > .promotionDetail > .promotionPolicy > .list > p {
            font-size: 14px !important; } }
        @media (min-width: 768px) {
          .campaignBookFairs > .promotionDetail > .promotionPolicy > .list > p {
            font-size: 22px !important; } }
        @media (min-width: 992px) {
          .campaignBookFairs > .promotionDetail > .promotionPolicy > .list > p {
            font-size: 22px !important; } }
        .campaignBookFairs > .promotionDetail > .promotionPolicy > .list > .listItem {
          margin-bottom: 0.2rem;
          font-size: 1rem; }
          .campaignBookFairs > .promotionDetail > .promotionPolicy > .list > .listItem > .links {
            color: #4989bf !important;
            word-wrap: break-word; }
          @media (max-width: 767px) {
            .campaignBookFairs > .promotionDetail > .promotionPolicy > .list > .listItem {
              font-size: 14px !important; } }
          @media (min-width: 768px) {
            .campaignBookFairs > .promotionDetail > .promotionPolicy > .list > .listItem {
              font-size: 22px !important; } }
          @media (min-width: 992px) {
            .campaignBookFairs > .promotionDetail > .promotionPolicy > .list > .listItem {
              ffont-size: 22px !important; } }
      .campaignBookFairs > .promotionDetail > .promotionPolicy > .promotionSubDescription {
        font-size: 0.9rem;
        margin-left: 0rem; }
        .campaignBookFairs > .promotionDetail > .promotionPolicy > .promotionSubDescription > .hightlight {
          font-weight: bold; }
        @media (max-width: 767px) {
          .campaignBookFairs > .promotionDetail > .promotionPolicy > .promotionSubDescription {
            font-size: 14px !important;
            margin-left: 0rem !important; } }
        @media (min-width: 768px) {
          .campaignBookFairs > .promotionDetail > .promotionPolicy > .promotionSubDescription {
            font-size: 22px; } }
        @media (min-width: 992px) {
          .campaignBookFairs > .promotionDetail > .promotionPolicy > .promotionSubDescription {
            font-size: 22px; } }
        .campaignBookFairs > .promotionDetail > .promotionPolicy > .promotionSubDescription > .links {
          color: #4989bf !important; }
      .campaignBookFairs > .promotionDetail > .promotionPolicy .red {
        color: red; }

.promotionRemark {
  padding: 1rem; }
  .promotionRemark > .text {
    color: rgba(0, 0, 0, 0.6);
    text-align: center;
    display: block;
    padding-top: 0.5rem;
    font-size: 22px; }
    @media (max-width: 767px) {
      .promotionRemark > .text {
        font-size: 14px !important; } }
  .promotionRemark > .textRegister {
    color: #ff0000 !important;
    text-align: center;
    font-weight: bold;
    font-size: 24px; }
    @media (max-width: 767px) {
      .promotionRemark > .textRegister {
        font-size: 16px !important; } }
  .promotionRemark > .registerCover {
    text-align: center; }
    .promotionRemark > .registerCover > .register {
      text-align: center;
      font-weight: bold;
      background: -webkit-linear-gradient(left, #ffd44c, #ffd44c 30%, #ff9d00 30%, #ff9d00, #ffd44c 30%, #ffd44c);
      color: black;
      border-color: transparent;
      border-radius: 45px;
      font-size: 22px; }
      @media (max-width: 767px) {
        .promotionRemark > .registerCover > .register {
          font-size: 14px !important; } }

.manageBox {
  padding-top: 1rem;
  padding-bottom: 1rem; }

.btnDetail {
  color: black;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 24px;
  padding: 6px 19px;
  background: #ffd44c;
  border-color: #ffd44c; }

.btnTable {
  color: black;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 24px;
  padding: 6px 19px;
  background: #ffd44c;
  border-color: #ffd44c;
  width: 114px; }

.MuiTableCell-head {
  background: #ffd44c !important;
  font-size: 16px !important;
  font-family: "Kanit", sans-serif !important;
  color: black !important; }

.colorHeader {
  background: #f0e68c !important; }

.btnBack {
  background-color: #ffd44c !important;
  border-color: #ffd44c !important;
  color: black;
  min-width: 115px;
  border-radius: 24px; }

.paddingBtn {
  padding-left: 1rem; }

table tr td .book {
  width: 100px;
  overflow: hidden;
  display: inline-block; }

.cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.btnSubmitPopup {
  background-color: #ffd44c;
  color: black;
  border-color: #ffd44c; }

.btnSecondaryPopup {
  color: black;
  background-color: #ffd44c !important;
  border-color: #ffd44c !important; }

.free__back-btn {
  width: 165px;
  border: 0;
  background-color: #ffd44c;
  margin-bottom: 1rem; }
  .free__back-btn:hover {
    background: #5a6268 !important; }

.queue .btnDetail {
  color: black;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 24px;
  padding: 6px 19px;
  background: #ffd44c;
  border-color: #ffd44c; }

.queue .MuiTableCell-head {
  background: #ffd44c !important;
  font-size: 16px !important;
  font-family: "Kanit", sans-serif !important;
  color: black !important; }

.queue .shadow {
  box-shadow: 5px 10px 18px lightsteelblue !important; }

.queue .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }

.box {
  border-radius: 16px;
  padding: 48px 20px; }
  .box .textHeader {
    margin-bottom: 1rem;
    font-weight: bolder;
    font-size: 1.7rem;
    margin-top: 1rem;
    text-align: center;
    display: block; }
  .box .textHeader2 {
    margin-bottom: 1rem;
    font-weight: bolder;
    font-size: 1.1rem; }
  .box input[type=text] {
    border-radius: 24px;
    background: #eaeaea !important;
    border-color: #eaeaea !important; }
  .box .textInput {
    display: inline-block;
    text-align: right; }
    @media (pointer: none), (pointer: coarse) {
      .box .textInput {
        text-align: left; } }

.dashboardSalePublisher .btnDetail {
  color: black;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 24px;
  padding: 6px 19px;
  background: #ffd44c;
  border-color: #ffd44c; }

.dashboardSalePublisher .MuiTableCell-head {
  background: #ffd44c !important;
  font-size: 16px !important;
  font-family: "Kanit", sans-serif !important;
  color: black !important; }

.dashboardSalePublisher input[type="textarea"] {
  border-radius: 24px !important;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.dashboardSalePublisher input[type="text"] {
  border-radius: 24px;
  background: #eaeaea !important;
  border-color: #eaeaea !important; }

.dashboardSalePublisher .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.dashboardSalePublisher .textInput {
  display: block;
  text-align: right; }
  @media (pointer: none), (pointer: coarse) {
    .dashboardSalePublisher .textInput {
      text-align: left; } }

.page-title {
  margin-bottom: 24px;
  font-size: 27px !important;
  font-weight: bolder;
  padding-top: 1rem;
  text-align: center; }

#apple-price-log__table tr:hover td {
  background: #ffd44c; }

#apple-price-log__table_wrapper input[type="search"] {
  padding: 4px;
  border: 1px solid white;
  outline: none;
  background: gray; }

#apple-price-log__table_wrapper th:nth-child(3),
#apple-price-log__table_wrapper th:nth-child(4) {
  text-align: right; }

#apple-price-log__table_wrapper .dataTables_paginate a {
  border: 0;
  border-radius: 0;
  color: white !important;
  background: black; }
  #apple-price-log__table_wrapper .dataTables_paginate a.disabled {
    color: #dee2e6 !important;
    background: transparent; }

.btnExport {
  background: white;
  padding: 1rem;
  border-radius: 24px;
  float: right; }

.tbaleNew {
  padding-top: 1rem; }

.subscription__magazine-name {
  font-size: 20px;
  margin-bottom: 24px;
  padding: 8px 24px;
  background: #eaeaea; }

.subscription {
  display: flex;
  align-items: flex-start; }
  .subscription .subscription__create {
    width: 320px;
    padding: 24px;
    background: white; }
    .subscription .subscription__create .subscription__saleperiod {
      font-size: 18px;
      margin-bottom: 8px; }
  .subscription .subscription__form .form-control {
    border: unset;
    padding: unset; }
  .subscription .subscription__form label {
    margin: 0;
    margin-right: 24px; }
  .subscription .subscription__form select[name="price"] {
    margin-top: 4px; }
  .subscription .subscription__form input[type=text],
  .subscription .subscription__form input[type=number],
  .subscription .subscription__form select {
    height: 32px; }
  .subscription .subscription__form input[type=text],
  .subscription .subscription__form input[type=number],
  .subscription .subscription__form select,
  .subscription .subscription__form button {
    width: 100%; }
  .subscription .subscription__form .subscription__price-item:last-child {
    margin-top: 8px; }
    .subscription .subscription__form .subscription__price-item:last-child .form-control {
      border: 0; }
  .subscription .subscription__form .subscription__submit-box {
    margin-top: 24px; }
    .subscription .subscription__form .subscription__submit-box button {
      height: 40px;
      border: unset;
      padding: 8px 16px;
      font-size: 18px;
      font-weight: bolder;
      background: #ffd44c; }
  .subscription .subscription__form .subscription__type {
    margin-top: 8px; }
  .subscription .subscription__form .subscription__summary {
    margin-top: 16px;
    padding: 16px;
    background: #eaeaea; }
  .subscription .subscription__list {
    flex: 1;
    padding-left: 24px; }
    .subscription .subscription__list table {
      width: 100%; }
      .subscription .subscription__list table th {
        letter-spacing: 2px; }
      .subscription .subscription__list table tbody tr td:last-child {
        text-align: center; }
        .subscription .subscription__list table tbody tr td:last-child a {
          color: white; }
      .subscription .subscription__list table .btn {
        cursor: pointer;
        margin: 4px; }
      .subscription .subscription__list table .subscription__reason-btn {
        margin-left: 4px;
        color: black; }

.subscription__title {
  font-weight: bold; }

.subscription__price {
  margin-top: 8px; }
  .subscription__price .subscription__price-box {
    display: inline-block;
    margin-top: 8px;
    border: 1px solid #eaeaea;
    padding: 16px; }
    .subscription__price .subscription__price-box .form-control {
      border: unset;
      padding: unset; }
    .subscription__price .subscription__price-box input[type=number],
    .subscription__price .subscription__price-box select {
      width: 100%; }

.subscription__web-price {
  display: flex; }
  .subscription__web-price .subscription__currency {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 32px;
    padding: 0 8px; }

.subscription__price-item-detail {
  display: flex; }
  .subscription__price-item-detail .subscription__price-title {
    min-width: 160px;
    margin-right: 8px; }
  .subscription__price-item-detail .subscription__price-item-price {
    min-width: 36px; }
  .subscription__price-item-detail .subscription__price-item-currency {
    margin-left: 4px; }

.subscription__user-btn-group .btn {
  border-radius: 0; }

.subscription__log-btn {
  border: 1px solid #eaeaea; }

.subscription__update-btn {
  width: 100%;
  height: 40px;
  margin-top: 24px;
  border: unset;
  padding: 8px 16px;
  font-size: 18px;
  font-weight: bolder;
  background: #ffd44c; }

#subscription__update-modal.show {
  display: flex !important; }

#subscription__update-modal .modal-dialog {
  min-width: 320px; }

#subscription__update-modal .modal-body {
  padding: 24px;
  padding-top: 16px; }

#subscription__reason-modal.show {
  display: flex !important; }

#subscription__reason-modal .modal-dialog {
  min-width: 320px; }

#subscription__disable-modal.show {
  display: flex !important; }

#subscription__disable-modal .modal-dialog {
  min-width: 320px; }

#subscription__disable-modal textarea {
  width: 100%; }

#subscription__disable-modal .btn-accept {
  background: #ffd44c; }

#subscription__disable-modal .btn-decline {
  background: white;
  border: 1px solid #eaeaea; }

div[disabled],
a[disabled] {
  pointer-events: none;
  opacity: 0.7; }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

.subscription-logs .MuiPaper-root {
  margin-top: 32px; }
  .subscription-logs .MuiPaper-root .MuiTableCell-head {
    z-index: 0;
    background: #ffd44c !important;
    font-size: 18px !important;
    font-weight: bolder !important; }

.subscription__search {
  display: flex;
  margin-top: 32px;
  margin-bottom: 16px;
  padding: 16px;
  background-color: white; }
  .subscription__search .subscription__search-input {
    width: 100%;
    height: 40px;
    border: 0;
    border-radius: 24px 0 0 24px;
    padding: 8px 16px;
    text-align: center;
    background: #eaeaea; }
    .subscription__search .subscription__search-input:focus {
      outline: none; }
  .subscription__search .subscription__clear-search-btn {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    border: 0;
    padding: 8px 16px;
    background: #eaeaea; }
  .subscription__search .subscription__search-btn {
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 40px;
    border: 0;
    background: #ffd44c; }
    .subscription__search .subscription__search-btn:hover {
      background: #eaeaea; }

.subscription__list {
  width: 100%; }
  .subscription__list th {
    border: 0;
    letter-spacing: 2px; }
  .subscription__list tbody tr td:last-child {
    text-align: center; }
    .subscription__list tbody tr td:last-child a {
      color: white; }
  .subscription__list .btn {
    cursor: pointer;
    margin: 4px; }
  .subscription__list .subscription__reason-btn {
    margin-left: 4px;
    color: black; }

.subscription__price {
  margin-top: 8px; }
  .subscription__price .subscription__price-box {
    display: inline-block;
    margin-top: 8px;
    border: 1px solid #eaeaea;
    padding: 16px; }
    .subscription__price .subscription__price-box .form-control {
      border: unset;
      padding: unset; }
    .subscription__price .subscription__price-box input[type=number],
    .subscription__price .subscription__price-box select {
      width: 100%; }

.subscription__price-item-detail {
  display: flex; }
  .subscription__price-item-detail .subscription__price-title {
    min-width: 160px;
    margin-right: 8px; }
  .subscription__price-item-detail .subscription__price-item-price {
    min-width: 36px; }
  .subscription__price-item-detail .subscription__price-item-currency {
    margin-left: 4px; }

.subscription__update-btn {
  width: 100%;
  height: 40px;
  margin-top: 24px;
  border: unset;
  padding: 8px 16px;
  font-size: 18px;
  font-weight: bolder;
  background: #ffd44c; }

#subscription__reason-modal.show {
  display: flex !important; }

#subscription__reason-modal .modal-dialog {
  min-width: 320px; }

#subscription__reject-modal.show {
  display: flex !important; }

#subscription__reject-modal .modal-dialog {
  min-width: 320px; }

#subscription__reject-modal textarea {
  width: 100%; }

#subscription__reject-modal .btn-accept {
  background: #ffd44c; }

#subscription__reject-modal .btn-decline {
  background: white;
  border: 1px solid #eaeaea; }

.subscription__disable-reason-btn {
  cursor: pointer;
  display: block;
  padding: 8px;
  padding-top: 0;
  text-decoration: underline;
  color: black !important; }

.subscription__approve-btn {
  border-radius: 0;
  background: #ffd44c; }
  .subscription__approve-btn:hover {
    background: white; }

.subscription__disable-btn {
  margin: 8px;
  border-radius: 0;
  border: 1px solid #eaeaea;
  background: #fafafa; }
  .subscription__disable-btn:hover {
    background: #f8d7da; }

.subscription__page-box {
  display: flex;
  margin-top: 16px; }
  .subscription__page-box .pagination {
    margin-bottom: 0; }
    .subscription__page-box .pagination a {
      color: black !important; }
    .subscription__page-box .pagination li.active a {
      background: #ffd44c;
      border-color: #ffd44c; }
    .subscription__page-box .pagination li.disabled a {
      color: #eee !important; }

.shadow {
  box-shadow: 5px 10px 18px lightsteelblue !important; }

.termAndCondition .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.termAndCondition .title {
  width: 100%;
  text-align: center;
  vertical-align: top;
  margin-bottom: 24px;
  font-size: 2rem;
  border-bottom: 2px #aaaaaa solid;
  letter-spacing: -1px; }

.termAndCondition .tr--bottomOffset td {
  padding-bottom: 10px; }

.termAndCondition .td--rightOffset {
  padding-right: 10px; }

.termAndCondition .td--top {
  vertical-align: top; }

.termAndCondition .text--indent {
  text-indent: 2em; }

.termAndCondition .text {
  text-indent: 0 !important;
  padding-top: 0.5rem !important; }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

.testBook .cardInformation {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #e1e6f1;
  border-radius: 3px;
  padding: 48px 32px;
  margin-bottom: 1.5rem; }

.testBook .title {
  width: 100%;
  text-align: center;
  vertical-align: top;
  margin-bottom: 24px;
  font-size: 2rem;
  border-bottom: 2px #aaaaaa solid;
  letter-spacing: -1px; }

.testBook img {
  width: 100%;
  max-width: 800px;
  margin-top: 5px;
  margin-bottom: 40px; }

.testBook ol {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style-type: none;
  padding: 0; }


html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

@media (min-width: 768px) {
  .manual__box .cate-box .cate-box__main-item-grid {
    padding-top: calc(1/4 * 100%); } }

@media (max-width: 767px) {
  .manual__box .cate-box .cate-box__main-item-grid {
    padding-top: calc(1/3 * 100%); } }

@media (max-width: 575px) {
  .manual__box .cate-box .col-xs-6 {
    width: 50%; }
  .manual__box .cate-box .cate-box__main-item-grid {
    padding-top: calc(1/2 * 100%); } }

.manual__box .cate-box {
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 24px; }
  .manual__box .cate-box .center {
    margin: 0 auto; }
  .manual__box .cate-box .cate-box__header {
    z-index: 1;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    border-bottom: 1px solid gray;
    padding-bottom: 8px; }
    .manual__box .cate-box .cate-box__header .cate-box__category {
      flex: 1;
      text-align: right; }
  .manual__box .cate-box .cate-box__body {
    flex: 1;
    overflow: auto; }
    .manual__box .cate-box .cate-box__body .cate-box__sub-cate-icon {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffd44c;
      border-radius: 50%;
      padding-top: 100%;
      width: 100%;
      height: 0;
      top: 0px;
      transform: translate(44%, 50%);
      opacity: 0.125; }
      .manual__box .cate-box .cate-box__body .cate-box__sub-cate-icon i {
        position: absolute;
        top: 16%;
        left: 40%;
        transform: translate(-57%, -45%);
        font-size: 19vh; }
  .manual__box .cate-box .linkTitle:hover {
    color: black !important;
    border-color: black !important; }
  .manual__box .cate-box .linkTitle {
    color: black !important; }

.manual__box .cate-box__main-item-grid {
  height: 0; }
  .manual__box .cate-box__main-item-grid .cate-box__main-item-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 8px;
    padding-top: 16px;
    padding-bottom: 0; }
  .manual__box .cate-box__main-item-grid .cate-box__main-item {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    padding: 8px;
    align-items: center;
    text-align: center;
    font-size: 16px; }
    .manual__box .cate-box__main-item-grid .cate-box__main-item:hover .cate-box__main-item-icon {
      background: #ffd44c; }
    .manual__box .cate-box__main-item-grid .cate-box__main-item .cate-box__main-item-icon {
      box-sizing: content-box;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30%;
      height: 30%;
      margin-bottom: 8px;
      border: 1px solid black;
      border-radius: 50%; }
    .manual__box .cate-box__main-item-grid .cate-box__main-item i {
      font-size: 24px; }
      @media (pointer: none), (pointer: coarse) {
        .manual__box .cate-box__main-item-grid .cate-box__main-item i {
          font-size: 14px; } }
    .manual__box .cate-box__main-item-grid .cate-box__main-item .cate-box__main-item-title {
      font-size: 16px; }
      @media (pointer: none), (pointer: coarse) {
        .manual__box .cate-box__main-item-grid .cate-box__main-item .cate-box__main-item-title {
          font-size: 14px; } }

.manual__box .cate-box__sub-cate-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 3em; }
  .manual__box .cate-box__sub-cate-box .cate-box__sub-cate-title {
    display: flex; }
    .manual__box .cate-box__sub-cate-box .cate-box__sub-cate-title i {
      margin-left: 16px; }
  .manual__box .cate-box__sub-cate-box .cate-box__sub-cate-title {
    z-index: 1; }
  .manual__box .cate-box__sub-cate-box .cate-box__sub-cate-list {
    z-index: 1;
    flex: 1;
    overflow: auto;
    padding-left: 24px; }
  .manual__box .cate-box__sub-cate-box .cate-box__sub-item-box {
    cursor: pointer;
    display: inline-block;
    margin-top: 16px;
    font-size: 18px; }
    .manual__box .cate-box__sub-cate-box .cate-box__sub-item-box:hover {
      text-decoration: underline; }
  .manual__box .cate-box__sub-cate-box .cate-box__sub-cate-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffd44c;
    border-radius: 50%;
    padding-top: 100%;
    width: 100%;
    height: 0;
    top: 0;
    transform: translate(25%, 25%);
    opacity: 0.125; }
    .manual__box .cate-box__sub-cate-box .cate-box__sub-cate-icon i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 25vh; }
  .manual__box .cate-box__sub-cate-box .cate-box__back-btn {
    cursor: pointer;
    z-index: 1;
    margin-top: 16px;
    font-size: 18px;
    font-weight: bolder; }
    .manual__box .cate-box__sub-cate-box .cate-box__back-btn:hover {
      text-decoration: underline; }

.manual__box .backBox {
  font-weight: bold;
  cursor: pointer;
  font-size: 20px; }

.custom-control {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 1.5rem;
  padding-left: 1.5rem;
  color-adjust: exact; }

.custom-control-inline {
  display: inline-flex;
  margin-right: 1rem; }

.custom-control-input {
  position: absolute;
  left: 0;
  z-index: -1;
  width: 1rem;
  height: 1.25rem;
  opacity: 0; }
  .custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #007bff;
    background-color: #007bff; }
  .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
  .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #80bdff; }
  .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    color: #fff;
    background-color: #b3d7ff;
    border-color: #b3d7ff; }
  .custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label {
    color: #6c757d; }
    .custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before {
      background-color: #e9ecef; }

.custom-control-label {
  position: relative;
  margin-bottom: 0;
  vertical-align: top; }
  .custom-control-label::before {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: #adb5bd solid 1px; }
  .custom-control-label::after {
    position: absolute;
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: 50% / 50% 50% no-repeat; }

.custom-checkbox .custom-control-label::before {
  border-radius: 0.25rem; }

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e"); }

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
  border-color: #007bff;
  background-color: #007bff; }

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e"); }

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5); }

.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5); }

.custom-radio .custom-control-label::before {
  border-radius: 50%; }

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }

.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5); }

.custom-switch {
  padding-left: 2.25rem; }
  .custom-switch .custom-control-label::before {
    left: -2.25rem;
    width: 1.75rem;
    pointer-events: all;
    border-radius: 0.5rem; }
  .custom-switch .custom-control-label::after {
    top: calc(0.25rem + 2px);
    left: calc(-2.25rem + 2px);
    width: calc(1rem - 4px);
    height: calc(1rem - 4px);
    background-color: #adb5bd;
    border-radius: 0.5rem;
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
    @media (prefers-reduced-motion: reduce) {
      .custom-switch .custom-control-label::after {
        transition: none; } }
  .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #fff;
    transform: translateX(0.75rem); }
  .custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(0, 123, 255, 0.5); }

.custom-select {
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  vertical-align: middle;
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") right 0.75rem center/8px 10px no-repeat;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  appearance: none; }
  .custom-select:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
    .custom-select:focus::-ms-value {
      color: #495057;
      background-color: #fff; }
  .custom-select[multiple], .custom-select[size]:not([size="1"]) {
    height: auto;
    padding-right: 0.75rem;
    background-image: none; }
  .custom-select:disabled {
    color: #6c757d;
    background-color: #e9ecef; }
  .custom-select::-ms-expand {
    display: none; }
  .custom-select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #495057; }

.custom-select-sm {
  height: calc(1.5em + 0.5rem + 2px);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem; }

.custom-select-lg {
  height: calc(1.5em + 1rem + 2px);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 1.25rem; }

.custom-file {
  position: relative;
  display: inline-block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin-bottom: 0; }

.custom-file-input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  margin: 0;
  overflow: hidden;
  opacity: 0; }
  .custom-file-input:focus ~ .custom-file-label {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
  .custom-file-input[disabled] ~ .custom-file-label,
  .custom-file-input:disabled ~ .custom-file-label {
    background-color: #e9ecef; }
  .custom-file-input:lang(en) ~ .custom-file-label::after {
    content: "Browse"; }
  .custom-file-input ~ .custom-file-label[data-browse]::after {
    content: attr(data-browse); }

.custom-file-label {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  overflow: hidden;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem; }
  .custom-file-label::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    height: calc(1.5em + 0.75rem);
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    color: #495057;
    content: "Browse";
    background-color: #e9ecef;
    border-left: inherit;
    border-radius: 0 0.25rem 0.25rem 0; }

.custom-range {
  width: 100%;
  height: 1.4rem;
  padding: 0;
  background-color: transparent;
  appearance: none; }
  .custom-range:focus {
    outline: 0; }
    .custom-range:focus::-webkit-slider-thumb {
      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
    .custom-range:focus::-moz-range-thumb {
      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
    .custom-range:focus::-ms-thumb {
      box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
  .custom-range::-moz-focus-outer {
    border: 0; }
  .custom-range::-webkit-slider-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: -0.25rem;
    background-color: #007bff;
    border: 0;
    border-radius: 1rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none; }
    @media (prefers-reduced-motion: reduce) {
      .custom-range::-webkit-slider-thumb {
        transition: none; } }
    .custom-range::-webkit-slider-thumb:active {
      background-color: #b3d7ff; }
  .custom-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: #dee2e6;
    border-color: transparent;
    border-radius: 1rem; }
  .custom-range::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    background-color: #007bff;
    border: 0;
    border-radius: 1rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none; }
    @media (prefers-reduced-motion: reduce) {
      .custom-range::-moz-range-thumb {
        transition: none; } }
    .custom-range::-moz-range-thumb:active {
      background-color: #b3d7ff; }
  .custom-range::-moz-range-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: #dee2e6;
    border-color: transparent;
    border-radius: 1rem; }
  .custom-range::-ms-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: 0;
    margin-right: 0.2rem;
    margin-left: 0.2rem;
    background-color: #007bff;
    border: 0;
    border-radius: 1rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none; }
    @media (prefers-reduced-motion: reduce) {
      .custom-range::-ms-thumb {
        transition: none; } }
    .custom-range::-ms-thumb:active {
      background-color: #b3d7ff; }
  .custom-range::-ms-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: transparent;
    border-color: transparent;
    border-width: 0.5rem; }
  .custom-range::-ms-fill-lower {
    background-color: #dee2e6;
    border-radius: 1rem; }
  .custom-range::-ms-fill-upper {
    margin-right: 15px;
    background-color: #dee2e6;
    border-radius: 1rem; }
  .custom-range:disabled::-webkit-slider-thumb {
    background-color: #adb5bd; }
  .custom-range:disabled::-webkit-slider-runnable-track {
    cursor: default; }
  .custom-range:disabled::-moz-range-thumb {
    background-color: #adb5bd; }
  .custom-range:disabled::-moz-range-track {
    cursor: default; }
  .custom-range:disabled::-ms-thumb {
    background-color: #adb5bd; }

.custom-control-label::before,
.custom-file-label,
.custom-select {
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
  @media (prefers-reduced-motion: reduce) {
    .custom-control-label::before,
    .custom-file-label,
    .custom-select {
      transition: none; } }

.Campaign {
  background-color: #E4A0F7;
  background-position: center center; }
  @media (min-width: 576px) {
    .Campaign {
      padding-bottom: 15.5rem !important; } }
  @media (min-width: 768px) {
    .Campaign {
      padding-bottom: 15.5rem !important; } }
  @media (min-width: 992px) {
    .Campaign {
      padding-bottom: 12.5rem !important; } }
  @media (max-width: 767px) {
    .Campaign {
      padding-bottom: 19rem !important; } }

.promotionCampaign {
  font-family: "Kanit";
  background-color: white; }
  .promotionCampaign > .promotionBanner {
    padding-top: 1rem;
    margin-bottom: 1rem; }
    .promotionCampaign > .promotionBanner > .promotionBannerImage {
      width: 100%; }
  .promotionCampaign > .promotionHeader {
    margin-bottom: 0.5rem;
    margin-top: 2rem; }
    @media (min-width: 768px) {
      .promotionCampaign > .promotionHeader {
        margin-bottom: 1rem; } }
    .promotionCampaign > .promotionHeader > .promotionTitle {
      text-align: left;
      font-weight: bold;
      font-size: 1.5rem; }
      @media (min-width: 576px) {
        .promotionCampaign > .promotionHeader > .promotionTitle {
          font-size: 1.5rem; } }
      @media (min-width: 768px) {
        .promotionCampaign > .promotionHeader > .promotionTitle {
          font-size: 1.7rem; } }
      @media (min-width: 992px) {
        .promotionCampaign > .promotionHeader > .promotionTitle {
          font-size: 2.0rem; } }
      .promotionCampaign > .promotionHeader > .promotionTitle > .highlight {
        color: #8F00FF; }
    .promotionCampaign > .promotionHeader .promotionSubTitle {
      text-align: left;
      font-size: 0.9rem;
      color: gray; }
      @media (min-width: 576px) {
        .promotionCampaign > .promotionHeader .promotionSubTitle {
          font-size: 1rem; } }
      @media (min-width: 768px) {
        .promotionCampaign > .promotionHeader .promotionSubTitle {
          font-size: 1.2rem; } }
      @media (min-width: 992px) {
        .promotionCampaign > .promotionHeader .promotionSubTitle {
          font-size: 1.4rem; } }
  .promotionCampaign > .promotionDetail > .promotionDescription {
    margin-bottom: 0.5rem; }
    .promotionCampaign > .promotionDetail > .promotionDescription > .text {
      font-size: 1rem; }
      @media (min-width: 576px) {
        .promotionCampaign > .promotionDetail > .promotionDescription > .text {
          font-size: 1.1rem; } }
      @media (min-width: 768px) {
        .promotionCampaign > .promotionDetail > .promotionDescription > .text {
          font-size: 1.2rem; } }
      @media (min-width: 992px) {
        .promotionCampaign > .promotionDetail > .promotionDescription > .text {
          font-size: 1.3rem; } }
  .promotionCampaign > .promotionDetail > .promotionDescriptionRemark {
    margin-bottom: 1rem; }
    .promotionCampaign > .promotionDetail > .promotionDescriptionRemark > .text {
      color: #9A9A9A;
      font-size: 0.9rem; }
      @media (min-width: 576px) {
        .promotionCampaign > .promotionDetail > .promotionDescriptionRemark > .text {
          font-size: 1rem; } }
      @media (min-width: 768px) {
        .promotionCampaign > .promotionDetail > .promotionDescriptionRemark > .text {
          font-size: 1.1rem; } }
      @media (min-width: 992px) {
        .promotionCampaign > .promotionDetail > .promotionDescriptionRemark > .text {
          font-size: 1.2rem; } }
  .promotionCampaign > .promotionDetail > .promotionPolicy {
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem; }
    .promotionCampaign > .promotionDetail > .promotionPolicy:last-of-type {
      margin-bottom: 0; }
    @media (min-width: 576px) {
      .promotionCampaign > .promotionDetail > .promotionPolicy > .app {
        padding: ""; } }
    @media (min-width: 768px) {
      .promotionCampaign > .promotionDetail > .promotionPolicy > .app {
        padding: 0rem; } }
    @media (min-width: 992px) {
      .promotionCampaign > .promotionDetail > .promotionPolicy > .app {
        padding: 0rem; } }
    .promotionCampaign > .promotionDetail > .promotionPolicy > .app > .application {
      color: #ffd413;
      font-weight: bold;
      margin: 0rem; }
    .promotionCampaign > .promotionDetail > .promotionPolicy > .app > .download {
      color: black;
      margin: 0rem;
      font-weight: bold; }
    .promotionCampaign > .promotionDetail > .promotionPolicy > .newCustomer {
      color: #f68740; }
    .promotionCampaign > .promotionDetail > .promotionPolicy > .currentCustomer {
      color: #f0346d; }
    .promotionCampaign > .promotionDetail > .promotionPolicy > .currentCustomer2 {
      color: black; }
    .promotionCampaign > .promotionDetail > .promotionPolicy > .currentCustomer3 {
      color: #8F00FF; }
    .promotionCampaign > .promotionDetail > .promotionPolicy > .description {
      color: #33333380; }
    .promotionCampaign > .promotionDetail > .promotionPolicy > .img-download {
      max-height: 100%;
      max-width: 100%;
      display: block;
      margin: auto; }
      @media (min-width: 576px) {
        .promotionCampaign > .promotionDetail > .promotionPolicy > .img-download {
          max-width: 135px;
          max-height: 40px;
          padding: 0.5rem; } }
    .promotionCampaign > .promotionDetail > .promotionPolicy > .imgs img {
      max-height: 100px !important;
      max-width: 100px !important; }
      @media (min-width: 576px) {
        .promotionCampaign > .promotionDetail > .promotionPolicy > .imgs img {
          max-height: 80px !important;
          max-width: 80px !important; } }
      @media (min-width: 768px) {
        .promotionCampaign > .promotionDetail > .promotionPolicy > .imgs img {
          max-height: 80px !important;
          max-width: 80px !important; } }
      @media (min-width: 992px) {
        .promotionCampaign > .promotionDetail > .promotionPolicy > .imgs img {
          max-height: 100px !important;
          max-width: 100px !important; } }
    .promotionCampaign > .promotionDetail > .promotionPolicy > .text {
      font-size: 1rem;
      margin-left: 1.7rem; }
      @media (min-width: 576px) {
        .promotionCampaign > .promotionDetail > .promotionPolicy > .text {
          font-size: 1.1rem;
          margin-left: 1.7rem; } }
      @media (min-width: 768px) {
        .promotionCampaign > .promotionDetail > .promotionPolicy > .text {
          font-size: 1.2rem;
          margin-left: 3.7rem; } }
      @media (min-width: 992px) {
        .promotionCampaign > .promotionDetail > .promotionPolicy > .text {
          font-size: 1.3rem;
          margin-left: 3.7rem; } }
    .promotionCampaign > .promotionDetail > .promotionPolicy > .title {
      font-weight: bold;
      font-size: 1.2rem; }
      @media (min-width: 576px) {
        .promotionCampaign > .promotionDetail > .promotionPolicy > .title {
          font-size: 1.2rem; } }
      @media (min-width: 768px) {
        .promotionCampaign > .promotionDetail > .promotionPolicy > .title {
          font-size: 1.2rem; } }
      @media (min-width: 992px) {
        .promotionCampaign > .promotionDetail > .promotionPolicy > .title {
          font-size: 1.5rem; } }
    .promotionCampaign > .promotionDetail > .promotionPolicy > .list {
      padding-left: 2rem; }
      @media (min-width: 768px) {
        .promotionCampaign > .promotionDetail > .promotionPolicy > .list {
          padding-left: 4rem; } }
      .promotionCampaign > .promotionDetail > .promotionPolicy > .list > .listItem {
        margin-bottom: 0.2rem;
        font-size: 1rem; }
        .promotionCampaign > .promotionDetail > .promotionPolicy > .list > .listItem > .links {
          color: #4989bf !important; }
        @media (min-width: 576px) {
          .promotionCampaign > .promotionDetail > .promotionPolicy > .list > .listItem {
            font-size: 1.1rem; } }
        @media (min-width: 768px) {
          .promotionCampaign > .promotionDetail > .promotionPolicy > .list > .listItem {
            font-size: 1.2rem; } }
        @media (min-width: 992px) {
          .promotionCampaign > .promotionDetail > .promotionPolicy > .list > .listItem {
            font-size: 1.3rem; } }
    .promotionCampaign > .promotionDetail > .promotionPolicy > .promotionSubDescription {
      font-size: 0.9rem; }
      .promotionCampaign > .promotionDetail > .promotionPolicy > .promotionSubDescription > .hightlight {
        font-weight: bold; }
      @media (min-width: 576px) {
        .promotionCampaign > .promotionDetail > .promotionPolicy > .promotionSubDescription {
          font-size: 1rem; } }
      @media (min-width: 768px) {
        .promotionCampaign > .promotionDetail > .promotionPolicy > .promotionSubDescription {
          font-size: 1.2rem; } }
      @media (min-width: 992px) {
        .promotionCampaign > .promotionDetail > .promotionPolicy > .promotionSubDescription {
          font-size: 1.4rem; } }
      .promotionCampaign > .promotionDetail > .promotionPolicy > .promotionSubDescription > .links {
        color: #4989bf !important; }
    .promotionCampaign > .promotionDetail > .promotionPolicy > .promotionPercentDescription {
      font-weight: bold;
      font-size: 0.9rem; }
      .promotionCampaign > .promotionDetail > .promotionPolicy > .promotionPercentDescription > .hightlight {
        font-weight: bold; }
      @media (min-width: 576px) {
        .promotionCampaign > .promotionDetail > .promotionPolicy > .promotionPercentDescription {
          font-size: 0.5rem; } }
      @media (min-width: 768px) {
        .promotionCampaign > .promotionDetail > .promotionPolicy > .promotionPercentDescription {
          font-size: 1.2rem; } }
      @media (min-width: 992px) {
        .promotionCampaign > .promotionDetail > .promotionPolicy > .promotionPercentDescription {
          font-size: 1.7rem; } }
      .promotionCampaign > .promotionDetail > .promotionPolicy > .promotionPercentDescription > .links {
        color: #4989bf !important; }
    .promotionCampaign > .promotionDetail > .promotionPolicy > .licenseDetail {
      white-space: pre-wrap;
      background-color: whitesmoke;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      padding-top: 0.5rem;
      display: inline-block;
      word-wrap: break-word;
      width: auto; }
  .promotionCampaign > .promotionDetail > .promotionRemark {
    font-size: 1rem; }
    .promotionCampaign > .promotionDetail > .promotionRemark > .text > .links {
      color: #4989bf !important; }
    @media (min-width: 576px) {
      .promotionCampaign > .promotionDetail > .promotionRemark {
        font-size: 0.8rem; } }
    @media (min-width: 768px) {
      .promotionCampaign > .promotionDetail > .promotionRemark {
        font-size: 1.0rem; } }
    @media (min-width: 992px) {
      .promotionCampaign > .promotionDetail > .promotionRemark {
        font-size: 1.3rem; } }
  .promotionCampaign > .promotionDetail > .promotionBuy {
    text-align: center; }
    .promotionCampaign > .promotionDetail > .promotionBuy .btnBuy {
      display: block;
      background-color: #8F00FF;
      border: 1px solid transparent;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
      outline: none;
      padding: 0.5rem;
      border-radius: 0.2rem;
      color: white;
      margin-bottom: 4px;
      width: 100%;
      border-radius: 3rem;
      max-width: 200px;
      margin: 0 auto;
      margin-bottom: 0.5rem; }

html,
body {
  background: lightgray; }

@media (min-width: 1200px) {
  .container {
    max-width: 1350px !important; } }

.register .cardInformationRegister:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); }

.register .cardInformationRegister input[type="text"] {
  border-radius: 24px;
  background: "" !important;
  border-color: "" !important; }

.register .cardInformationRegister input[type="email"] {
  border-radius: 24px; }

.register .cardInformationRegister input[type="password"] {
  border-radius: 24px; }

.register .cardInformationRegister input[type="number"] {
  border-radius: 24px; }

.register .cardInformationRegister {
  border-radius: 16px;
  padding: 48px 32px;
  background: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  margin-bottom: 1.5rem; }
  .register .cardInformationRegister .alert {
    color: red;
    font-size: 14px; }

.register .btnSubmit {
  background-color: white !important;
  border-color: white !important;
  border-radius: 24px;
  color: black;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer; }

.register .btnCancel {
  background-color: white !important;
  border-color: white !important; }

.container {
  padding: 2px 16px !important; }

.topContainer {
  margin-top: 2rem; }

@media screen and (min-width: 1024px) {
  .bgContrain {
    border-radius: 16px;
    padding: 25px 12px;
    background: #ffd44c;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    margin-bottom: 1.5rem; } }

.bottomContainer {
  padding-top: 2rem;
  margin-bottom: 2rem; }

.textInput {
  display: inline-block;
  text-align: right; }
  @media (pointer: none), (pointer: coarse) {
    .textInput {
      text-align: left; } }

.buttonCenter {
  text-align: center; }

.btn-success:hover {
  color: #fff;
  background-color: #ffd44c;
  border-color: #ffd44c; }

.btn-success {
  color: black;
  background-color: #ffd44c !important;
  border-color: #ffd44c !important;
  border-radius: 24px; }

.btn-secondary {
  border-radius: 24px; }

.modal-header {
  background-color: #ffd44c !important; }

.btn-secondary:hover {
  color: #fff;
  background-color: gray !important;
  border-color: gray !important; }

.img-responsive {
  max-width: 100%;
  height: auto; }

.fontHeader {
  text-align: center;
  display: block;
  font-size: 28px;
  font-weight: bold; }

.modal.show {
  display: block !important; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0;
  /* <-- Apparently some margin are still there even though it's hidden */ }

input[type="number"] {
  -moz-appearance: textfield;
  /* Firefox */ }

.modal.show {
  display: block !important; }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

.backoffice-layout__drawer {
  height: 100vh;
  padding: 32px;
  background: white;
  border-right: 1px solid #dee2e6; }
  .backoffice-layout__drawer .backoffice-layout__logo {
    cursor: default;
    margin-bottom: 16px; }
    .backoffice-layout__drawer .backoffice-layout__logo i {
      font-size: 79px; }
  .backoffice-layout__drawer .backoffice-layout__drawer-item {
    cursor: pointer;
    display: flex;
    padding: 8px;
    color: #495057; }
    .backoffice-layout__drawer .backoffice-layout__drawer-item:hover {
      background: #dee2e6; }
    .backoffice-layout__drawer .backoffice-layout__drawer-item:active {
      background: #ced4da;
      font-weight: bold; }
  .backoffice-layout__drawer .backoffice-layout__drawer-item-subitem {
    padding-left: 40px; }
  .backoffice-layout__drawer .backoffice-layout__drawer-expand {
    cursor: pointer; }

.backoffice-layout__page {
  overflow-y: scroll;
  height: 100vh;
  padding: 32px;
  background: #f8f9fa; }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

.book__list-group-box {
  border-bottom: 1px solid #dee2e6; }

.book__list-group {
  display: inline-flex; }
  .book__list-group a {
    white-space: nowrap; }
  .book__list-group .list-group-item {
    border: 0;
    background: transparent;
    border-radius: 0 !important;
    padding-bottom: 16px;
    color: #ced4da; }
    .book__list-group .list-group-item:first-child {
      padding-left: 0; }
    .book__list-group .list-group-item.active {
      color: #495057;
      font-weight: bolder;
      border-bottom: 2px solid black; }
    .book__list-group .list-group-item .badge-pill {
      margin-left: 4px; }

.book__search-table {
  border: 1px solid #e9ecef;
  border-radius: 8px; }

.book__search-box {
  display: flex;
  padding: 16px;
  background: white;
  border-radius: 8px 8px 0 0; }
  .book__search-box i {
    color: #adb5bd; }
  .book__search-box input[type="text"] {
    flex: 1;
    margin-left: 16px;
    border: 0;
    background: transparent; }
    .book__search-box input[type="text"]:focus {
      outline: 0; }
  .book__search-box ::placeholder {
    color: #adb5bd; }

.book__box .tab-content table {
  font-size: 14px; }
  .book__box .tab-content table th {
    border-top: 0;
    border-bottom: 0;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 24px; }
  .book__box .tab-content table td {
    width: 1%;
    white-space: nowrap;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 24px; }
    .book__box .tab-content table td .btn {
      font-size: 14px;
      color: #495057;
      background: #e9ecef; }
      .book__box .tab-content table td .btn:hover {
        background: #dee2e6; }
      .book__box .tab-content table td .btn:focus {
        background: #ced4da; }
    .book__box .tab-content table td .btn:focus, .book__box .tab-content table td .btn:active {
      outline: none !important;
      box-shadow: none; }
    .book__box .tab-content table td .btn:not(:first-child) {
      margin-left: 16px; }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

.small-card__title {
  font-size: 20px; }

.small-card__content {
  font-size: 32px; }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

.meduim-card .card-header {
  background: white; }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

.ct-series-a .ct-bar {
  stroke: #495057;
  stroke-width: 16px; }

html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

#disable-register-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 4rem; }
  #disable-register-container p {
    padding: 0.5rem;
    font-size: 1.125rem;
    text-wrap: wrap;
    font-family: "Kanit", sans-serif; }
  #disable-register-container button {
    cursor: pointer;
    margin-top: 2rem;
    font-size: 1rem;
    background: #ffd44c;
    border-radius: 8px;
    border: 0;
    padding: 8px 16px; }
  #disable-register-container #announcement {
    background: #fff;
    max-width: 720px;
    border-radius: 8px;
    padding: 40px;
    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12); }

@media (max-width: 450px) {
  h1 {
    font-size: 1.3rem; }
  h2 {
    font-size: 1rem; } }

.box {
  width: 100%;
  height: 100vh;
  background-color: #163B59;
  color: #fff; }

.box-center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center; }

.btn-back {
  cursor: pointer;
  border-radius: 0 !important; }

.pic-bear {
  width: 100%;
  max-width: 25rem;
  margin: 3rem 0;
  margin-left: 1%; }

html,
body {
  background: lightgray; }

.btn-primary {
  color: black;
  background-color: #ffd44c;
  border-color: #ffd44c; }

.btn-primary:hover {
  color: white;
  background-color: #ffd44c;
  border-color: #ffd44c; }

.login__page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; }

.cardLogin {
  border-radius: 8px;
  padding: 40px;
  background: #fefefe; }
  .cardLogin h1 {
    margin-bottom: 24px;
    text-align: center; }
  .cardLogin .general hr {
    margin: 24px auto; }
  .cardLogin .general .more {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    font-size: 0.9em; }

.login__title {
  margin-bottom: 32px;
  text-align: center;
  font-size: 48px;
  letter-spacing: 8px; }

.login__facebook-btn {
  cursor: pointer;
  width: 100%;
  min-height: 40px;
  margin-top: 16px;
  border-color: #4267b2;
  background: #4267b2;
  color: #eee; }
  .login__facebook-btn:hover {
    border-color: #4267b2;
    background: #4267b2;
    color: #fff;
    text-decoration: underline; }

#authentication-form .input-group-text {
  border: 0;
  background: #eee; }

#authentication-form .form-control:focus {
  outline: none;
  box-shadow: none; }

#authentication-form input[type="text"] {
  display: block;
  height: 40px;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background: #eee;
  border: 0;
  border-radius: 0 !important;
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }

#authentication-form input[type="password"] {
  display: block;
  height: 40px;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background: #eee;
  border: 0;
  border-radius: 0 !important;
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }

#authentication-form button {
  width: 100%;
  min-height: 40px;
  margin-bottom: 8px;
  font-weight: bolder; }
  #authentication-form button:hover {
    color: #000;
    text-decoration: underline; }

.login__error-box {
  width: 100%;
  margin-top: 1rem;
  padding: 8px;
  text-align: center;
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb; }


html,
body,
#__next {
  height: 100%;
  background: #eff1f9; }

.page-title {
  margin-bottom: 24px;
  font-size: 22px;
  font-weight: bolder; }
  .page-title a {
    cursor: pointer;
    text-decoration: underline !important;
    color: black; }

.page-detail {
  margin-bottom: 24px;
  font-size: 16px;
  padding: 1rem; }

.has-error .help-block {
  display: block;
  font-size: 14px;
  color: #d9534f; }

.has-error select,
.has-error input,
.has-error textarea,
.has-error .bootstrap-tagsinput {
  background: #f8d7da !important; }

.text-input--gray {
  height: 36px;
  border: 0;
  border-radius: 24px;
  padding: 0 16px;
  background: #eaeaea; }
  .text-input--gray:focus {
    outline-width: 0; }

.writer-btn {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center; }

.btn--yellow {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  border-radius: 24px;
  padding: 16px;
  background: #ffd44c; }

.modal.show {
  display: flex;
  align-items: center; }
  .modal.show .modal-header {
    background: #ffd44c; }

.uploading-page {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 30px;
  color: #ffd44c; }

.content__page {
  display: flex;
  flex-direction: column;
  align-items: center; }

.blink {
  animation: blinker 2s linear infinite; }

@keyframes blinker {
  50% {
    opacity: 0; } }

.alert {
  margin: 0;
  border: 0;
  border-radius: 0; }

.toast-message {
  font-size: 16px !important; }

#nprogress .bar {
  background: #ffd44c;
  height: 4px; }

#nprogress .peg {
  box-shadow: none; }

#nprogress .spinner-icon {
  width: 24px;
  height: 24px;
  border: solid 4px transparent;
  border-top-color: #ffd44c;
  border-left-color: #ffd44c; }

.truncate {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.truncate--2 {
  -webkit-line-clamp: 2; }

.skeleton-box {
  margin-bottom: 8px;
  background: #eaeaea; }
  .skeleton-box::after {
    content: "_";
    color: #eaeaea; }

.skeleton-box--25 {
  width: 25%; }

.skeleton-box--50 {
  width: 50%; }

@media (max-width: 1199px) {
  #nav__burger-btn {
    display: block !important; }
  .app-bar__logo {
    margin-left: 0 !important; }
  .main-content {
    padding: 0 16px !important;
    padding-bottom: 16px !important; } }

html,
body {
  font-family: "Kanit", sans-serif; }

.mdc-layout-grid {
  padding: 0; }
  .mdc-layout-grid .sidebar-content-grid__inner {
    grid-gap: 0; }

.app-bar {
  z-index: 7;
  top: 0;
  left: 0;
  background: white; }
  .app-bar .mdc-top-app-bar__navigation-icon {
    display: none;
    color: black; }
  .app-bar #nav__burger-btn {
    display: none;
    margin-left: 4px; }
  .app-bar .app-bar__logo-link {
    position: fixed !important;
    left: 50%;
    transform: translateX(-50%); }
    .app-bar .app-bar__logo-link .app-bar__logo {
      width: 144px; }

.mdc-drawer {
  position: fixed;
  padding-top: 104px;
  padding-left: 16px; }
  .mdc-drawer .mdc-drawer__content {
    overflow: auto; }
  .mdc-drawer .drawer__menu {
    padding: 6px; }
    .mdc-drawer .drawer__menu .drawer__header {
      margin-bottom: 8px;
      text-align: center;
      font-size: 18px;
      font-weight: bolder; }
    .mdc-drawer .drawer__menu .drawer__icon {
      width: 16px;
      margin-right: 16px; }
    .mdc-drawer .drawer__menu .drawer__menu-item {
      cursor: pointer;
      display: block;
      margin-top: 12px;
      font-size: 14px;
      color: black;
      text-decoration: none; }
      .mdc-drawer .drawer__menu .drawer__menu-item:hover {
        background: #ffd44c; }
  .mdc-drawer .drawer__store {
    display: flex;
    justify-content: center;
    padding: 24px 0; }
    .mdc-drawer .drawer__store .fa-store {
      margin-right: 8px; }
    .mdc-drawer .drawer__store .drawer__store-btn {
      cursor: pointer;
      display: inline-block;
      text-align: center;
      border-radius: 24px;
      padding: 8px 32px;
      text-decoration: none;
      color: black;
      background: #ffd44c; }
      .mdc-drawer .drawer__store .drawer__store-btn:hover {
        background: #eaeaea; }
  .mdc-drawer .drawer__avatar {
    position: relative;
    width: 80px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #eaeaea; }
  .mdc-drawer .drawer__email {
    margin-top: 8px;
    margin-bottom: 16px;
    text-align: center; }

.mdc-drawer-app-content {
  height: 100%; }

.main-content {
  min-height: 100%;
  padding: 0 24px;
  padding-bottom: 24px;
  background: #eff1f9; }
  .main-content .mdc-top-app-bar--fixed-adjust {
    position: relative;
    width: 100%;
    flex-direction: column;
    padding-top: calc(104px + 24px); }
  .main-content .section-intro {
    margin: 0; }

.main {
  background-image: url("/static/image/ookbee_bee_intro.png") !important;
  height: 500px;
  background-repeat: no-repeat;
  background-color: white !important;
  background-position: right bottom; }
  .main .section-intro {
    padding-bottom: 30px !important; }
    .main .section-intro .img-responsive {
      display: block !important;
      max-width: 100% !important;
      height: auto !important;
      max-height: 150px; }
  @media (pointer: none), (pointer: coarse) {
    .main {
      background-image: none !important; } }

.menu a {
  color: black !important; }

.managePadding {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem; }

.mgBg {
  padding: 0.3rem;
  background-color: #fae39c; }

#isNewPublisher {
  color: white;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  padding: 6px 19px;
  background: black;
  margin: 0.1rem;
  border-color: black; }

#isNewPublisher:hover {
  color: #ffd44c !important; }

.disabledCursor {
  cursor: default !important; }

.version {
  text-align: right;
  margin-top: 2rem;
  padding: 1rem;
  display: block;
  color: gray;
  font-size: 12px;
  letter-spacing: 1px; }

@font-face {
  font-family: 'ChineseBrush';
  font-weight: normal;
  src: url("/static/fonts/FontGencover/4711_AtNoon_ChineseBrush.ttf"); }

@font-face {
  font-family: 'KRR_AengAei';
  font-weight: normal;
  src: url("/static/fonts/KRR_AengAei.ttf"); }

@font-face {
  font-family: 'KRR_Thaispirit';
  font-weight: normal;
  src: url("/static/fonts/KRR-THAISPIRIT.ttf"); }

@font-face {
  font-family: 'Anchan';
  font-weight: normal;
  src: url("/static/fonts/FontGencover/Anchan.ttf"); }

@font-face {
  font-family: 'Arabica';
  font-weight: normal;
  src: url("/static/fonts/FontGencover/Arabica.ttf"); }

@font-face {
  font-family: 'JS-Thanaporn';
  font-weight: normal;
  src: url("/static/fonts/FontGencover/JS-Thanaporn-Normal.ttf"); }

@font-face {
  font-family: 'JS-Toomtam';
  font-weight: normal;
  src: url("/static/fonts/FontGencover/JS-Toomtam-Normal.ttf"); }

@font-face {
  font-family: 'SR-Rojee-NP';
  font-weight: normal;
  src: url("/static/fonts/FontGencover/SR-Rojee-NP_0.ttf"); }

@font-face {
  font-family: 'Supermarket';
  font-weight: normal;
  src: url("/static/fonts/FontGencover/Supermarket.ttf"); }

@font-face {
  font-family: 'Superstore';
  font-weight: normal;
  src: url("/static/fonts/FontGencover/Superstore-Book.ttf"); }

@font-face {
  font-family: 'TS-Country-C-NP';
  font-weight: normal;
  src: url("/static/fonts/FontGencover/TS-Country-C-NP.ttf"); }

@font-face {
  font-family: 'TS-Phikun-NP';
  font-weight: normal;
  src: url("/static/fonts/FontGencover/TS-Phikun-2.2-NP.ttf"); }

@font-face {
  font-family: 'Can_Cankung';
  font-weight: normal;
  src: url("/static/fonts/FontGencover/can_Cankung.ttf"); }

@font-face {
  font-family: 'KC_Nightmare';
  font-weight: normal;
  src: url("/static/fonts/FontGencover/KC_Nightmare.ttf"); }

@font-face {
  font-family: 'Layiji_Lenroonrang';
  font-weight: normal;
  src: url("/static/fonts/FontGencover/Layiji_Lenroonrang.ttf"); }

@font-face {
  font-family: 'MAX_Somsin';
  font-weight: normal;
  src: url("/static/fonts/FontGencover/MAX_somsin.ttf"); }

@font-face {
  font-family: 'Universe';
  font-weight: normal;
  src: url("/static/fonts/FontGencover/universe.ttf"); }

@font-face {
  font-family: 'IannnnnPDA';
  font-weight: normal;
  src: url("/static/fonts/FontGencover/2006_iannnnnPDA.ttf"); }

@font-face {
  font-family: 'Noworry';
  font-weight: normal;
  src: url("/static/fonts/FontGencover/5011_thE_Little_Uki_noworry.ttf"); }

@font-face {
  font-family: 'Alsmile_Arounvilas';
  font-weight: normal;
  src: url("/static/fonts/FontGencover/Alsmile_Arounvilas.ttf"); }

@font-face {
  font-family: 'Alsmile_Lane_Chang';
  font-weight: normal;
  src: url("/static/fonts/FontGencover/Alsmile_Lane_Chang.ttf"); }

@font-face {
  font-family: 'LayijiSarangheyo';
  font-weight: normal;
  src: url("/static/fonts/FontGencover/LayijiSarangheyo.ttf"); }

@font-face {
  font-family: 'Torsilp-Gimchi';
  font-weight: normal;
  src: url("/static/fonts/FontGencover/torsilp-gimchi.ttf"); }

@font-face {
  font-family: 'ZoodHardSell2';
  font-weight: normal;
  src: url("/static/fonts/FontGencover/ZoodHardSell2.ttf"); }

@font-face {
  font-family: 'Eq_Feel_Good';
  font-weight: normal;
  src: url("/static/fonts/FontGencover/eq_feel_good.ttf"); }

@font-face {
  font-family: 'SuphanFonts';
  src: url("/static/fonts/FontGencover/V-11-3_SuphanFonts_THAI.ttf"); }

.cc-link {
  color: #253b48 !important;
  color: var(--cc-btn-primary-bg) !important;
  border-color: var(--cc-btn-primary-bg) !important;
  display: inline !important;
  padding-bottom: 0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  font-weight: 600 !important; }

.CookieConsent {
  align-items: baseline;
  position: fixed;
  width: auto !important;
  z-index: 1000000 !important;
  bottom: 1.25em !important;
  right: 3.25em !important;
  left: auto !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  box-shadow: 0 0.625em 1.875em #000;
  transform: scale(0.95);
  line-height: initial;
  background: #fff !important;
  padding: 1.1em 1.8em 1.4em 1.8em !important;
  color: #2b373b !important; }
  .CookieConsent p {
    padding-top: 0rem !important; }

@media (max-width: 767px) {
  .CookieConsent {
    right: 0rem !important; } }

@media (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  .CookieConsent {
    right: 3.25em !important; } }

#privacyPolicyModal .privacyPopupFrame {
  background-color: white;
  border-color: transparent !important; }
  #privacyPolicyModal .privacyPopupFrame > .privacyPopupFrameHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 1rem;
    background-color: #ffd54c;
    margin-bottom: 1rem; }
    #privacyPolicyModal .privacyPopupFrame > .privacyPopupFrameHeader > .textHeader {
      font-size: 1.2rem;
      text-align: center;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      padding: 1.5em 0;
      margin: 0;
      text-align: center; }
    #privacyPolicyModal .privacyPopupFrame > .privacyPopupFrameHeader > .closeIcon {
      cursor: pointer; }
  #privacyPolicyModal .privacyPopupFrame > .privacyPopupFrameBody {
    padding: 1rem; }
    #privacyPolicyModal .privacyPopupFrame > .privacyPopupFrameBody > .errorMessage {
      margin-bottom: 0.5rem; }
      #privacyPolicyModal .privacyPopupFrame > .privacyPopupFrameBody > .errorMessage:last-child {
        margin-bottom: 0; }
    #privacyPolicyModal .privacyPopupFrame > .privacyPopupFrameBody > .seperateLine {
      position: relative;
      padding: 0.5rem 0; }
      #privacyPolicyModal .privacyPopupFrame > .privacyPopupFrameBody > .seperateLine > .line {
        width: 100%; }
      #privacyPolicyModal .privacyPopupFrame > .privacyPopupFrameBody > .seperateLine > .text {
        color: gray;
        background-color: white;
        z-index: 1;
        padding: 0 1rem;
        width: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }
    #privacyPolicyModal .privacyPopupFrame > .privacyPopupFrameBody .textIndent {
      text-indent: 1.5em; }
    #privacyPolicyModal .privacyPopupFrame > .privacyPopupFrameBody .link {
      color: #337ab7 !important;
      text-decoration: none !important; }
      #privacyPolicyModal .privacyPopupFrame > .privacyPopupFrameBody .link:hover {
        text-decoration: underline !important; }
  #privacyPolicyModal .privacyPopupFrame > .privacyPopupFrameFooter .padding {
    padding: 1rem;
    text-align: center; }
  #privacyPolicyModal .privacyPopupFrame > .privacyPopupFrameFooter .btnAccept {
    cursor: pointer !important;
    display: inline-block !important;
    text-align: center !important;
    border-radius: 24px !important;
    padding: 8px 32px !important;
    text-decoration: none !important;
    color: black !important;
    background: #ffd44c !important;
    width: 100% !important; }
  #privacyPolicyModal .privacyPopupFrame > .privacyPopupFrameFooter .link {
    color: #337ab7 !important;
    text-decoration: none !important; }
    #privacyPolicyModal .privacyPopupFrame > .privacyPopupFrameFooter .link:hover {
      text-decoration: underline !important; }

#privacyPolicyModal [role="document"] {
  padding: 0rem !important; }

@media (max-width: 767px) {
  #privacyPolicyModal [role="document"] {
    padding: 0rem !important;
    top: 38% !important;
    background-color: white !important;
    border-color: white !important;
    font-size: 12px !important; }
  #privacyPolicyModal .CookieConsent {
    right: 0rem !important; }
  #privacyPolicyModal > .privacyPopupFrameBody {
    padding: 0rem !important; }
  #privacyPolicyModal > .privacyPopupFrameHeader {
    margin-bottom: 0rem !important; } }

@media (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  #privacyPolicyModal [role="document"] {
    padding: 0.5rem !important;
    top: 50% !important;
    background-color: white !important;
    border-color: white !important; }
  #privacyPolicyModal .CookieConsent {
    right: 3.25em !important; } }

.main-content {
  display: flex;
  justify-content: center;
  background: #FFFFFE;
  padding: 0 128px;
  padding-bottom: 32px; }

#landing-page {
  max-width: 1280px;
  font-size: 18px; }
  #landing-page #red-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #FAD063;
    padding: 8px;
    border-radius: 4px;
    background: #FFFDF5;
    font-weight: bolder; }
    #landing-page #red-box a {
      color: #E84342;
      text-decoration: underline; }
    #landing-page #red-box #image-1 {
      width: 140px; }
    #landing-page #red-box div {
      padding: 0 8px; }
  #landing-page #white-box {
    padding: 36px 24px;
    text-align: center; }
  #landing-page #blue-box {
    border-radius: 4px;
    padding: 24px;
    background: #EFFCFF;
    text-align: center;
    font-weight: bolder;
    line-height: 36px; }
  #landing-page #btn-container {
    padding: 24px;
    text-align: center; }
    #landing-page #btn-container #report-btn {
      display: inline-block;
      background: #FAD063;
      width: 240px;
      padding: 8px 16px;
      text-align: center;
      color: #000;
      border: 1px solid #FAD063;
      border-radius: 8px;
      margin-right: 8px;
      text-decoration: none !important; }
    #landing-page #btn-container #home-btn {
      cursor: pointer;
      display: inline-block;
      background: #fff;
      width: 240px;
      padding: 8px 16px;
      text-align: center;
      color: #000;
      border: 1px solid #000;
      border-radius: 8px; }
  #landing-page #imagae-2-contaier {
    text-align: center;
    padding: 24px 0; }
    #landing-page #imagae-2-contaier #image-2 {
      width: 250px; }
  #landing-page .title-box {
    margin-top: 16px;
    background: #EBEBEB;
    padding: 8px 24px;
    border-radius: 8px;
    font-weight: bolder; }
  #landing-page .common-box {
    padding: 24px;
    padding-top: 8px; }
    #landing-page .common-box a {
      text-decoration: underline;
      color: #000; }
  #landing-page #contact-box {
    margin-top: 24px;
    padding: 24px;
    background: #EFFCFF;
    text-align: center; }
    #landing-page #contact-box a {
      color: #000; }
  #landing-page #box2-notice {
    font-size: 16px;
    font-weight: bolder; }
  #landing-page .text-indent {
    padding-left: 1.5rem; }