* {
  padding: 0;
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
  background-color: #f6f6f6;
}

.container-fluid {
  padding: 0;
}

.main-body-container {
  margin-left: 340px;
  padding: 4.375rem 2rem 2rem 2rem;
}

.main-body-container section h2 {
  color: #667080;
  letter-spacing: 0.08rem;
  font-weight: 700;
}

.flex-widget-container {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 1rem;
}

.flex-widget-container .flex-box {
  width: 100%;
  height: 120px;
  border-radius: 10px;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.05);
          box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.05);
  position: relative;
}

.flex-widget-container .flex-box span {
  position: absolute;
  width: 83px;
  height: 83px;
  border-radius: 10px;
  left: 60px;
  top: -25px;
  -webkit-box-shadow: 0px 16px 6px rgba(0, 0, 0, 0.01), 0px 9px 5px rgba(0, 0, 0, 0.05), 0px 4px 4px rgba(0, 0, 0, 0.09), 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 16px 6px rgba(0, 0, 0, 0.01), 0px 9px 5px rgba(0, 0, 0, 0.05), 0px 4px 4px rgba(0, 0, 0, 0.09), 0px 1px 2px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
}

.flex-widget-container .flex-box span svg {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 1rem;
}

.flex-widget-container .flex-box:first-child span {
  background-color: #3D97ED;
}

.flex-widget-container .flex-box:nth-child(2) span {
  background-color: #E73775;
}

.flex-widget-container .flex-box:last-child span {
  background-color: #5EB562;
}

.flex-widget-container .flex-box div label {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-size: 1rem;
  color: #6C757D;
}

.flex-widget-container .flex-box div p {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-size: 3rem;
}

.latest-purchase-container,
.customer-loginID-container {
  background-color: #ffffff;
  padding: 1rem;
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
  -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05);
          box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05);
}

.table thead tr {
  letter-spacing: 0.1rem;
}

.table thead tr th {
  color: #3082D6;
  white-space: nowrap;
}

.table thead tr th:first-child {
  border-left: 1px solid #dee2e6;
}

.table thead tr th:last-child {
  border-right: 1px solid #dee2e6;
}

.table tbody tr td {
  letter-spacing: 0.06rem;
  white-space: nowrap;
}

.table tbody tr:hover {
  background-color: #d4e3f0;
}

table.dataTable.no-footer {
  padding: 1rem 0 2rem 0;
  border-bottom: none;
}

.dataTables_length label,
.dataTables_info,
.paginate_button,
.dataTables_filter label {
  letter-spacing: 0.05rem;
}

.dataTables_length select {
  border-radius: 10px !important;
  height: 40px;
  margin: 0 0.2rem;
}

.paginate_button {
  border-radius: 10px !important;
  border: none !important;
}

.paginate_button.current {
  background-color: #3082D6 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  color: #ffffff !important;
  font-weight: 700;
}

#monthpicker {
  border-radius: 10px;
  width: 7rem;
  text-align: center;
  height: 38px;
  border: none;
}

#monthpicker:focus {
  outline: none;
  border: none;
  box-shadow: none;
  border-color: inherit;
  -webkit-box-shadow: none;
}

#yearpicker {
  width: 6rem;
  text-align: center;
  border-radius: 10px;
  height: 38px;
  border: none;
}

#yearpicker:focus {
  outline: none;
  border: none;
  box-shadow: none;
  border-color: inherit;
  -webkit-box-shadow: none;
}

#notice_table {
  width: 100%;
}

#notice_table tbody tr td {
  cursor: pointer;
}

.table-container {
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 10px;
  -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05);
          box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05);
}

.right-side-news {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

.news-container {
  -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05);
          box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05);
  background-color: #fff;
  border-radius: 10px;
}

.news-container .news-h5-div {
  background-color: #ffcb18;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 2rem;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  gap: 0.7rem;
}

.news-container .news-h5-div h5 {
  color: #ffffff;
  margin-bottom: 0;
}

