/* ~~~ [Start global rules] ~~~ */
html {
  box-sizing: border-box
}
*::before,
*,
*::after {
  box-sizing: inherit
}

body {
  font-family: Muli, Montserrat, Roboto, Lato, Raleway, 'Open sans', sans-serif
}

::selection {
  color: var(--color-light-x1);
  background-color: var(--color-crimson-x1)
}

:focus {
  outline: none
}
/* ~~~ [End global rules] ~~~ */

/* =========================================
   === Start My Own Framework Components ===
   ========================================= */

/* Start CSS variables */
:root {
  --color-dark-x1: #010101;
  --color-dark-x2: #333;
  --color-dark-x3: #666;
  --color-dark-x4: #999;
  --color-light-x1: #fafafa;
  --color-light-x2: #efefef;
  --color-light-x3: #e0e0e0;
  --color-light-x4: #ccc;
  --color-crimson-x1: #ed104d;
  --color-crimson-x2: #f23e70;
  --color-crimson-x3: #f56f94;
  --color-crimson-x4: #f89fb7;
  --color-blue-x1: #223658;
  --color-blue-x2: #385890;
  --color-blue-x3: #577dbe;
  --color-blue-x4: #8fa8d4;
  --color-yellow-x1: #fcca0e;
  --color-yellow-x2: #fdd53e;
  --color-yellow-x3: #fddf6e;
  --color-yellow-x4: #feea9f;
  --color-violet-x1: #690efc;
  --color-violet-x2: #873efd;
  --color-violet-x3: #a56efd;
  --color-violet-x4: #c39ffe;
  --color-green-x1: #005e3a;
  --color-green-x2: #007d4d;
  --color-green-x3: #009c60;
  --color-green-x4: #00e38c
}

/* End CSS variables */

/* Start color palette */
.dark-color_x1 {color: var(--color-dark-x1)}
.dark-bg-color_x1 {background-color: var(--color-dark-x1)}
.dark-color_x2 {color: var(--color-dark-x2)}
.dark-bg-color_x2 {background-color: var(--color-dark-x2)}
.dark-color_x3 {color: var(--color-dark-x3)}
.dark-bg-color_x3 {background-color: var(--color-dark-x3)}
.dark-color_x4 {color: var(--color-dark-x4)}
.dark-bg-color_x4 {background-color: var(--color-dark-x4)}
.light-color_x1 {color: var(--color-light-x1)}
.light-bg-color_x1 {background-color: var(--color-light-x1)}
.light-color_x2 {color: var(--color-light-x2)}
.light-bg-color_x2 {background-color: var(--color-light-x2)}
.light-color_x3 {color: var(--color-light-x3)}
.light-bg-color_x3 {background-color: var(--color-light-x3)}
.light-color_x4 {color: var(--color-light-x4)}
.light-bg-color_x4 {background-color: var(--color-light-x4)}
.crimson-color_x1 {color: var(--color-crimson-x1)}
.crimson-bg-color_x1 {background-color: var(--color-crimson-x1)}
.crimson-color_x2 {color: var(--color-crimson-x2)}
.crimson-bg-color_x2 {background-color: var(--color-crimson-x2)}
.crimson-color_x3 {color: var(--color-crimson-x3)}
.crimson-bg-color_x3 {background-color: var(--color-crimson-x3)}
.crimson-color_x4 {color: var(--color-crimson-x4)}
.crimson-bg-color_x4 {background-color: var(--color-crimson-x4)}
.blue-color_x1 {color: var(--color-blue-x1)}
.blue-bg-color_x1 {background-color: var(--color-blue-x1)}
.blue-color_x2 {color: var(--color-blue-x2)}
.blue-bg-color_x2 {background-color: var(--color-blue-x2)}
.blue-color_x3 {color: var(--color-blue-x3)}
.blue-bg-color_x3 {background-color: var(--color-blue-x3)}
.blue-color_x4 {color: var(--color-blue-x4)}
.blue-bg-color_x4 {background-color: var(--color-blue-x4)}
.yellow-color_x1 {color: var(--color-yellow-x1)}
.yellow-bg-color_x1 {background-color: var(--color-yellow-x1)}
.yellow-color_x2 {color: var(--color-yellow-x2)}
.yellow-bg-color_x2 {background-color: var(--color-yellow-x2)}
.yellow-color_x3 {color: var(--color-yellow-x3)}
.yellow-bg-color_x3 {background-color: var(--color-yellow-x3)}
.yellow-color_x4 {color: var(--color-yellow-x4)}
.yellow-bg-color_x4 {background-color: var(--color-yellow-x4)}
.violet-color_x1 {color: var(--color-violet-x1)}
.violet-bg-color_x1 {background-color: var(--color-violet-x1)}
.violet-color_x2 {color: var(--color-violet-x2)}
.violet-bg-color_x2 {background-color: var(--color-violet-x2)}
.violet-color_x3 {color: var(--color-violet-x3)}
.violet-bg-color_x3 {background-color: var(--color-violet-x3)}
.violet-color_x4 {color: var(--color-violet-x4)}
.violet-bg-color_x4 {background-color: var(--color-violet-x4)}
.green-color_x1 {color: var(--color-green-x1)}
.green-bg-color_x1 {background-color: var(--color-green-x1)}
.green-color_x2 {color: var(--color-green-x2)}
.green-bg-color_x2 {background-color: var(--color-green-x2)}
.green-color_x3 {color: var(--color-green-x3)}
.green-bg-color_x3 {background-color: var(--color-green-x3)}
.green-color_x4 {color: var(--color-green-x4)}
.green-bg-color_x4 {background-color: var(--color-green-x4)}
/* End color palette */

