@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');
* {margin: 0; padding: 0;}

body {
  font-family: 'Poppins', sans-serif !important;
  background-color: #f7f2f0 !important;
}
.page-header{ height:150px; }
.page-header .panel.wrapper{ background: transparent; border: 0;}
.page-header .header.panel{ max-width: 1170px; position: relative;}
.page-header .logo{ margin: 0px; position: absolute; left: 50%; top: 15px; transform: translateX(-50%);}
.page-header .logo img{ width:auto; height:80px; }
.panel.header .switcher .action.toggle{ color:#000; text-transform:uppercase; font-size:14px; }
.panel.header .switcher .action.toggle strong{ margin-right: -6px;}
.page-header .panel.wrapper .switcher .options .action.toggle:after{ font-size:32px !important; }
.page-header .panel.wrapper .switcher .options ul.dropdown{ border:1px solid #d5d5d5; min-width:120px; }
.page-header .panel.wrapper .switcher .options ul.dropdown a{ font-size:13px; text-transform:uppercase; }
.page-header .panel.wrapper .switcher .options ul.dropdown a:hover{color: #c05786;}
.page-header .panel.wrapper .switcher .options ul.dropdown li:hover{ background:none; }
.page-header a.my-accunt { display: inline-block; float: right; margin-left: 20px; font-size: 13px; text-transform: uppercase; color: #000;}
.page-header a.my-accunt:hover{ color: #c05786; } 
#maincontent{max-width: 1170px;}
body.appointment-index-index .page-title-wrapper{ display:none; }
#notComplete, #submitGood, #dbError {
  display:none;
}
#results {
  margin: 0 auto;
  text-align:center;
  width:600px;
  margin-top:50px;
  color:#222;
}

#msform input, #msform textarea, #msform select {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  font-family: montserrat;
  color: #222;
  font-size: 13px;
}

/*headings*/
.fs-title {
  font-size: 15px;
  text-transform: uppercase;
  color: #222;
  margin-bottom: 10px;
}
.fs-subtitle {
  font-weight: normal;
  font-size: 13px;
  color: #666;
  margin-bottom: 20px;
}

/*progressbar*/
#progressbar {
  max-width: 800px;
  margin: 0px auto;
  margin-bottom: 40px;
  overflow: hidden;
  padding: 0;
  text-align: center;
}
#progressbar li {
  list-style-type: none;
  color: #c9c9c9;
  font-size: 14px;
  font-weight: 500;
  width: 20%;
  float: left;
  position: relative;
}
#progressbar li:after {
  content: "";
  width: 36px;
  height: 36px;
  line-height: 36px;
  display: block;
  font-size: 16px;
  color: #FFF;
  background: #c9c9c9;
  border-radius: 50%;
  margin: 6px auto 5px auto;
}
#progressbar li:before {
  content: '';
  width: 100%;
  height: 4px;
  background: #c9c9c9;
  position: absolute;
  left: -50%;
  top: 42px;
  z-index: -1;
}
#progressbar li:first-child:before { content: none; }
#progressbar li.active:after,  #progressbar li.active:before{background: #c05786;color: #fff;}
#progressbar li.active{ color:#c05786; }
#progressbar li.active:after{content: '\2713';}