.news-container .news-content {
  height: auto;
  padding: 1rem 2rem;
}

.inquiry-salon-container {
  width: 70rem;
  margin: auto;
}

.inquiry-salon-container .inquiry-mail-container {
  width: 350px;
  height: 350px;
}

.inquiry-salon-container .inquiry-mail-container svg {
  width: 100%;
  height: 100%;
}

.inquiry-salon-container .right-form-container .inq-form-container {
  width: 35rem;
}

.inquiry-salon-container .right-form-container .inq-form-container .input-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0.5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 0 1rem 0;
  border: 1px solid #ced4da;
  border-radius: 10px;
  padding: 0.4rem 1.2rem;
}

.inquiry-salon-container .right-form-container .inq-form-container .input-container .form-control {
  background-color: transparent;
}

.customer-container {
  width: 30rem;
}

.customer-container .input-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0.5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 0 1rem 0;
  border: 1px solid #ced4da;
  border-radius: 10px;
  padding: 0.4rem 1.2rem;
}

.customer-container .input-container .form-control {
  background-color: transparent;
}

.path-c, .path-d,
.path-f, .path-g,
.path-h, .path-i,
.path-j {
  -webkit-transform: translate(-319.5px, -203.5px);
          transform: translate(-319.5px, -203.5px);
  opacity: 1;
}

.path-c, .path-d {
  -webkit-animation: animateshow 1.2s ease;
          animation: animateshow 1.2s ease;
}

.path-f,
.path-g {
  -webkit-animation: animateslide 2s ease;
          animation: animateslide 2s ease;
}

.path-h,
.path-i,
.path-j {
  -webkit-animation: animateslideright 2s ease;
          animation: animateslideright 2s ease;
}

@-webkit-keyframes animateshow {
  0% {
    -webkit-transform: translate(-319.5px, -503.5px);
            transform: translate(-319.5px, -503.5px);
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(-319.5px, -203.5px);
            transform: translate(-319.5px, -203.5px);
    opacity: 1;
  }
}

@keyframes animateshow {
  0% {
    -webkit-transform: translate(-319.5px, -503.5px);
            transform: translate(-319.5px, -503.5px);
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(-319.5px, -203.5px);
            transform: translate(-319.5px, -203.5px);
    opacity: 1;
  }
}

@-webkit-keyframes animateslide {
  0% {
    -webkit-transform: translate(-519.5px, -203.5px);
            transform: translate(-519.5px, -203.5px);
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(-319.5px, -203.5px);
            transform: translate(-319.5px, -203.5px);
    opacity: 1;
  }
}

@keyframes animateslide {
  0% {
    -webkit-transform: translate(-519.5px, -203.5px);
            transform: translate(-519.5px, -203.5px);
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(-319.5px, -203.5px);
            transform: translate(-319.5px, -203.5px);
    opacity: 1;
  }
}

@-webkit-keyframes animateslideright {
  0% {
    -webkit-transform: translate(-119.5px, -203.5px);
            transform: translate(-119.5px, -203.5px);
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(-319.5px, -203.5px);
            transform: translate(-319.5px, -203.5px);
    opacity: 1;
  }
}

@keyframes animateslideright {
  0% {
    -webkit-transform: translate(-119.5px, -203.5px);
            transform: translate(-119.5px, -203.5px);
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(-319.5px, -203.5px);
            transform: translate(-319.5px, -203.5px);
    opacity: 1;
  }
}

.page-header {
  height: 5rem;
  width: 100%;
  padding: 1rem;
  background-color: #0954A1;
  color: black;
  z-index: 1;
  position: fixed;
}

.page-header h3 {
  letter-spacing: 0.1rem;
  margin-bottom: 0 !important;
}

.page-header .btn-admin-signout {
  border-radius: 100%;
  padding: 0.5rem;
  width: 2.2rem;
  height: 2.2rem;
}

.page-header .btn-admin-signout svg {
  width: 100%;
  height: 100%;
}