/* Start layout */
.f-left {float: left}
.f-right {float: right}
.f-none {float: none}
.f-clear {clear: both}

.p-sticky {position: sticky}
.p-relative {position: relative}
.p-absolute {position: absolute}
.p-fixed {position: fixed}

.p-absolute--centered {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.p-absolute--full-width {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
/* End layout */

/* Start cursor */
.cursor-pointer {cursor: pointer}
/* End cursor */

/* Start image */
.img-responsive {
  display: block;
  width: 100%;
  object-fit: cover
}
/* End Images */

/* Start white space separator */
.section-padding__separator--top {padding-top: 80px}
.section-padding__separator--bottom {padding-bottom: 80px}

.embedded-section-margin__separator--top {margin-top: 40px}
.embedded-section-margin__separator--bottom {margin-bottom: 40px}
/* End white space separator */

/* [Typography] */
/* Start alignment */
.text-center {text-align: center}
.text-justify {text-align: justify}
.text-left {text-align: left}
.text-right {text-align: right}

.text-decoration-none {text-decoration: none}

.text-uppercase {text-transform: uppercase}
/* End alignment */

.letter-spacing--2 {letter-spacing: 2px}

/* Start font size */
.text-responsive,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-top: 0;
  margin-bottom: 0
}

.text-responsive {
  font-size: 14px;
  line-height: 1.6
}

.h1 {font-size: 48px}
.h2 {font-size: 40px}
.h3 {font-size: 32px}
.h4 {font-size: 24px}
.h5 {font-size: 20px}
.h6 {font-size: 18px}

.text__margin--top,
.h6__margin--top {
  margin-top: 8px
}
.text__margin--bottom,
.h6__margin--bottom {
  margin-bottom: 8px
}

.h1__margin--top {margin-top: 20px}
.h1__margin--bottom {margin-bottom: 20px}

.h2__margin--top {margin-top: 16px}
.h2__margin--bottom {margin-bottom: 16px}

.h3__margin--top {margin-top: 14px}
.h3__margin--bottom {margin-bottom: 14px}

.h4__margin--top {margin-top: 12px}
.h4__margin--bottom {margin-bottom: 12px}

.h5__margin--top {margin-top: 10px}
.h5__margin--bottom {margin-bottom: 10px}
/* End font size */

/* Start font weight */
.font-thin {font-weight: 100}
.font-extralight {font-weight: 200}
.font-light {font-weight: 300}
.font-regular {font-weight: 400}
.font-medium {font-weight: 500}
.font-semibold {font-weight: 600}
.font-bold {font-weight: 700}
.font-extrabold {font-weight: 800}
.font-heavy {font-weight: 900}
/* End font weight */
/* [/Typography] */

/* Start border radius */
.rounded__corner--0 {border-radius: 0}
.rounded__corner--2 {border-radius: 2px}
.rounded__corner--5 {border-radius: 5px}
.rounded__corner--10 {border-radius: 10px}
.rounded__corner--100 {border-radius: 100px}
/* End border radius */

/* Start lists */
.list-style-none {
  list-style-type: none;
  margin: 0;
  padding: 0
}
/* End lists */

/* Start forms */
input,
select,
[type="submit"] {
  border-style: solid
}

.form-group {
  margin-bottom: 24px
}

.form-label {
  margin-bottom: 8px
}

.form-control {
  padding: 16px 8px
}
/* End forms */


/* Start buttons */
.button {
  padding: 16px 32px;
  border: none
}
/* End buttons */

/* =======================================
   === End My Own Framework Components ===
   ======================================= */


/* ### Start Login Page ### */
.login__illustration {
  height: 100vh
}

.login__input {
 padding: 16px 8px;
 border-color: var(--color-light-x4);
 border-left: 2px solid var(--color-blue-x2)
}

.login__input:focus {
  border: 2px solid var(--color-blue-x3)
}

.login__submit {
  transition: background-color 240ms linear
}

.login__submit:hover {
  color: var(--color-light-x1);
  background-color: var(--color-blue-x2)
}
/* ### End Login Page ### */


/* ### Start Owner Page ### */
.navbar {
  width: 100%;
  top: 0;
  z-index: 1000
}

.hamburger__icon {
  width: 32px;
  height: 32px
}

.hamburger__icon span,
.hamburger__icon span::before,
.hamburger__icon span::after {
  width: 100%;
  height: 2px;
  left: 0
}

.hamburger__icon span {
  top: calc(50% - 1px);
  transition: background-color 240ms linear
}

.hamburger__icon span::before,
.hamburger__icon span::after {
  content: '';
  display: block;
  position: absolute;
  transition-property: top, transform;
  transition-duration: 240ms, 240ms;
  transition-delay: 240ms, 0;
  background-color: var(--color-blue-x1)
}

.hamburger__icon span::before {
  top: -8px
}

.hamburger__icon span::after {
  top: 8px
}

.hamburger__icon--is-open span {
  background-color: transparent;
  transition-duration: 120ms 
}

.hamburger__icon--is-open span::before,
.hamburger__icon--is-open span::after {
  top: calc(50% - 1px);
  transition-delay: 0, 240ms
}

.hamburger__icon--is-open span::before {
  transform: rotate(45deg)
}

.hamburger__icon--is-open span::after {
  transform: rotate(-45deg)
}

.dots__icon-container {
  padding: 8px;
  transition: background-color 120ms linear
}

.dots__icon-container:hover {
  background-color: var(--color-blue-x3)
}

.dots__icon {
  width: 16px;
  height: 24px
}

.navbar__brand {
  padding: 20px;
  padding-right: 0
}

.sidebar,
.navbar__sub {
  top: 100%;
  left: 0;
  transition: transform 240ms ease-in-out
}

.navbar__sub {
  padding: 20px;
  width: 100%;
  z-index: 2;
  transform: translateX(100%);
  background-color: #d3ddee
}

.navbar__sub--is-open {
  transform: translateX(0)
}

.search__input {
  border: 2px solid var(--color-light-x4);
  padding-left: 16px
}

.search__input:focus {
  border: 2px solid var(--color-blue-x3)
}

.search__icon {
  width: 32px;
  height: 32px;
  padding: 8px;
  top: 50%;
  transform: translateY(-50%);
  right: 8px
}

.logout__link:hover .logout__icon {
  transform: translateX(4px)
}

.logout__icon {
  width: 20px;
  margin-left: 8px;
  transition: transform 120ms linear
}

.sidebar {
  width: 320px;
  height: calc(100vh - 100%);
  padding-top: 40px;
  padding-bottom: 40px;
  overflow-y: auto;
  transform: translateX(-100%);
  z-index: 1
}

.sidebar--is-open {
  transform: translateX(0)
}

.sidebar__list:last-child {
  margin-bottom: 20px
}

.sidebar__item {
  padding-left: 16px;
  padding-right: 16px
}

.sidebar__link {
  color: inherit;
  padding: 8px;
  transition: background-color 120ms linear
}

.sidebar__link:hover,
.sidebar__link:focus,
.sidebar__link--active {
  background-color: rgba(143, 168, 212, 0.25)
}

.sidebar__icon {
  width: 24px;
  margin-right: 16px
}

.cart__number {
  margin-left: 16px;
  padding: 4px 8px
}

.main-content {
  padding: 48px 0 16px
}

/* [Dashboard] */

.table__container {
  margin-bottom: 32px
}

.table {
  box-shadow: 0 0 10px rgba(8, 8, 8, 0.16),
              0 0 20px rgba(128, 128, 128, 0.08)
}

.table__head {
  padding: 20px 0
}

.table__content {
  padding: 4px
}

.table__item {
  padding: 8px;
  margin: 8px
}

.table__item:nth-child(2n) {
  background-color: var(--color-light-x2)
}

.table__head {
  border-bottom: 2px solid var(--color-blue-x4)
}

.item__value,
.icon__trash,
.icon__pdf {
  padding: 4px
}

/* [Shopping Cart] */
.shopping-cart .table__head,
.shopping-cart .table__row,
.invoice-items .table__head,
.invoice-items .table__row {
  padding: 10px
}

.shopping-cart .table__head,
.data-table .table__head {
  border-top: 2px solid var(--color-blue-x4)
}

.invoice-items .table__head {
  border-top: 2px solid var(--color-light-x4);
  border-bottom: 2px solid var(--color-light-x4)
}

.data-table {
  overflow-x: auto
}

.table__column {
  padding: 8px
}

.table__row:nth-child(2n + 1) {
  background-color: var(--color-light-x2)
}

.product__quantity {
  padding: 12px 8px;
  max-width: 80px;
  border: 2px solid #cbd7eb
}

.icon__trash,
.icon__pdf {
  width: 32px
}

.shopping-summary .table__item:nth-child(2n),
.invoice-summary .table__item:nth-child(2n) {
  background-color: transparent
}

.shopping-summary__total {
  padding-top: 20px
}

.shopping-summary__total {
  border-top: 2px solid var(--color-light-x3)
}

.invoice-summary__total {
  border-bottom: 2px solid var(--color-light-x3)
}

.shopping-summary__button--clear {
  margin-right: 8px
}

.shopping-summary__button--clear,
.shopping-summary__button--charge,
.invoice-summary__button--charge,
.invoice-summary__button--print,
.dress__add-button,
.form__add-button,
.modal__button,
.dress__added-button {
  transition: background-color 120ms linear
}

.shopping-summary__button--clear:hover {
  background-color: var(--color-crimson-x1)
}

.invoice-summary__button--charge:hover,
.invoice-summary__button--print:hover {
  background-color: var(--color-dark-x1)
}

.shopping-summary__button--charge:hover,
.dress__add-button:hover,
.form__add-button:hover,
.modal__button--add:hover {
  background-color: var(--color-blue-x1)
}

.dress__added-button:hover {
  background-color: var(--color-green-x2)
}

.dress__add-button:disabled:hover {
  background-color: var(--color-crimson-x2)
}

.dress__added-button:disabled:hover {
  background-color: var(--color-green-x3)
}

.dress__add-button {
  padding: 12px 8px
}
/* [Dress] */
.dress-card {
  padding: 16px
}

.card__content {
  padding: 16px;
  background-color: #edf1f8
}

.dress__name,
.dress__designer,
.dress__type,
.dress__numbers,
.dress__remaining {
  padding: 8px
}

.dress__name {
  border-bottom: 2px solid #d3ddee
}

.dress__type span,
.dress__remaining span {
  padding: 4px
}

.dress__promotion {
  margin-right: 20px
}

.dress__price--has-promotion {
  text-decoration: line-through;
  margin-right: 8px
}

.dress__price--new {
  color: #009c60
}

.dress__add-illustration,
.dress__checked-illustration {
  width: 20px;
  margin-left: 8px
}

/* [Users] */
.users__add-container {
  margin-bottom: 24px
}

.add__icon {
  width: 20px;
  margin-left: 4px
}

.icon__edit,
.icon__view {
  width: 24px
}

.icon__edit {
  margin-right: 10px
}

.icon__view {
  margin-right: 4px
}

.main-content--is-open::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.55);
  z-index: 1
}