#msform { position: relative;}
.element-content, #section-two, #section-three, #section-four, #section-five{ text-align:left; margin-bottom:25px; }
#section-five{ margin-bottom:0; }
#msform section:not(:first-of-type) {display: none;}
h1.title{ font-size: 30px; font-weight: 600; text-transform: uppercase; margin-bottom: 25px;}
.application_area{ background: #fff; padding: 50px; border-radius: 20px;  box-shadow:0px 2px 10px rgba(0,0,0,0.3); text-align: center;}
.application_area .section_title{ text-align: left; font-size: 24px; font-weight: 500; padding-bottom: 15px; border-bottom: 2px solid #ddd; margin-bottom: 20px; }

.storelist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; margin: 0px -15px;}
.storelist li { margin: 15px 0; width: 50%; padding: 0 15px;}
.storelist li label { border: 1px solid #ccc; border-radius: 10px; display: block; padding: 15px; cursor: pointer;}
.storelist li .city_name{ font-size: 17px; font-weight: 500; color: #666; border-bottom: 1px solid #e3e3e3; padding-bottom: 5px; margin-bottom: 5px;}
.storelist li .branch_name { font-size: 14px; color: #000; font-weight: 500; margin-bottom: 5px;}
.storelist li .address { font-size: 13px; color: #333;}
.storelist li .address:before{ content:"\f041"; font-family:FontAwesome; display:inline-block; margin-right:5px; }
.storelist li input[type="radio"]{ display:none; }
.storelist li input[type="radio"]:checked + label{ background:#f9eef3; border-color:#f9eef3; }
#info_messege_app, #info_messege_slot, #info_messege_package{ font-size:13px; color:#f00; text-align: left;}
#msform .btn_area{ text-align:center; margin-top: 20px;}
#msform .action-button{ margin: 10px 5px; background: #d389aa; color: #fff; border-radius: 4px; width: auto; padding: 12px 30px; border: 0; font-size: 16px; transition: 0.4s; font-family: 'Poppins', sans-serif;}
#msform .action-button:hover{ background:#222; }
#msform .action-button:focus{ box-shadow:none; }
#msform .section_five{ position:relative; text-align: left;}
#msform .section_five .action-button { margin: 0;}
#msform .section_five form .action-button{ position: absolute; right: 0; bottom: 0;}

.packagelist { list-style: none; padding: 0; display: flex; flex-wrap: wrap; margin: 0px -15px;}
.packagelist li { margin: 15px 0; width: 50%; padding: 0 15px;}
.packagelist li label { border: 1px solid #ccc; border-radius: 10px; display: block; padding: 15px; cursor: pointer;}
.packagelist li .info{ font-size: 17px; font-weight: 500; color: #666; margin-bottom: 5px;}
.packagelist li .duration_price{ font-size: 12px; color: #000; border-bottom: 1px solid #e3e3e3; padding-bottom: 5px; margin-bottom: 10px;}
.packagelist li .duration_price span{ margin-right:15px; font-weight:500; }
.packagelist li .duration_price span:last-child{ margin-right:0; }
.packagelist li .duration_price .fa{ font-size: 12px; margin-right:3px; }
.packagelist li .description { font-size: 12px; color: #333;}
.packagelist li input[type="radio"]{ display:none; }
.packagelist li input[type="radio"]:checked + label{ background:#f9eef3; border-color:#f9eef3; }

.datetime_slot{ display: flex; flex-wrap: wrap; margin: 0px -15px; }
.datetime_slot_col { padding: 0 15px; width: 50%; margin: 15px 0;}
.datetime_slot_col h4{ font-size:16px; margin-bottom: 20px; padding-bottom:10px; border-bottom:1px solid #ddd;}
#msform .ui-datepicker .ui-datepicker-title .ui-datepicker-month, #msform .ui-datepicker .ui-datepicker-title .ui-datepicker-year{ appearance: auto; width: 47%; padding: 0 10px; margin-bottom: 0;}
.timeslot label{ margin:0 15px 15px 0; }
.timeslot label input{ display:none; }
.timeslot label span{ display:block; border:1px solid #ccc; padding:10px 30px; font-size: 14px;border-radius: 6px; cursor: pointer;}
.timeslot label input[type="radio"]:checked + span{ background:#c05786; border-color:#c05786;color: #fff;  }
.ui-datepicker{ box-shadow:none; }
.package_details{}
.package_details span{ display: inline-block; font-size: 14px; font-weight: normal; background: #c05786; color: #fff; border-radius: 20px; padding: 5px 20px; margin-right: 5px;}
.package_details span .fa{ margin-right: 5px;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{ top:10px; }
.title_container{ margin-bottom: 25px;}
.title_container h2{ font-size: 16px; font-weight: 400;}
.from_group{ display:flex; flex-wrap:wrap; margin:0px -15px; }
.from_group .input_field{ padding:0 15px; width:50%; margin-bottom: 20px; position: relative;}
.from_group .input_field .fa{ display:none; }
.from_group .input_field.col_full{ width:100% }
#msform .input_field input[type="text"], #msform .input_field textarea, #msform .input_field input[type="email"], #msform .input_field input[type="date"], #msform .input_field select{ font-size: 14px; height: 44px; background: #fff9fc; padding: 5px 15px; border: 1px solid #eee; margin: 0;}
#msform .input_field textarea{ height:100px; }
#msform .input_field select{ appearance: auto; -webkit-appearance: auto;}
#msform .input_field input[type="text"]:focus, #msform .input_field textarea:focus, #msform .input_field input[type="email"]:focus, #msform .input_field input[type="date"]:focus, #msform .input_field select:focus{ outline:none; box-shadow:none; }

.from_group .field.newsletter{ width: 100%; padding: 0 15px; margin-bottom:20px;}
.from_group .field.newsletter input[type="checkbox"]{opacity: 0; visibility: hidden; height: 0; margin: 0; }
.from_group .field.newsletter label{ font-size:14px; position: relative; line-height: 20px; padding-left: 35px;}
.from_group .field.newsletter label:before{ content:""; width:20px; height:20px; border-radius:4px; background: #eee; position: absolute; left: 0; top: 0; text-align: center;}
.from_group .field.newsletter input[type="checkbox"]:checked + label:before{ content: '\2713'; background: #c05786; color: #fff;}

.store_info{ padding-bottom: 15px; border-bottom: 2px solid #ddd; margin-bottom: 20px;}
.store_info h4{ font-size: 24px; font-weight: 500;}
.store_info p{ margin:10px 0 0; font-size:14px; }
.store_info p .fa{ margin-right:5px; }
.customer_info, .package_info { background: #fff7fb; border-radius: 8px; overflow: hidden; margin: 40px 0;}
.customer_info h4{ margin: 0; background: #c05786; color: #fff; padding: 20px; font-size: 22px; text-transform: uppercase; font-weight: 600;}
.customer_info ul { list-style: none; padding: 20px; display: flex; flex-wrap: wrap; margin: 0 -15px;}
.customer_info ul li { width: 33.33%; padding: 0 15px; font-size: 15px; color: #666; margin: 15px 0;}
.customer_info ul li.col_full{ width:100%; }
.customer_info ul li span { display: block; font-weight: 600; color: #000; margin-bottom: 5px;}
.package_info h4 { padding: 20px 20px 0; font-size: 22px; text-transform: uppercase; font-weight: 600;}
.package_info ul{ margin:0; padding:20px; list-style:none; }
.package_info ul li { margin: 7px 0; font-size: 16px; font-weight: 500; color: #333;}
.package_info ul li .fa{ margin-right:5px; }
.package_info .price{ background:#ffeff7; padding:10px 20px; color:#c05786; font-size:22px; font-weight:600; text-align: right; }
.package_info .price .fa{ margin-right:5px; }

#cancel_pop { position: fixed; top: 0; left: 0; z-index: 1060; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; background: rgba(0,0,0,0.5); outline: 0;}
.cancel_pop_content{ min-height: 200px; padding: 25px; border-radius: 5px; box-shadow: 0px 5px 30px -10px #000000a6; width: 500px; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); animation: show_modal 0.5s ease;}
#cancel_pop .pop-content{ font-size:13px; }
#cancel_pop .comfirm{ font-size:13px; margin-top:15px; }
#cancel_pop .msg { color: #5caf28; font-size: 15px; margin-top: 20px;}

@keyframes show_modal{
  
  0%{top:20%;transform:translate(-50%,-50%);opacity:0;visibility:hidden;pointer-events:none;}
  
  100%{top:50%;transform:translate(-50%,-50%);opacity:1;visibility:visible;pointer-events:all;}
}

.close{
  
  float: right;
    width: 25px;
    height: 25px;
    padding: 2px;
    text-align: center;
    display: flex;
    align-items: center;
    cursor: pointer;
    line-height: 5px;
    justify-content: center;
    font-size: 15px;
    border: 1px solid #000;
    border-radius: 50%;
}

#my-orders-table tr td a.action.view{cursor:pointer;}

body.account #maincontent{ background: #fff; border-radius: 20px; box-shadow: 0px 2px 10px rgb(0 0 0 / 30%); margin-bottom: 40px; padding: 40px 20px;}
body.account .columns{ display:flex; flex-wrap:wrap; }
body.account .column.main{ margin: 0; padding-bottom: 20px;}
body.account .sidebar.sidebar-main{ border-right: 1px solid #ddd; flex-basis: inherit; }
.sidebar.sidebar-main .block-collapsible-nav .content{ background:none; padding: 0;}
.sidebar.sidebar-main .block-collapsible-nav .item{ width: 100%; margin: 0;}
.sidebar.sidebar-main .block-collapsible-nav .item a{ width: 100%; font-size: 14px; padding: 15px; border-left: 0;}
.sidebar.sidebar-main .block-collapsible-nav .item.current{ background:#eee; }
.sidebar.sidebar-main .block-collapsible-nav .item strong{ color: #c05786; font-size: 14px; font-weight: 500; padding: 15px; width: 100%; border: 0;}
.sidebar.sidebar-main .block-collapsible-nav .item .delimiter{ margin:0; }
.account .page-title-wrapper .page-title{ margin-bottom:25px; }
.account .column.main .block:not(.widget) .block-title{}
.account .column.main .block:not(.widget) .block-title strong{ font-size:18px; }
.account .column.main .block:not(.widget) .box-title span{ font-size:14px; font-weight:600; }
.account .box .box-content{ font-size:14px; }
.account .block .box-actions a{ font-size:12px; text-transform:uppercase;  color: #c05786;}
.account .data.table{ font-size:12px; }
.account .table > :not(:last-child) > :last-child > *{ font-weight:600; }

.customer-account-login .page-title-wrapper, .customer-account-forgotpassword .page-title-wrapper{ text-align:center; margin-bottom:20px; }
.login-container .block.block-customer-login{ max-width: 540px; background: #fff; border-radius: 20px; box-shadow: 0px 2px 10px rgb(0 0 0 / 30%); padding: 30px; margin: 0px auto; float: none;}
.login-container .fieldset:after{ display:none; }
.login-container .block.block-customer-login .field.note, .form.password.forget .field.note{ font-size:13px; }
.login-container .fieldset > .field > .label, .form.password.forget .fieldset > .field > .label{ font-size:14px; font-weight:500; }
.login-container .fieldset > .field > .control{ width:100%; }
.login-container .input-text, .form.password.forget .input-text{ height:40px; border:1px solid #ccc; }
.login-container .input-text:focus, .form.password.forget .input-text:focus{ box-shadow:none; outline:none; }
.login-container .actions-toolbar .primary .action.login, .form.password.forget .action.submit{ background: #c05786; border: 0; padding: 12px 30px; text-transform: uppercase;}
.login-container .actions-toolbar .primary .action.login:hover, .form.password.forget .action.submit:hover{ background:#333; }
.login-container .actions-toolbar a.action.remind{ color: #c05786; font-size: 13px;}
.form.password.forget{ max-width: 540px; background: #fff; border-radius: 20px; box-shadow: 0px 2px 10px rgb(0 0 0 / 30%); padding: 30px; margin: 0px auto; float: none;}
.form.password.forget .fieldset:after{ display:none; }
.pop-content table { max-width: 200px;}
.pop-content table td { border-bottom: 1px solid #ccc; padding: 5px 0;}

@media(max-width:991px){
  .application_area{ padding:30px 20px; }
  .storelist li{ width:100%; }
}
@media(max-width:991px){
  .page-header{ padding-top:15px; height: 120px;}
  .panel.header .switcher{ display:block; }
  .nav-toggle{ display:none; }
  .page-header .logo img{ height:60px; }
  .packagelist li{ width:100%; }
  .datetime_slot_col{ width:100%; }
  .from_group .input_field{ width:100%; }
  .customer_info ul li{ width:100%; margin:10px 0; }
  .customer_info h4{ font-size:18px; }
  .package_info h4{ font-size:18px; }
  #msform .action-button{ font-size:14px; padding: 12px 20px; }
  .application_area .section_title{ font-size:20px; }
  h1.title{ font-size:24px; }
  #progressbar li{ font-size:12px; }
  #progressbar li:after { width: 30px; height: 30px; line-height: 30px;}
  #progressbar li:before{ top:37px; }
  }