.page-side-nav {
  width: 20%;
  position: fixed;
  height: 100%;
  background-color: #10163D;
  z-index: 2;
}

.page-side-nav-title {
  width: 100%;
  padding-top: 1.7rem;
  text-align: center;
}

.page-side-nav-title h3 {
  color: #D9D9D9;
}

.page-side-nav-links {
  margin-top: 3rem;
}

.page-side-nav-links ul a {
  text-decoration: none;
  color: inherit;
}

.page-side-nav-links ul a li {
  list-style: none;
  color: #D9D9D9;
  padding: 1rem;
}

.page-side-nav-links ul a li.active {
  background-color: #D9D9D9;
  color: #10163D;
}

.page-content {
  margin-left: 20%;
}

.salon-login-article {
  width: 100%;
  height: 100vh;
  place-content: center;
  display: -ms-grid;
  display: grid;
  background-color: #ffffff;
}

.salon-login-article section {
  width: 40rem;
  height: auto;
  border-radius: 1rem;
  z-index: 1052;
}

.salon-login-article section .salon-form h2 {
  color: #0954A1;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.2rem;
}

.salon-login-article section .salon-form h2.admin-class {
  color: #ff8057;
}

.salon-login-article section .salon-form div > label {
  color: #25201D;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.05rem;
}

.salon-login-article section .salon-form input {
  color: #1E86F2;
}

.salon-login-article section .salon-form input:focus {
  outline: none;
  border-color: inherit;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #1E86F2;
}

.salon-login-article section .salon-form input:-webkit-autofill,
.salon-login-article section .salon-form input :-webkit-autofill:hover,
.salon-login-article section .salon-form input :-webkit-autofill:focus,
.salon-login-article section .salon-form input :-webkit-autofill:active {
  /* use animation hack, if you have hard styled input */
  -webkit-transition: all 5000s ease-in-out 0s;
  transition: all 5000s ease-in-out 0s;
  -webkit-transition-property: background-color, color;
  transition-property: background-color, color;
  /* if input has one color, and didn't have bg-image use shadow */
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  /* text color */
  -webkit-text-fill-color: #1E86F2;
  /* font weigth */
  font-weight: 500 !important;
}

.salon-login-article section .salon-form input.admin-class {
  color: #ff8057;
}

.salon-login-article section .salon-form input.admin-class:focus {
  color: #ff8057;
}

.salon-login-article section .salon-form input.admin-class:-webkit-autofill,
.salon-login-article section .salon-form input.admin-class :-webkit-autofill:hover,
.salon-login-article section .salon-form input.admin-class :-webkit-autofill:focus,
.salon-login-article section .salon-form input.admin-class :-webkit-autofill:active {
  -webkit-text-fill-color: #ff8057;
}

.salon-login-article section .salon-form .input-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0.5rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 0 1rem 0;
  border: 1px solid #ced4da;
  border-radius: 10px;
  padding: 0.4rem 1.2rem;
}

.salon-login-article section .salon-form .btn-login {
  background-color: #1E86F2;
  font-size: 1.1rem;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.1rem;
  border-radius: 20px;
  color: #ffffff;
  gap: 1rem;
}

.salon-login-article section .salon-form .btn-login:hover {
  background-color: #0954A1;
}

.salon-login-article section .salon-form .btn-login.admin-class {
  background-color: #ff8057;
}

.salon-login-article section .salon-form .btn-login.admin-class:hover {
  background-color: #fc5922;
}

.btn-signout {
  background-color: #ffffff;
  font-size: 1.1rem;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.1rem;
  border-radius: 20px;
  color: #6E7191;
  border: 2px solid #ffffff;
  gap: 1rem;
}

.btn-signout:hover {
  border: 2px solid #FF213C;
  color: #FF213C;
}

.btn-signout:hover svg path {
  stroke: #FF213C;
}

.btn-viewCode {
  background-color: #ffffff;
  font-size: 1.1rem;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.1rem;
  border-radius: 20px;
  color: #1E86F2;
  border: 2px solid #1E86F2;
}