.modal-container {
  max-width: 640px;
  padding: 0 20px 20px;
  z-index: 2
}

.modal-container.p-absolute {
  top: 20px;
  left: 50%;
  transform: translateX(-50%)
}

.modal-container.p-fixed {
  top: 160px;
  left: auto;
  transform: none
}

.modal__form-container {
  background-color: #fff;
  padding: 40px 20px 20px;
  box-shadow: 0 0 32px #999;
  z-index: 1;
  display: none
}

.modal__form {
  margin-top: 16px
}

input.modal__form--message-error,
input.modal__form--message-error:focus {
  color: var(--color-crimson-x1);
  border: 2px solid var(--color-crimson-x3)
}

div.modal__form--message-error {
  margin-top: 8px;
  font-weight: 600;
  color: var(--color-crimson-x2)
}

.notification__massage {
  margin-left: 8px
}

.dress__add-to-cart .notification__massage {
  margin-left: 0
}

.notification__message--success {
  color: #009c60
}

.notificaiton__message--error {
  color: #ff0033
}

.notificaiton__message--warning {
  color: #ff7b00
}

.modal__input {
  border: 2px solid var(--color-light-x4);
  width: 100%
}

.modal__input:focus {
  border: 2px solid var(--color-blue-x3)
}

.modal__close-container {
  width: 24px;
  padding: 4px;
  top: 16px;
  right: 16px
}

