.salon-add{
padding: 10px;width: 100%;margin-bottom: 5.8rem;
}
.salon-add p{
line-height: 1.8;margin: 10px 0;
}
.salon-add .imageads{
width: 100%;margin-top: 0px;margin: 10px 0;
}
.salon-add .imageads .glam-upload-button{
height: 120px;width: 120px;border-radius: 10px;min-width: 120px;background: #ddd;transition: 0.3s all;
}
.salon-add .imageads .glam-upload-button:hover{
background: #c9c9c9;
}
.salon-add .imageads #imageContainerNewAds{
width: 100%;display: flex;flex-wrap: wrap;
}
.salon-add .imageads #imageInputNewAds {
display: none;
}
.salon-add .imageads .custom-upload-button{
color: #999;
}
.salon-add .custom-upload-button svg{
color: #999;transition: 0.3s all;left: 0;top: 0;width: 50px;height: 50px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}
.salon-add .gallery-image{
position: relative;left:0;top:0;border-radius: 10px;padding: 0px;overflow: hidden;border: 1.2px solid #ddd;transition: transform 0.3s ease, opacity 0.3s ease;
width: calc(16.6666666667% - 10px);background: #ffffff;margin: 5px;aspect-ratio: 1 / 1;object-fit: cover;
}
.salon-add .gallery-image.fade-out {
transform: scale(1);opacity: 1;
}
.salon-add .gallery-image.fade-in {
transform: scale(0.9);opacity: 0.5;
}
.salon-add .image-item-newads img{
border-radius: 10px;height: 100%;width: 100%;vertical-align: middle;object-fit: cover;
}
.salon-add .image-item-newads .main-image-label-newads{
position: absolute;
bottom: 0;left: 0;
width: 100%;color: white;padding: 5px 3px;font-size: 13px;font-weight: bold;z-index: 2;background: #52525A;text-align: center;
}
.salon-add .delete-btn-newads {
position: absolute;
top: 0;
right: 0;margin-top: 5px;margin-right: 5px;
background-color: var(--main-color);
color: white;
border: none;
border-radius: 5px;
width: 25px;
height: 25px;
cursor: pointer;
font-size: 14px;
}
.salon-add .delete-btn-newads svg{
position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);
width: 20px;
height: 20px;
cursor: pointer;
font-size: 14px;
}
.salon-add .delete-btn-newads:hover {
background-color: darkred;
}
.salon-add .gallery-image .gallery-image-shimmer {
border-radius: 10px;height: 100%;width: 100%;animation: shimmer 3s;animation-iteration-count: infinite;background: linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%);background-size: 1000px 100%;
}
@keyframes shimmer {
from {
background-position: -1000px 0;
} to {
background-position: 1000px 0;
}
}
.glam-file-input{
margin-top: 0.5rem;
margin-bottom:1rem;
}
.glam-file-input label {
color: #333;font-size: 14px;font-weight: bold;
padding-bottom: 0.5rem; }
.glam-file-input .glaminput{
width: 100%;
background: #FFFFFF;
border: 1.2px solid rgba(0, 0, 0, 0.2);
padding: 0.7rem;transition: 0.3s all;
border-radius: 5px;
margin-top: 0.5rem;
margin-bottom:0.0rem;
outline-color: transparent;
outline-width: 0; }
.glam-file-input .glaminput.ltr{
direction:ltr;
}
.salon-add .glam-file-input textarea{
width: 100%;height: 150px;font-size: 12px;font-weight: 500;overflow: auto;background: #FFFFFF;
border: 1.2px solid rgba(0, 0, 0, 0.2);
padding: 0.7rem;transition: 0.3s all;margin-top: 0.5rem;
margin-bottom:0rem;border-radius: 5px;
}
.salon-add .glam-file-input .editable-box{
position: relative;width: 100%;min-height: 150px;font-size: 12px;font-weight: 500;background: #FFFFFF;
border: 1.2px solid rgba(0, 0, 0, 0.2);
padding: 0.7rem;transition: 0.3s all;margin-top: 0.5rem;
margin-bottom:0rem;border-radius: 5px;line-height: 1.8;
}
.salon-add .glam-file-input .editable-box:empty::before {
content: attr(data-placeholder);
color: #999;
}
.glam-file-input .glaminput:hover{
border: 1.2px solid var(--main-color);transition: 0.3s all;
}
.glam-file-input .glaminput:disabled{
opacity: 0.5 !important;cursor: not-allowed;
}
.gf2input{
display: flex;align-self: center;margin: 10px 0;
}
.gf2input .glam-file-input{
width: 100%;
}
.gf2input .glam-file-input .glaminput{
border-radius: 0 10px 10px 0;
}
.gf2input .glam-file-input:last-child .glaminput{
border-radius: 10px 0 0 10px;
}
.gf2input .glam-file-input .glaminput:disabled{
opacity: 1 !important;cursor: not-allowed;
}
.buttom-gf{
width: 100%;height: 50px;background: var(--main-color);position: relative;left: 0;overflow: hidden;border-radius: 10px;
}
.buttom-gf button{
color: white;width: 100%;height: 100%;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);font-size: 13px;font-weight: bold;
}
.step_glamfindper-wrapper {
overflow-x: auto;
display: flex;
padding: 20px 10px;
width: 100%;
}
.custom-step_glamfindper {
display: flex;
list-style: none;
direction: rtl;
position: relative;
}
.step_glamfind {
position: relative;
text-align: right;
min-width: 130px;
transition: all 0.4s ease;
}
.step_glamfind:last-child{
min-width: 100px;
}
.step_glamfind:not(:last-child)::after {
content: '';
position: absolute;
top: 14px;
left: 8px;
width: calc(100% - 45px);
height: 3px;
background: #ccc;
z-index: 0;
border-radius: 3px;
transition: background 0.4s ease;
}
.step_glamfind.done:not(:last-child)::after {
background: rgba(var(--color-rgba), 0.8);
}
.step_glamfind.active:not(:last-child)::after {
background: linear-gradient(to left, var(--main-color) 50%, #ccc 50%);
transition: background 0.4s ease;
}
.step_circle {
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 10px;
background-color: transparent;
display: inline-block;
position: relative;
z-index: 1;
border: 1.4px solid #ccc;
transition: all 0.4s ease;
}
.step_glamfind.active .step_circle {
background-color:var(--main-color);
color: var(--main-color);
box-shadow: 0 0 0 3px rgba(var(--color-rgba), 0.3);
border: 1.4px solid var(--main-color);
}
.step_glamfind.done .step_circle {
background-color: rgba(var(--color-rgba), 0.8);
border: 1.4px solid rgba(var(--color-rgba), 0.5);box-shadow: 0 0 0 3px rgba(var(--color-rgba), 0.3);
}
.step_glamfind .step_circle:after{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: block;
content: "";
width: 17px;
height: 17px;
object-fit: cover;
vertical-align: middle;
transition: all 0.4s ease;
}
.step_glamfind.done .step_circle:after{
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='4' stroke='%23fff'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 12.75 6 6 9-13.5' /%3e%3c/svg%3e ");
}
.step_glamfind.active .step_circle:after{
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M4.5 7.5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-9a3 3 0 0 1-3-3v-9Z' clip-rule='evenodd' /%3e%3c/svg%3e");
}
.step_glamfind .step_circle:after{
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ccc'%3e%3cpath fill-rule='evenodd' d='M4.5 7.5a3 3 0 0 1 3-3h9a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-9a3 3 0 0 1-3-3v-9Z' clip-rule='evenodd' /%3e%3c/svg%3e");
}
.step_glamfind .step_label {
margin-top: 8px;
font-size: 12px;
color: #444;
font-weight: bold;
transition: color 0.4s ease;
}
.name_label{
margin: 8px 0;
color: #333;
font-size: 14px;font-weight: bold;
}
.name_label-p{
margin: 0px 0;
color: #777;
font-size: 12px;font-weight: 500;
}
.noahow{
display:none;
}
.add_salon_services{
padding: 0.4em 0;margin-top: 1rem;
}
.add_salon_services .ad-sn-svis{
display: flex;align-items: center;justify-content: center;padding: 10px 15px;border: 1.2px dashed #777;border-radius: 15px;color: #444;font-size: 13px;font-weight: bold;
}
.add_salon_services .ad-sn-svis svg{
width: 25px;height: 25px;margin-right: auto;
}
.add_salon_services .add-sln-services{
margin-top: 1.5rem;display: flex;flex-wrap: wrap;flex-direction: column-reverse;position: relative;
}
.lodinghf{
position: absolute;left: 0%;top: 0%;
width: 100%;z-index: 10;
height: 100%;background: #ffffff9e;
}
.spinnergf{
width: 30px;
height: 30px;
border: 4px solid #f3f3f3;
border-top: 4px solid var(--main-color);
border-radius: 50%;
animation: spinnergf 1.2s linear infinite;
position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%) rotate(0deg);
}
@keyframes spinnergf {
0% { transform: translate(-50%,-50%) rotate(0deg); }
100% { transform: translate(-50%,-50%) rotate(360deg); }
}
.add_salon_services .add-sln-services .add-sln-item{
background: #eee;padding: 10px;overflow: hidden;position: relative;top: 0;border-radius: 10px;width: calc(50% - 16px);margin: 8px;
}
.add_salon_services .add-sln-services .add-sln-item .input-services{
display: flex;
}
.add_salon_services .add-sln-services .add-sln-item .input-services .inputservices:last-child{
margin-right:10px;
}
.add_salon_services .add-sln-services .add-sln-item .inputservices{
width: 100%;margin-bottom: 10px;
}
.add_salon_services .add-sln-services .add-sln-item .inputservices label{
font-size: 12px;font-weight: bold;color: #333;
}
.add_salon_services .add-sln-services .add-sln-item .inputservices .inputservicesn{
width: 100%;padding: 8px;border: 1px solid #999;border-radius: 10px;margin-top: 5px;font-size: 12px;font-weight: 500;color: #333;
}
.add_salon_services .add-sln-services .add-sln-item .inputservices textarea{
width: 100%;height: 100px;overflow: auto;padding: 8px;border: 1px solid #777;border-radius: 10px;margin-top: 5px;font-size: 12px;font-weight: 500;color: #333;line-height: 1.8;
}
.salon_services .dfsalon{
display: flex;width: 100%;
}
.salon_services .inputservices{
padding-bottom:10px;width: 100%;
}
.salon_services .dfsalon .inputservices:last-child{
padding-right:10px;
}
.salon_services label{
font-size: 12px;font-weight: bold;color: #333;
}
.salon_services .inputservicesn{
width: 100%;padding: 8px;border: 1px solid #999;border-radius: 10px;margin-top: 5px;font-size: 12px;font-weight: 500;color: #333;background-color:#fff;
}
.salon_services textarea{
width: 100%;height: 100px;overflow: auto;padding: 8px;border: 1px solid #777;border-radius: 10px;margin-top: 5px;font-size: 12px;font-weight: 500;color: #333;line-height: 1.8;margin-bottom: 10px;background-color:#fff;
}
.add_salon_services .add-sln-services .add-sln-item .add_salon_ses-footer{
display: flex;align-items: center;justify-content: space-between;
}
.add_salon_services .add-sln-services .add-sln-item .add_salon_ses-footer .adsSDelete{
font-size: 13px;font-weight: bold;color: var(--main-color);
}
.salon_facilities h4{
font-size: 14px;font-weight: bold;margin: 10px 0;padding-top: 15px;
}
.checkbox-gf{
display: flex;align-items: center;
}
.checkbox-gf.fgv1{
padding-bottom: 0.8rem;flex-direction: column;width: calc(20% - 10px);margin: 5px;
}
.checkbox-gf.fgv1 .checkbox-gf-name{
padding-bottom: 0.5rem;height:30px;
font-size: 12px;font-weight: bold;
}
.checkbox-gf .checkbox-gf-name{
font-size: 14px;font-weight: bold;padding-right:0.5rem;
}
.checkbox-gf .switch {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.checkbox-gf .switch input {
display:none;
}
.checkbox-gf .slider {
background-color: #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
}
.checkbox-gf .slider:before {
background-color: #fff;
bottom: 4px;
content: "";
height: 26px;
right: 4px;
position: absolute;
transition: .4s;
width: 26px;
}
.checkbox-gf input:checked + .slider {
background-color: var(--main-color);
}
.checkbox-gf.cr-new input:checked + .slider {
background-color: #34C759;
}
.checkbox-gf input:checked + .slider:before {
transform: translateX(-26px);
}
.checkbox-gf .slider.round {
border-radius: 34px;
}
.checkbox-gf .slider.round:before {
border-radius: 50%;
}
.working-hours{
width: 100%;background: white;border-radius: 15px;margin: 10px 0;
}
.working-hours .sname{
font-size: 14px;font-weight: bold;padding-bottom: 1rem;
}
.flex-wrap{
display: flex;flex-wrap: wrap;
}
.working-hours .working-hours-items{
border-bottom: 1.2px solid #ddd;padding:0.5rem 0rem;margin: 5px;width: calc(50% - 10px);
}
.working-hours .working-hours-items:last-child{
border-bottom:transparent;
}
.working-hours .working-hours-items .working-hours-days{
display: none;
}
.working-hours .working-hours-items .working-hours-days .working-hours-days-fg{
display: flex;align-items: center;justify-content: space-between;margin-top: 1rem;font-size: 12px;
}
.working-hours .working-hours-items .working-hours-days .working-hours-days-new{
display: flex;align-items: center;
}
.working-hours .working-hours-items .working-hours-days .working-hours-days-new .Morning-Start{
font-size: 14px;font-weight: bold;color: var(--main-color);margin: 0 5px;
}
.working-hours .working-hours-items .working-hours-days .working-hours-days-new .Morning-End{
font-size: 14px;font-weight: bold;color: var(--main-color);margin: 0 5px;
}
.time-modal-backdrop{
position: fixed;
inset: 0;
display: none;
align-items: flex-end;
justify-content: center;
background: rgba(0,0,0,0.45);
z-index: 9999;
}
.time-modal-backdrop.show {
display:flex;
}
.time-modal-backdrop .time-panel {
width: 100%;
max-width: 500px;
background: #fff;
top: 50%;left: 50%;transform: translate(-50%,-50%);
position: absolute;
border-radius: 25px;
padding: 10px 0px 18px;
box-shadow: 0 -8px 30px rgba(0,0,0,0.18);
}
@keyframes slideUpBackdrop{
from{ transform:translateY(30px) translate(-50%,-0%);}
to{ transform:translateY(0) translate(-50%,-0%);}
}
.time-modal-backdrop .header{
display:flex;
justify-content:space-between;
align-items:center;padding: 10px 10px;
}
.time-modal-backdrop .header button{
border:none;
background:none;
padding:6px 10px;
font-size:14px;font-weight: 500;
cursor:pointer;color: #777;
}
.time-modal-backdrop .header button#okBtn{
font-weight: bold;color: var(--main-color);
}
.time-modal-backdrop .title{
flex:1;
text-align:center;
font-size:16px;
font-weight:bold;
}
.time-modal-backdrop .picker-row{
display:flex;
gap:10px;
justify-content:center;
align-items:center;
position:relative;
height: 260px;
margin-top:12px;
}
.time-modal-backdrop .wheel{
width:120px;
height: 260px;
overflow-y: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
scroll-snap-type: y mandatory;
text-align:center;
border-radius:10px;
}
.time-modal-backdrop .wheel::-webkit-scrollbar{
display:none;
}
.time-modal-backdrop .item{
height: 44px;
line-height: 44px;
scroll-snap-align:center;
font-size:20px;font-weight: 500;
user-select:none;color: #7b7b7b;transition: color 0.2s;
}
.time-modal-backdrop .item.selected{
color: #333;font-weight: bold;
}
.time-modal-backdrop .spacer{
height: 108px;
}
.time-modal-backdrop .selector{
position:absolute;
top: calc(50% - 22px);
left:0px;
right:0px;
height: 44px;
background: transparent;
border-radius:0px;
border-bottom: 1.5px solid #ddd;
border-top: 1.5px solid #ddd;
pointer-events:none;
}
.time-modal-backdrop #preview{
text-align:center;
margin-top:20px;
min-height: 20px;font-size:13px;font-weight: 500;
cursor:pointer;color: #777;
}
.modal-picker {
display: none;
position: fixed;
inset:0;
background: rgba(0,0,0,.4);
backdrop-filter: blur(6px);
justify-content: center;
align-items: flex-end;
z-index: 9999;
}
.modal-picker.show{ display: flex; }
.modal-picker .picker-box {
width: 100%;
max-width: 500px;
background: #fff;
border-top-left-radius:22px;
border-top-right-radius: 22px;
border-bottom-left-radius:0px;
border-bottom-right-radius: 0px;
padding: 10px 0px 18px;left: 50%;transform: translateY(-50%);bottom:0;
position: absolute;
box-shadow: 0 -8px 30px rgba(0,0,0,0.18);
animation: slideUpBackdrop .25s ease forwards;
text-align: center;
}
.modal-picker .picker-header {
display: flex;
justify-content: space-between;
margin-bottom: 0px;padding: 10px 20px;
}
.modal-picker .cancel-btn, .ok-btn{
background:none;
border:none;
font-size:14px;font-weight: 500;
cursor:pointer;color: #777;
}
.modal-picker .ok-btn { font-weight: bold; color: var(--main-color);}
.modal-picker .picker-title {
font-weight:bold;
font-size:16px;
text-align:center;
flex:1;
}
.modal-picker .picker-wheel-wrapper {
position: relative;
height: 180px;
width: 100%;
display: flex;
justify-content: center;
overflow: hidden;
}
.modal-picker .picker-wheel {
height: 100%;
flex: 1;
overflow-y: scroll;
text-align: center;
font-size: 22px;
-webkit-overflow-scrolling: touch;
scroll-snap-type: y mandatory;
margin: 0 5px;
direction: rtl;
}
.modal-picker .picker-wheel .item {
height: 44px;
line-height: 44px;
scroll-snap-align: center;
font-size: 18px;
color: #666;font-weight: 500;
transition: color .2s;
}
.modal-picker .picker-wheel .spacer { height: 88px; }
.modal-picker .picker-wheel-highlight {
position: absolute;
top: calc(50% - 22px);
left: 0;
right: 0;
height: 44px;
pointer-events: none;
border-top: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
}
.modal-picker .picker-wheel .item.active {
color: red;
font-weight: bold;
}
.modal-picker .preview-text {
font-size: 15px;
font-weight: bold;
margin-top: 10px;
}
.glam-file-input{
margin-top: 0.5rem;
margin-bottom:1.5rem;
}
.glam-file-input label {
font-weight: bold;
color: #000000;
margin-bottom: 0.5rem; }
.glam-file-input .glaminput {
width: 100%;
background: #FFFFFF;
border: 1.2px solid rgba(0, 0, 0, 0.2);
padding: 0.7rem;transition: 0.3s all;
border-radius: 5px;
margin-top: 0.5rem;
margin-bottom:0.5rem;
outline-color: transparent;
outline-width: 0; }
.glam-file-input .glaminput.textarea {
height: 150px;font-size: 12px;font-weight: 500;overflow: auto;
}
.glam-file-input .glaminput:hover{
border: 1.2px solid var(--main-color);transition: 0.3s all;
}
.glam-file-input .glaminput:disabled{
opacity: 0.5 !important;cursor: not-allowed;
}
.glam-file-input.new label {
z-index: 1;font-size: 12px;background: white;padding: 0 5px;margin-right: 15px;}
.glam-file-input.new .glaminput {
padding: 1rem 1rem 1rem 1rem;border-radius: 15px;
}
.glam-file-input .inputicon input{
padding-left: 2.5rem;
}
.glam-file-input .inputicon svg{
position: absolute;left: 0;top: 50%;width: 20px;transform: translateY(-50%);margin-left: 10px;color: #aaa;
}
.input-group-gf{
display: flex;align-self: center;width: 100%;text-align: center;
}
.input-group-gf .glam-file-input{
width: 100%;margin-left: 0 2.5px;margin-right: 2.5px;
}
.input-group-gf .glam-file-input .glaminput{
text-align: center;width: 100%;border-radius: 8px;
}
.input-group-gf .glam-file-input .textinput .glaminput{
padding-left: 3rem;text-align: left;direction: ltr;
}
.input-group-gf .glam-file-input .textinput .glaminput-text-left{
position: absolute;top: 50%;left: 0;transform: translateY(-50%);margin-left: 10px;
}
.gfPhone{
background: transparent;margin: 0;padding: 0;margin-top: 1rem;
}
.gfPhone .gfPhoneCountry{
padding: 0.8rem;border: 1.2px solid rgba(0, 0, 0, 0.2);border-radius: 15px;display: flex;align-items: center;align-self: center;margin-bottom: 20px;
}
.gfPhone .gfPhoneCountry img{
width: 30px;margin-left: 10px;
}
.gfPhone .gfPhoneCountry label{
z-index: 1;font-size: 12px;background: white;padding: 0 5px;margin-right: 15px;top: -10px;
}
.gfPhone .gfPhoneCountry svg{
width: 20px;position: absolute;left: 0;top: 50%;transform: translateY(-50%);margin-left: 10px;
}
.gfPhone .glam-file-input label{
z-index: 1;font-size: 12px;background: white;padding: 0 5px;margin-right: 15px;
}
.gfPhone .glam-file-input .inputicon{
direction: ltr;height: 100%;width: 100%;
}
.gfPhone .glam-file-input .inputicon .glaminput{
padding: 1rem 1rem 1rem 65px;border-radius: 15px;
}
.gfPhone .glam-file-input .inputicon .phone-input-country-code{
position: absolute;left: 5px;top: 50%;transform: translateY(-50%);margin-left: 15px;padding-right: 10px;
}
.gfPhone .glam-file-input .inputicon .phone-input-country-code .PhoneNumberTextField_Dividerl{
background: rgba(0, 0, 0, 0.2);height: 100%;width: 1px;display: block;content: "";position: absolute;right: 0;top: 50%;transform: translateY(-50%);
}
@media (max-width: 768px) {
.salon-add .gallery-image{
width: calc(20% - 10px);background: #ffffff;margin: 5px;
}
}
@media (max-width: 500px) {
.checkbox-gf.fgv1{
width: calc(33.3333333333% - 10px);margin: 5px
}
.salon-add .gallery-image{
width: calc(33.3333333333% - 10px);background: #ffffff;margin: 5px;
}
.add_salon_services .add-sln-services .add-sln-item{
width: calc(100% - 16px);margin: 8px;
}
.working-hours .working-hours-items{
margin: 5px;width: calc(100% - 10px);
}
.time-modal-backdrop .time-panel {
width: 100%;
max-width: 500px;
background: #fff;
border-top-left-radius:22px;
border-top-right-radius: 22px;
border-bottom-left-radius:0px;
border-bottom-right-radius: 0px;
padding: 10px 0px 18px;left: 50%;transform: translate(-50%,-0%);bottom: 0;
position: absolute;
box-shadow: 0 -8px 30px rgba(0,0,0,0.18);
animation: slideUpBackdrop .25s ease forwards;
}
}
@media (max-width: 320px) {
.checkbox-gf.fgv1{
width: calc(50% - 10px);margin: 5px
}
}