.btn-viewCode:hover {
  background-color: #1E86F2;
  color: #ffffff;
}

#salon_Code {
  color: #25201D;
  font-style: normal;
  letter-spacing: 0.25rem;
  font-weight: 700;
  color: #1E86F2;
}

.admin-article {
  padding-top: 6rem !important;
}

.salon-table {
  border: 1px solid #ced4da;
}

.salon-table thead {
  background-color: #1E86F2;
  color: #ffffff;
  letter-spacing: 0.15rem;
  font-size: 1.25rem;
}

.salon-table tbody tr {
  letter-spacing: 0.1rem;
  font-weight: 500;
}

.btn-register-salon {
  background-color: #1E86F2;
  color: #ffffff;
  border-radius: 5px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.11rem;
}

.btn-register-salon:hover {
  background-color: #0954A1;
}

.btn-delete-salon:hover {
  -webkit-transform: scale(1.1, 1.1);
          transform: scale(1.1, 1.1);
}

#successSendModal .modal-body,
.successModal .modal-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1rem;
}

#successSendModal .modal-body div:first-child,
.successModal .modal-body div:first-child {
  width: 100px;
  margin: 4em auto 0;
}

#successSendModal .modal-body div:first-child svg .checkmark,
.successModal .modal-body div:first-child svg .checkmark {
  stroke: #5EB562;
  stroke-dashoffset: 745.74853515625;
  stroke-dasharray: 745.74853515625;
  -webkit-animation: dash 1s ease-out forwards;
          animation: dash 1s ease-out forwards;
}

#successSendModal .modal-body h1,
.successModal .modal-body h1 {
  color: #5EB562;
}

.btn-register,
.btn-send {
  background-color: #0954A1;
  color: #ffffff;
  letter-spacing: 0.05rem;
  border-radius: 10px;
  max-width: 200px;
  margin-bottom: 10px;
}

.btn-select {
  background-color: #ffffff;
  border: 2px solid #3082D6;
  color: #3082D6;
  border-radius: 10px;
  letter-spacing: 0.05rem;
  font-weight: 600;
}

.btn-viewInquiry {
  background-color: transparent;
  padding: 0;
  color: #3082D6;
  letter-spacing: 0.05rem;
}

.btn-viewInquiry:hover {
  background-color: #3082D6;
  color: #ffffff;
}

.modal-content {
  border-radius: 10px !important;
}

.form-control {
  border-radius: 10px !important;
}

@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 745.74853515625;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 745.74853515625;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.notice-salon-container {
  gap: 1rem;
}

#btn_changePW,
#btn_saveNewPW {
  border-radius: 10px;
  letter-spacing: 0.08rem;
  background-color: #ffffff;
}

#btn_changePW {
  color: #0954A1;
  border: 2px solid #3082D6;
}

#btn_saveNewPW {
  color: #408544;
  border: 2px solid #5EB562;
}

.monthly-total-container {
  gap: 1rem;
  padding: 1rem;
  background-color: #ffffff;
  border-radius: 10px;
  -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05);
          box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05);
  max-width: 25rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.monthly-total-container h2 {
  color: #3082D6;
}

.monthly-total-container h4 {
  letter-spacing: 0.08rem;
}

@media only screen and (max-width: 576px) {
  .flex-widget-container .flex-box span {
    left: 16px;
    width: 63px !important;
    height: 63px !important;
  }
}

@media only screen and (max-width: 768px) {
  .flex-widget-container {
    gap: 2.5rem;
  }
  .flex-widget-container .flex-box span {
    width: 83px;
    height: 83px;
  }
  .inquiry-salon-container {
    width: 100% !important;
  }
  .notice-salon-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #notice_containter,
  #notice_table {
    width: 100%;
  }
}

@media only screen and (max-width: 992px) {
  .inquiry-salon-container {
    width: 50rem;
  }
}
/*# sourceMappingURL=style.css.map */