.modal__close-container  img {
  transition: transform 240ms ease-in-out
}

.modal__close-container:hover img {
  transform: rotate(180deg)
}

.modal__button--edit {
  background-color: #ff9900
}

.modal__button--edit:hover {
  background-color: #ff6600
}

.modal__button--delete:hover {
  background-color: var(--color-crimson-x1)
}

.general-info__box {
  margin-bottom: 32px;
  background-color: rgba(87, 125, 190, 0.2)
}
.general-info__icon {
  max-width: 48px;
  margin: auto;
  margin-bottom: 24px
}

/* [Stylists] */
.manage-content .table__column--ml {
  padding-left: 32px
}
/* ### End Owner Page ### */

/* ### Start Access Denied Page ### */
.access-denied__box {
  background-color: rgba(248, 159, 183, 0.5)
}

.access-denied__box,
.not-found__box,
.general-info__box,
.info__box {
  padding: 32px
}
.access-denied__icon,
.not-found__icon,
.info__icon {
  max-width: 64px;
  margin: auto;
  margin-bottom: 24px
}
/* ### End Access Denied Page ### */

/* ### Start Not Found Page ### */
.not-found__box {
  background-color: rgba(248, 227, 159, 0.5)
}
/* ### End Not Found Page ### */

.info__box {
  background-color: rgba(143, 168, 212, 0.25)
}

/* ### Start Invoice Page ### */
.invoice__illustration {
  max-width: 280px
}

.property__name {
  display: inline-block;
  min-width: 80px;
  margin-right: 8px
}

.invoice__label {
  min-width: 160px;
  margin-right: 8px
}

.invoice__input {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #c0c0c0;
  padding: 0 4px 4px 2px
}

.invoice__input.invoice__form--message-error {
  color: var(--color-crimson-x1);
  border-bottom: 2px solid var(--color-crimson-x1)
}

.invoice__input:disabled {
  color: var(--color-dark-x4);
  background-color: var(--color-light-x3)
}

.invoice__input--info {
  border: 1px solid #c0c0c0;
  padding: 8px
}

.invoice__label--info {
  min-width: 80px;
  margin-right: 8px
}

.invoice__icon {
  width: 20px;
  right: 8px;
  z-index: -1
}

.invoice__subhead {
  margin-bottom: 28px
}
/* ### End Invoice Page ### */

/* ### Start Color Page ### */
.color-palette--value {
  min-width: 80px
}
.color-palette--illustration {
  margin-left: 8px;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  border: 1px solid rgba(128, 128, 128, 0.4)
}

.dress-managing__section .color-palette--value,
.cart-managing__section .color-palette--value,
.invoice-managing__section--confirm .color-palette--value {
  min-width: auto
}

.item__name .color-palette--value {
  min-width: 48px
}

.dress-managing__section .color-palette--illustration {
  margin-left: 6px;
  width: 12px;
  height: 12px
}

.table__column--invoice-status span {
  padding: 2px 4px
}
/* ### End Color Page ### */












/* ===========================
   === Start Media Queries ===
   =========================== */

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
  
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
  /* ==================================
     === Start Framework Components ===
     ================================== */
  
  /* Start white space separator */
  .section-padding__separator--top {padding-top: 100px}
  .section-padding__separator--bottom {padding-bottom: 100px}

  .embedded-section-margin__separator--top {margin-top: 50px}
  .embedded-section-margin__separator--bottom {margin-bottom: 50px}
  /* End white space separator */

  /* Start font size */
  .text-responsive {
    font-size: 16px
  }

  .h1 {font-size: 54px}
  .h2 {font-size: 46px}
  .h3 {font-size: 38px}
  .h4 {font-size: 30px}
  .h5 {font-size: 24px}
  .h6 {font-size: 20px}
  /* End font size */
  
  /* ================================
     === End Framework Components ===
     ================================ */

  /* ### Start Login Page ### */
  .login__footer span:first-child {
    text-align: left
  }
  .login__footer span:last-child {
    text-align: right
  }
  /* ### End Login Page ### */
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  /* ==================================
     === Start Framework Components ===
     ================================== */

  /* Start white space separator */
  .section-padding__separator--top {padding-top: 120px}
  .section-padding__separator--bottom {padding-bottom: 120px}

  .embedded-section-margin__separator--top {margin-top: 60px}
  .embedded-section-margin__separator--bottom {margin-bottom: 60px}
  /* End white space separator */

  /* Start font size */
  .text-responsive {
    font-size: 16px;
    line-height: 1.6
  }

  .h1 {font-size: 60px}
  .h2 {font-size: 52px}
  .h3 {font-size: 44px}
  .h4 {font-size: 36px}
  .h5 {font-size: 30px}
  .h6 {font-size: 22px}
  /* End font size */

  /* ================================
     === End Framework Components ===
     ================================ */

  /* ### Start Login Page ### */
  .login__footer span:first-child,
  .login__footer span:last-child {
    text-align: center
  }
  /* ### End Login Page ### */

  /* ### Start Owner Page ### */
  .navbar__brand {
    text-align: left;
  }

  .navbar__sub {
    padding: 0;
    background-color: transparent;
    transform: translateY(-50%);
    top: 50%;
    left: auto;
    right: 0
  }

  .search__form .form-group {
    margin-bottom: 0
  }

  .logout__link {
    justify-content: flex-end;
  }

  .navbar__sub,
  .sidebar {
    transition: none
  }

  .sidebar {
    transform: translateX(0)
  }

  .main-content {
    padding: 48px 16px 16px
  }
  /* ### End Owner Page ### */

  .modal-container.p-fixed {
    left: 50%;
    transform: translateX(calc(160px - 50%))
  }
}

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
  /* ### Start Login Page ### */
  .login__footer span:first-child {
    text-align: left;
  }
  .login__footer span:last-child {
    text-align: right
  }
  /* ### End Login Page ### */
}


/* =========================
   === End Media Queries ===
   ========================= */