/* ######################################## DM Sans Serif ######################################## */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap'); /* ######################################## DM Sans Serif Display ######################################## */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap'); /* ######################################## global Style ######################################## */ *{ margin: 0; padding: 0; box-sizing: border-box;} body,html {overflow-x: hidden; max-width: 2560px;height: 100%; margin: 0 auto;background: var(--white);} img{max-width: 100%;height: auto;} a,span { display: inline-block;} a { text-decoration: none;} a:hover { transition-duration: 0.3s; -webkit-transition-duration: 0.3s;} button{font-family: var(--primary-font-family);} button:focus { border: none; box-shadow: none !important;} ul,ol{ list-style: none;padding: 0; margin: 0;} /* Chrome, Safari, Edge, Opera */ input.form-control::-webkit-outer-spin-button, input.form-control::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0 !important; } /* Firefox */ input[type=number] { -moz-appearance: textfield !important; } /* ######################################## global Color Style ######################################## */ :root{ --primary-font-family: "DM Sans", sans-serif; --secondary-font-family: "DM Serif Display", serif; --white: #FFFFFF; --black: #000000; --default-color: #311371; --shade-01:#6E2EF9; --shade-02:#F1EAFE; --shade-03:#F8F5FF; --shade-04:#F4BAFF; --shade-05:#F8F8F8; --primary-color: #0A0A0A; --secondary-color: #474747; --tertiary-color: #848484; --disabled-color: #CECECE; --sucess-color: #7DDB25; --info-color: #00B2F4; --warning-color: #FFCE22; --error-color:#F10021; --border-color:#E5E5E5; --light-pink:#FCEAFF; --tag-color:#F3F3F5; } /* ######################################## Typography ######################################## */ .title-style-1{ margin: 0; padding: 0; font-size: 48px; line-height: 41px; font-weight: 400; font-family: var(--secondary-font-family); letter-spacing: -0.32px; color: var(--primary-color); } .title-style-2{ margin: 0; padding: 0; font-size: 34px; line-height: 41px; font-weight: 400; font-family: var(--secondary-font-family); letter-spacing: -0.32px; color: var(--primary-color); } .title-style-3{ margin: 0; padding: 0; font-size: 28px; line-height: 34px; font-weight: 400; font-family: var(--secondary-font-family); letter-spacing: -0.32px; color: var(--primary-color); } .title-style-4{ margin: 0; padding: 0; font-size: 22px; line-height: 28px; font-weight: 400; font-family: var(--secondary-font-family); letter-spacing: -0.24px; color: var(--primary-color); } .title-style-5{ margin: 0; padding: 0; font-size: 20px; line-height: 24px; font-weight: 400; font-family: var(--secondary-font-family); letter-spacing: -0.24px; color: var(--primary-color); } p{font-size: 17px;font-weight: 400;line-height: 22px;color: var(--primary-color); font-family: var(--primary-font-family);} .medium-p{ font-size: 16px; line-height: 21px; font-weight: 400; color: var(--primary-color); } .medium-l-p{ font-size: 15px; line-height: 20px; font-weight: 400; color: var(--primary-color); } .small-p{ font-size: 13px; line-height: 18px; font-weight: 400; color: var(--secondary-color); } .bg-white{background: var(--white);} .black{color: var(--black);} /* ######################################## Primary Button ######################################## */ .primary-btn{ display: inline-block; text-align: center; padding: 10px 16px; font-size: 15px; line-height: 20px; font-weight: 700; font-family: var(--primary-font-family); background: var(--default-color); color: var(--white); border-radius: 12px; border: none; transition: 0.2s all; } .primary-btn:hover{ box-shadow: 0px 0px 0px 2px rgb(0 0 0 / 12%);color: var(--white); } .primary-btn-large { display: block;width: 100%; text-align: center; padding: 17px 16px; font-size: 17px; line-height: 22px; font-weight: 700; font-family: var(--primary-font-family); background: var(--default-color); color: var(--white); border-radius: 12px; border: none; transition: 0.2s all; } .primary-btn-large:hover { box-shadow: 0px 0px 0px 2px rgb(0 0 0 / 12%); } /* ######################################## Header CSS ######################################## */ .header-navigation{ padding: 16px 0;background: var(--white);} .header-navigation .header-left .header-logo{ display: flex; align-items: center; gap: 16px; } .header-navigation .header-left .header-logo span{ font-size: 17px; font-weight: 500; color: var(--black); font-family: var(--primary-font-family); } .header-navigation .header-right{ display: flex; align-items: center; gap: 12px; } .header-navigation .header-right .nav-link{ padding: 9px 12px; font-size: 17px; font-weight: 400; line-height: 22px; color: var(--primary-color); font-family: var(--primary-font-family); transition: 0.3s all; } .header-navigation .header-right .nav-link:hover{font-weight: 500;} /* ######################################## Top Text CSS ######################################## */ .top-text-section{padding: 51px 0 35px;} .top-title{text-align: center;margin-bottom: 32px;} .top-title .title-style-1{position: relative;margin-bottom: 16px;} .top-title .title-style-1::after{ content: ""; position: absolute; width: 63px; height: 42px; background: url('../images/text-star.png'); background-size: cover; background-repeat: no-repeat; bottom: 0; } .top-title p{margin-bottom: 0;} /* ######################################## category CSS ######################################## */ .category-section{padding-bottom: 43px;} .category-wrapper { /* display: flex; flex-wrap: wrap; */ padding: 24px 0; border-top: 1px solid var(--border-color); /* gap: 16px; justify-content: center; */ } .category-wrapper .slick-slide { margin: 0px 10px; } /* .category-wrapper>div{ width: calc(100% / 8 - 16px); } */ .category-box { padding: 15px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; border: 1px solid var(--border-color); border-radius: 8px; height: 100%; min-height: 117px; transition: 0.5s all; } .category-box img { width: 40px; height: 40px; transition: 0.5s all; } .category-box p{font-size: 13px;line-height: 18px; margin-bottom: 0;} .category-box:hover{background: var(--light-pink); border-color: var(--light-pink);} .category-box:hover img{ filter: invert(7%) sepia(61%) saturate(7090%) hue-rotate(261deg) brightness(81%) contrast(97%); } .category-box.selected { background: var(--light-pink); border-color: var(--light-pink); } .category-box.selected img { filter: invert(7%) sepia(61%) saturate(7090%) hue-rotate(261deg) brightness(81%) contrast(97%); } .category-card{ position: relative; display: block; border: 1px solid var(--border-color);background: var(--white); border-radius: 16px;height: 100%;transition: 0.5s all; } .cater-fav{ position: absolute; top: 16px; right: 15px; width: 56px; height: 56px; background: var(--white); border-radius: 50%; border: 1px solid var(--border-color); z-index: 1111; } .cater-fav img{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);} .cater-fav.active .with-ouline{ opacity: 0; } .cater-fav .with-filed{opacity: 0;} .cater-fav.active .with-filed{opacity: 1;} .category-card:hover{ box-shadow: 0px 0px 0px 2px rgb(0 0 0 / 12%);} .category-image{ position: relative; padding-top: 81.51%; border-radius:16px; } .category-image img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 16px; } .category-card .category-image .category-static{transition: 0.5s all;} .category-card:hover .category-image .category-static{opacity: 0;visibility: hidden;} .category-card .category-image .category-hover{opacity: 0;visibility: hidden;transition: 0.5s all;} .category-card:hover .category-image .category-hover{opacity: 1;visibility: visible;} .category-card-content{ padding: 25px 16px 16px; position: relative; } .category-profile{ width: 48px; height: 48px; position: absolute; left: 16px; top: -26px; } .category-profile img{ width: 48px; height: 48px; object-fit: cover; border: 2px solid var(--white); border-radius: 50%; } .category-card-content .category-title{ font-weight: 500; margin-bottom: 4px; } .category-km{ display: flex; align-items: center; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; } .category-km p{margin-bottom: 0;} .badge-category{margin-bottom: 8px;} .badge-category p{ background: var(--tag-color); padding: 4px 12px; border-radius: 36px; display: inline-block; margin-bottom: 0; } .category-check-list{display: flex;flex-wrap: wrap;align-items: center;gap: 8px;} .category-check{ display: flex; align-items: center; gap: 8px; } .category-check p{margin-bottom: 0;color: var(--primary-color);} .category-show-btn{text-align: center;margin-top: 40px;} .category-show-btn p{font-size: 15px;font-weight: 700;color: var(--black);margin-bottom: 16px;} .category-show-btn .primary-btn{border-radius: 48px;} /* ######################################## Professionals CSS ######################################## */ .professionals-section{position: relative;overflow: hidden; padding: 113px 0;border-top:1px solid var(--border-color) ;border-bottom: 1px solid var(--border-color);margin-bottom: 72px;} .professionals-content .title-style-5{ padding: 16px 24px; border: 1px solid var(--border-color); border-radius: 56px; font-weight: 500; color: var(--black); font-family: var(--primary-font-family); margin-bottom: 24px; } .professionals-content .title-style-2{ margin-bottom: 12px; } .professionals-content p{margin-bottom: 24px;} .professionals-image{ position: absolute; width: 52%; height: 100%; right: 0; top: 0; object-fit: cover; object-position: center; } /* ######################################## Footer CSS ######################################## */ .footer-main{padding: 100px 0;border-top: 1px solid var(--border-color);} .footer-logo a{display: flex;align-items: center;gap: 16px;} .footer-logo a img{width: 64px;height: 64px;object-fit: cover;} .footer-logo a span{font-size: 17px;font-weight: 500;color: var(--black);font-family: var(--primary-font-family);} .footer-link p{ font-weight: 700;margin-bottom: 16px; } .footer-link ul{padding: 0;list-style: none;display: flex;flex-direction: column;gap: 16px;} .footer-link ul li,.footer-link ul li a{font-size: 16px;line-height: 21px;font-weight: 400;color: var(--black);transition: 0.5s all;} .footer-link ul li a:hover{color: var(--default-color);} .for-professionals-footer{padding-left: 70px;} .copy-right{display: flex;align-items: center;justify-content: space-between; padding-top: 49px;margin-top: 49px; border-top: 1px solid var(--border-color);} .copy-right p{font-size: 16px;color: var(--black);font-weight: 400; margin-bottom: 0;} /* ######################################## Search Box ######################################## */ .mutibox-part{ padding: 12px; border: 1px solid var(--border-color); border-radius: 120px; max-width: 512px; margin: 0 auto; display: flex; gap: 10px; align-items: center; } .mutibox-part .search{position: relative; width: fit-content;border-right: 1px solid #ddd!important;} .mutibox-part .search img{ position: absolute; top: 50%; left: 12px; transform: translateY(-50%); } .mutibox-part .search input{ padding: 16px 12px 16px 48px; border: none!important; border-radius: 40px; font-size: 17px; color: var(--black); width: 200px; } .mutibox-part .search input::placeholder{color: var(--secondary-color);} .mutibox-part .search input:focus{box-shadow: none;outline: none;} .mutibox-part .location-dropdown{ width: 168px; } .location-dropdown{position: relative;} .location-dropdown::before,.location-dropdown::after { content: ""; position: absolute; width: 2px; height: 24px; background: var(--tag-color); right: -6px; top: 50%; transform: translateY(-50%); } .mutibox-part .location-dropdown::before{ left: -6px; right: auto; } .location-dropdown label{ position: absolute; top: 9px; left: 16px; z-index: 1; font-size: 11px; } .location-dropdown .select2-container--default .select2-selection--single{ width: 168px; border: none!important; padding: 24px 16px 9px 16px!important; border-radius: 40px!important; } .location-dropdown .select2-selection--single .select2-selection__rendered{ font-size: 17px!important; font-weight: 400; } .date-search{ position: relative; } .date-search label{ position: absolute; top: 9px; left: 16px; z-index: 1; font-size: 11px; } .date-search input{ border: none!important; background-image: url('../images/calendar.svg'); background-repeat: no-repeat; background-position: center right 16px; background-size: 24px; padding: 24px 45px 9px 16px; font-size: 17px; color: var(--primary-color); width: 168px; border-radius: 40px; } .date-search input::placeholder{color: var(--primary-color);} .date-search input:focus{box-shadow: none;outline: none;} .mutibox-part .btn-search{ padding: 18px 16px; border: none; background: var(--shade-01); color: var(--white); border-radius: 48px; font-size: 15px; font-weight: 700; text-align: center; transition: 0.5s all; } .mutibox-part .btn-search:hover{background: var(--shade-04);color: var(--default-color);} .mutibox-part {justify-content: space-between;} /* ================================== */ /* -- Single Select Dropdown Start -- */ .single-select-dropdown-main .select2 { width:100% !important; } .single-select-dropdown-main .select2-container--default .select2-selection--single{ border: 1px solid var(--black); border-radius:4px; height:100%; padding:10px 30px 10px 14px; } .single-select-dropdown-main .select2-selection--single .select2-selection__rendered{font-family: var(--primary-font-family); padding-left:0; padding-right:0; font-size:16px; line-height:20px; font-weight:500; color:var(--black); text-transform:capitalize; } .single-select-dropdown-main .select2-container--default .select2-selection--single .select2-selection__arrow { position: absolute; top: 50%; right: 5px; width:12px; height:6px; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);background: url('../images/angle-down.svg');background-size: cover;} .single-select-dropdown-main .select2-container--default .select2-selection--single .select2-selection__arrow b{ display:none;} .single-select-dropdown-main .select2-container--default.select2-container--open .select2-selection__arrow{ transform: translate(-50%, -50%) rotate(-180deg); } .single-select-dropdown-main .select2-selection__rendered .selected-img-flag { width:26px; max-height: 18px; object-fit: cover; object-position: center center; vertical-align:middle; margin-top: -1px; margin-right: 5px; } .single-select-dropdown-open-main.select2-dropdown { border-radius: 12px; overflow: hidden; border-top-left-radius: 0; border-top-right-radius: 0; border: 1px solid var(--shade-01); border-top: none; } .single-select-dropdown-open-main .select2-results__options .select2-results__option { font-family: var(--primary-font-family); font-size: 17px; line-height: 22px; font-weight: 400; color: var(--primary-color); text-transform: capitalize; padding: 12px 16px; } .single-select-dropdown-open-main .select2-results__options .select2-results__option.select2-results__option--highlighted { background: var(--default-color); color: var(--white); } .single-select-dropdown-open-main .select2-results__options .select2-results__option--selected { background:var(--default-color); color:var(--white); } .single-select-dropdown-open-main .select2-results__options img { width: 26px; max-height: 20px; vertical-align: middle; margin-top: -2px; margin-right: 5px; } /* ######################################## Form CSS ######################################## */ .form-group{ position: relative; margin-bottom: 24px; } .form-group label { pointer-events: none; position: absolute; top: calc(50% - 13px); left: 16px; transition: all .1s linear; -webkit-transition: all .1s linear; -moz-transition: all .1s linear; color: var(--secondary-color); font-size: 17px; font-weight: 400; } .form-group .form-control{ width: 100%; padding: 24px 16px 9px;resize: none; background: var(--tag-color); border: 1px solid var(--border-color); border-radius: 12px; font-size: 17px; line-height: 22px; color: var(--primary-color); font-family: var(--primary-font-family); transition: all .1s linear; -webkit-transition: all .1s linear; -moz-transition: all .1s linear; -webkit-appearance: none; } .form-group .form-control::placeholder{color: var(--primary-color);} .form-group .form-control:focus{ box-shadow: none; outline: none;border-color:var(--shade-01) ;background-color: var(--shade-03); } .form-group .form-control:hover{ box-shadow: 0px 0px 0px 2px rgb(0 0 0 / 12%); } .form-group .form-control:hover:focus{box-shadow: none;} .floating-group.focused .floating-label { font-size: 11px; top: 9px; } .text-area-form label { top: 16px; } .text-area-form .form-control { min-height: 91px;} .location-form .form-control{ padding-right: 50px; background-image:url("../images/location.svg"); ; background-size: 18px 22px; background-repeat: no-repeat; background-position: center right 16px; } .form-check{ margin-bottom: 24px; text-align: left;} .form-check label{font-size: 13px;line-height: 18px;color: var(--black);font-family: var(--primary-font-family);padding-left: 12px;} .form-check .form-check-input{ width: 20px; height: 20px; } .form-check .form-check-input:focus{outline: none;box-shadow: 0px 0px 0px 2px rgb(0 0 0 / 12%); ;} .form-check .form-check-input:checked { background-color: var(--default-color); border-color: var(--default-color); } .form-group .form-control.is-invalid { border-color: var(--error-color); } .psw-form{ position: relative; margin-bottom: 24px; } .psw-form .form-control{padding-right: 50px;} .psw-form span{ position: absolute; top: 50%;transform: translateY(-50%); right: 16px; } .preview-upload #file-input { display: none; } .preview-upload{ display: flex; align-items: center; justify-content: center; flex-direction: column; width: 125px; /* height: 125px; */ margin: auto auto 32px; } .preview-upload img { width: 100%; height: 101px; object-fit: cover; object-position: center top; border-radius: 8px 8px 0 0; } .preview-upload label { font-weight: 600; cursor: pointer; color: var(--default-color); border-radius: 0 0 8px 8px; border: 1px solid var(--border-color); border-top: none; padding: 3px 38px; background: var(--white); font-size: 13px; font-weight: 500;} /* ######################################## Login Screen ######################################## */ .login-part .login-inner{ display: flex; justify-content: center; align-items: center; height: 100vh; background: var(--shade-05); } .login-left { width: 50%; padding: 50px 82px; height: 100%; display: flex; align-items: center; justify-content: center; } .login-box{ padding: 32px; max-width: 568px; background: var(--white); border: 1px solid var(--border-color); border-radius: 24px; } .login-logo{margin-bottom: 60px;} .login-title{margin-bottom: 32px;} .login-box .title-style-3{margin-bottom: 12px;} .login-title p{margin-bottom: 0;} .login-box .forgot{ text-align: right; margin:16px 0 32px; } .login-box .forgot a{ font-size: 17px; font-weight: 500; color: var(--tertiary-color); text-decoration: underline; transition: 0.5s all; } .login-box .forgot a:hover{color: var(--default-color);} .login-bottom-content{ margin-top: 24px; text-align: center; } .login-bottom-content p{margin-bottom: 24px;} .login-bottom-content p a {color: var(--shade-01);text-decoration: underline;} .login-bottom-content p:last-child{margin-bottom: 0;} .login-bottom-content .medium-l-p a{color: var(--shade-01);text-decoration: none;} .login-right{ width: 50%; height: 100%; } .banner-part { position: relative; min-height: 100svh; height: 100%; max-height: min(100svh, 700px); } .banner-part video { position: absolute; object-fit: cover; width: 100%; height: 100%; top: 0; left: 0; object-position: center center; } .banner-part img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; } .banner-part .banner-caption{ position: absolute; padding: 19px 22px 32px 22px; bottom: 100px; left: 50%; transform: translateX(-50%); text-align: center; max-width: 508px; width: 100%; background: rgb(255 255 255 / 17%); border-radius: 16px; backdrop-filter: blur(13px); } .banner-part .banner-caption .ti1{ font-size: 24px; line-height: 32px; font-weight: 400; font-family: var(--secondary-font-family); color: var(--white); text-transform: uppercase; margin-bottom: 4px; } .banner-part .banner-caption p{margin-bottom: 0;color: var(--white);} .login-right .slick-dots { position: absolute; bottom: 97px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; } .slider-dots-box { display: flex; align-items: center; justify-content: center; } .slider-dots-box .slick-arrow { position: relative; top: auto; left: auto; right: auto; margin: 0px; transform: translate(0, 0%); } .slider-dots-box .slick-dots { position: relative; bottom: auto; width: auto; margin: 0 19px; } .slick-dots li { display: inline-block; margin: 6px 5px; width: auto; } .slick-dots li button { width: 8px; height: 8px; border-radius: 100%; background: var(--tertiary-color) !important; overflow: hidden; margin: 0; } .slick-dots li.slick-active button { background: var(--white) !important; width: 16px; border-radius: 50px !important; } .slick-dots li button:before { display: none; } .form-select-to {text-align: left;margin-bottom: 24px;position: relative;} .form-select-to label { color: var(--secondary-color);pointer-events: none; font-size: 17px; font-weight: 400; position: absolute; z-index: 1; top: calc(50% - 13px); left: 16px; transition: all 0.2s ease 0s; } .form-select-to.focused .select2-container--default .select2-selection--single{border-color: var(--shade-01);} .form-select-to.focused .floating-label { font-size: 11px; top: 9px;color: var(--shade-01); } .form-select-to .selection{width: 100%;} .form-select-to .select2-container--default .select2-selection--single{ border: 1px solid var(--border-color); padding: 24px 50px 9px 16px ; background: var(--tag-color); border-radius: 12px; height: 56px; } .form-select-to .select2-selection--single .select2-selection__rendered{font-size: 17px;color: var(--primary-color);} .form-select-to .select2-container--default .select2-selection--single .select2-selection__arrow { right: 16px; } .form-checkbox{ text-align: left; margin-bottom: 24px; } .form-checkbox .form-check{margin-bottom: 0;} .form-checkbox .medium-l-p{ font-weight: 700; color: var(--black); margin-bottom: 8px; } .form-checkbox-inner{ display: flex; align-items: center; gap: 40px; flex-wrap: wrap; } /* ######################################## Sign Up Screen ######################################## */ .signup-section .login-inner{background: var(--white);} .signup-box{max-width: 506px;position: relative;} .signup-box .signup-logo{margin-bottom: 32px;} .signup-box .signup-logo img{width: 108px;} .signup-title{margin-bottom: 32px;} .signup-box .primary-btn-large{margin:48px 0 32px ;} .signup-bottom-content p:last-child{margin-bottom: 0;} .signup-bottom-content p a{color: var(--default-color);} .signup-bottom-content p {margin-bottom: 32px;} .signup-bottom-content .medium-l-p a{text-decoration: underline;} .signup-box .sign-tag { position: absolute; top: -60px; right: 0; } .sign-tag { display: inline-block; padding: 8px 12px; border: 1px solid var(--border-color); font-size: 16px; line-height: 21px; font-weight: 400; color: var(--black); border-radius: 32px; } /* ######################################## auth CSS ######################################## */ .common-section-auth .common-inner{ max-width: 610px; margin:auto; display: flex; align-items: center; min-height: 100vh; padding: 50px 0px; } .auth-box{ width: 100%; padding: 56px 80px; background: var(--white); border: 1px solid var(--border-color); border-radius: 16px; } .auth-title{text-align: center;margin-bottom: 48px;} .auth-title .title-style-2{margin-bottom: 8px;} .auth-title p{margin-bottom: 0;} .otp-row { margin: auto; display: flex; flex-flow: row nowrap; justify-content: center; width: 100%; gap: 16px; } .otp-row input { padding: 20px 23px; max-width: 80px; text-align: center; background: var(--tag-color); border: 1px solid var(--border-color); border-radius: 8px; font-size: 28px; line-height: 24px; color: var(--primary-color); font-family: var(--secondary-font-family); font-weight: 400; } .otp-row input:focus-visible{ border-color: var(--default-color); background: var(--shade-03); } .resend{margin: 24px 0 48px;} .resend p{margin-bottom: 0 ;} .resend p button{ font-weight: 700; color: var(--default-color);background: transparent;border: none; } .otp-row input[type=number]::-webkit-inner-spin-button, .otp-row input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .date-form .form-control{ padding-right:50px ; background-image: url('../images/calendar.svg'); background-repeat: no-repeat; background-position: center right 16px; margin-bottom: 48px; } .maybe-later{ text-align: center; margin-top: 33px; } .maybe-later a{display: inline-block;font-size: 17px;font-weight: 700;color: var(--default-color);} .step-profile{display: flex;margin-bottom: 8px;align-items: center;justify-content: center;gap: 4px;} .step-profile a{ display: block; width: 8px; height: 8px; background: var(--border-color); border-radius: 100%; } .step-profile a.active{background: var(--shade-01);width: 16px;border-radius: 20px;} .profile-user-img { width: 136px; height: 136px; object-fit: cover; object-position: center center; border-radius: 50%; } .avatar-upload { position: relative; max-width: 205px; margin: auto; margin-bottom: 48px; } .avatar-upload .avatar-edit { position: absolute; right: 40px; z-index: 1; top: 90px; } .avatar-upload .avatar-edit input { display: none; } .avatar-upload .avatar-edit input+label { display: inline-block; width: 40px; height: 40px; margin-bottom: 0; border-radius: 100%; background: url('../images/plus-icon.svg'); background-repeat:no-repeat ; cursor: pointer; font-weight: normal; transition: all 0.2s ease-in-out; } .login-auth .auth-title{ margin-bottom: 32px; } .form-text-small{font-size: 11px;display: block;text-align: left;color: #77797D;padding: 8px 16px 24px;} /* ######################################## login after CSS ######################################## */ .login-header{ display: flex; align-items: center; gap: 16px; } .notification-button{ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; line-height: 40px; background: var(--tag-color); border-radius: 100%; } .login-dropdown{ position: relative; } .login-dropdown .login-btn{ display: flex; align-items: center;border: none;background: var(--white);gap: 10px;} .login-dropdown .login-btn span img{ border: 1px solid #E2E2E2; width: 48px; height: 48px; object-fit: cover; object-position: center center; border-radius: 50%; } .login-dropdown .login-btn::after{content: none;} .login-dropdown .dropdown-menu { padding: 16px; transform: translate(0, 10px) !important; background-color: var(--white); box-shadow: 0px 0px 8px rgb(0 0 0 / 10%); border-radius: 15px; overflow: hidden; min-width: 248px !important; right: 0; left: auto; border: none; } .login-dropdown .dropdown-menu li{margin-bottom: 8px;} .login-dropdown .dropdown-menu li:last-child{margin-bottom: 0;} .login-dropdown .dropdown-menu li .dropdown-item{ display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 21px; color: var(--black); font-family: var(--primary-font-family); padding: 8px; border-radius: 10px; } .login-dropdown .dropdown-menu li .dropdown-item form{display: flex; align-items: center; gap: 8px;} .login-dropdown .dropdown-menu li .dropdown-item img{width: 24px;height: 24px;} /* ######################################## Professionals CSS ######################################## */ .professional-banner{ padding: 121px 0; background: var(--default-color); } .professional-banner .professional-caption{text-align: center;} .professional-banner .professional-caption .title-style-5{color: var(--white);margin-bottom: 8px;font-family: var(--primary-font-family);} .professional-banner .professional-caption h1{ font-size: 72px; line-height: 78px; font-weight: 400; font-family: var(--secondary-font-family); color: var(--white); margin-bottom: 24px; } .professional-banner .professional-caption .primary-btn{ background: var(--shade-04); color: var(--default-color); } /* ######################################## Why Join Sologlow? CSS ######################################## */ .why-join-section{padding: 120px 0;background: var(--light-pink);} .why-join-section .title h2{ text-align: center; font-size: 60px; line-height: 41px; letter-spacing: -0.32px; color: var(--primary-color); margin-bottom: 60px; font-family: var(--secondary-font-family); font-weight: 400; } .why-box{ padding: 24px 16px; background: var(--white); border: 1px solid var(--shade-04); border-radius: 16px; height: 100%; } .why-box .why-img{ width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; line-height: 60px; background: var(--shade-04); border-radius: 50%; padding: 18px; margin-bottom: 40px; } .why-box .title-style-5{ margin-bottom: 12px; } .why-box p{margin-bottom: 0;} /* ######################################## Extra Section CSS ######################################## */ .extra-main{padding: 124px 0;position: relative;margin: 120px 0;} .extra-main .extra-image{position: absolute;left: 0;top: 0;width: 52%;height: 100%;object-fit: cover;object-position: center center;} .extra-content{padding-left: 80px;} .extra-content h2{ font-size: 60px; font-weight: 400; line-height: 68px; font-family: var(--secondary-font-family); margin-bottom: 12px;letter-spacing: -0.32px; } /* ######################################## Ready Section CSS ######################################## */ .ready-to-join{padding: 64px 0;border: 1px solid var(--border-color);border-bottom: 1px solid var(--border-color);} .ready-join-content .title-style-4{ width: fit-content; border: 1px solid var(--border-color); padding: 24px; border-radius: 56px; margin-bottom: 24px; font-family: var(--primary-font-family); font-weight: 500; color: var(--black); } .ready-join-content h2{ font-size: 60px; font-weight: 400; line-height: 60px; color: var(--black); margin-bottom: 12px; font-family: var(--secondary-font-family); letter-spacing: -0.32px; } .ready-join-content p{margin-bottom: 24px;} /* ######################################## Services ######################################## */ .services-main{padding: 16px;border: 1px solid var(--border-color);border-radius: 13px;margin-bottom: 24px;} .services-box {display: flex;justify-content: space-between;margin-bottom: 17px;gap: 10px;} .services-inner{display: flex;text-align: left;gap: 10px;align-items: center;} .services-inner .services-image{flex-shrink: 0;} .services-inner .services-image img{width: 34px;height: 34px;border-radius: 7px;} .services-inner p{margin-bottom: 0;} .services-box .hc{ display: block; margin-bottom: 2px; font-size: 14px; color: var(--black); font-weight: 700; } .new-services-added{display: flex;align-items: center;gap: 10px;justify-content: space-between;padding-top: 21px;border-top:1px solid var(--border-color) ;flex: 1;} .services-main .des{text-align: left;} .services-main .des p{font-weight: 500;} .new-services-added .edit-service{ display: flex; align-items: center; gap: 10px; border: none; font-size: 12px; font-weight: 700; color: var(--default-color); background: transparent; } .new-services-added .delete-btn{ font-size: 12px; border: none; background: transparent; font-weight: 700; color: var(--error-color); } .add-more-service-btn{ display: flex; align-items: center; gap: 12px; padding: 15px 16px; font-size: 17px; font-weight: 700; border: 1px solid var(--border-color); color: var(--default-color); border-radius: 12px; background: var(--white); font-family: var(--primary-font-family); transition: 0.5s all; margin-bottom: 48px; } .add-more-service-btn:hover{ border-color:var(--default-color) ; box-shadow: 0px 0px 0px 2px rgb(0 0 0 / 12%); } /* ######################################## Dashbord Sidebar ######################################## */ .sidebar-menu{position: relative;background: var(--white); padding: 16px 32px 32px;display: flex;flex-direction: column;justify-content: space-between;gap: 50px; max-width: 290px; width: 100%; flex-shrink: 0; min-height: 100vh; min-height: 100svh; max-height: 100vh; max-height: 100svh; overflow: hidden; overflow-y: auto; white-space: nowrap; border-right: 1px solid var(--border-color);transition-duration: 0.3s; -webkit-transition-duration: 0.3s; } .sidebar-menu .side-bar-log{margin-bottom: 42px;} .sidebar-menu .side-bar-log a{ display: flex; align-items: center; gap: 12px; width: fit-content; } .sidebar-menu .side-bar-log a img{width: 40px;height: 40px;object-fit: cover;object-position: center;} .sidebar-menu .side-bar-log a span{font-size: 17px;font-weight: 500;color: var(--black);font-family: var(--primary-font-family);transition-duration: 0.3s; -webkit-transition-duration: 0.3s;} .sidebar-menu .sildebar-list li{ margin-bottom: 12px; } .sidebar-menu .sildebar-list li:last-child { margin-bottom: 0; } .sidebar-menu .sildebar-list li a{ display: flex; align-items: center; padding: 16px 17px; border-radius: 40px; transition: 0.3s all;transition-duration: 0.3s; -webkit-transition-duration: 0.3s; } .sidebar-menu .sildebar-list li a .sidebar-icon{flex-shrink: 0;} .sidebar-menu .sildebar-list li a .sidebar-icon img{width: 24px;height: 24px;object-fit: cover;} .sidebar-menu .sildebar-list li a span{ display: block;margin-left: 12px; font-size: 17px; line-height: 22px; font-weight: 400; color: var(--primary-color); font-family: var(--primary-font-family);transition-duration: 0.3s; -webkit-transition-duration: 0.3s; } .sidebar-menu .sildebar-list li a:hover{ background: var(--shade-03); } .sidebar-menu .sildebar-list li a.active{ background: var(--shade-02); } .sidebar-menu .sildebar-list li a.active span{ color:var(--shade-01); font-weight: 500; } .sidebar-menu .sildebar-list li a.active .sidebar-icon img{ filter: invert(37%) sepia(92%) saturate(6945%) hue-rotate(255deg) brightness(95%) contrast(105%); } .sidebar-btn-collopse{ position: relative; width: 32px; height: 32px; background: var(--tag-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 4px; z-index: 1; border: none; line-height: 32px; flex-shrink: 0; } .sidebar-btn-collopse img{ position: absolute; top: 50%; left: 44%; transform:translate(-50%, -50%) rotate(90deg);transition-duration: 0.3s; -webkit-transition-duration: 0.3s; } /* ######################################## Dashbord Sidebar collops ######################################## */ .sidebar-menu.show-dash-sidebar{ width: 124px; } .sidebar-menu.show-dash-sidebar .side-bar-log a span{ opacity: 0;visibility: hidden; } .sidebar-menu.show-dash-sidebar .sildebar-list li a span{ opacity: 0;visibility: hidden;} .sidebar-btn-collopse.active img{transform: translate(-50%, -50%) rotate(-90deg);left: 52%;} /* ######################################## Dashbord Navbar ######################################## */ .dashbord-navbar{ display: flex; justify-content: space-between; align-items: center; padding: 16px 40px; background: var(--white); border-bottom: 1px solid var(--border-color); z-index: 1; } .dashbord-title{ display: flex; align-items: center;} .navbar-menu{display: none;} .dashbord-profile-site{ display: flex; align-items: center; gap: 16px; } .dashbord-profile-site .notification-button{ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; line-height: 40px; background: var(--tag-color); border-radius: 100%; border: none; } .dashbord-profile-site .notification-button:focus{outline: none;box-shadow: none;} .profile-dropdown{position: relative;} .profile-dropdown .cutom-profile{ display: flex; align-items: center; gap: 8px; border: none; background: var(--white); font-size: 17px; line-height: 22px; color: var(--black); font-weight: 500; font-family: var(--primary-font-family); } .profile-dropdown .cutom-profile span{flex-shrink: 0;} .profile-dropdown .cutom-profile:focus{outline: none;box-shadow: none;} .profile-dropdown .cutom-profile .profile img{ width: 48px; height: 48px; object-fit: cover; object-position: center center; border-radius: 50%; border: 1px solid var(--border-color); } .profile-dropdown .cutom-profile::after{ content: none; } .profile-dropdown .cutom-profile >div img{margin-left: 8px;} .profile-dropdown .dropdown-menu{ padding: 16px; transform: translate(0, 64px) !important; background-color: var(--white); box-shadow: 0px 0px 8px rgb(0 0 0 / 10%); border-radius: 15px; overflow: hidden; min-width: 248px !important; right: 20px; left: auto; border: none; } .profile-dropdown .dropdown-menu li{margin-bottom: 16px;} .profile-dropdown .dropdown-menu li:last-child{margin-bottom: 0;} .profile-dropdown .dropdown-menu .dropdown-item{ display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 21px; color: var(--black); font-family: var(--primary-font-family); padding: 8px; border-radius: 10px; } .profile-dropdown .dropdown-menu .dropdown-item img{width: 24px;height: 24px;} .profile-dropdown .dropdown-menu .dropdown-item:hover{background: var(--shade-03);} .offcanvas{padding: 48px 32px;} .offcanvas .offcanvas-header{ padding: 0;margin-bottom: 24px; } .offcanvas .btn-close{ width: 32px; height: 32px; border-radius: 8px; opacity: 1; background: url("../images/close.svg") no-repeat;padding: 0; background-color: var(--tag-color); background-position: center center; } .offcanvas.offcanvas-end{ width: 605px; } .notifiaction-part{padding: 8px;border: 1px solid var(--border-color);border-radius: 16px;box-shadow: 0 24px 32px 0 rgb(0 0 0 / 2%);background-color: var(--white);} .notification-box{ display: flex; align-items: center; gap: 12px; padding:12px 16px; margin-bottom: 12px; } .notification-box .notification-image{ flex-shrink: 0; } .notification-box .notification-image img{ width: 40px; height: 40px; object-fit: cover; object-position: center center; border-radius: 50% } .notification-box .notification-content .notify-point{ display: flex; gap: 10px; justify-content: space-between; margin-bottom: 4px; } .notification-box .notification-content .notify-point p{ font-weight: 700; color: var(--primary-color); } .notification-box .notification-content .notify-point .small-p{ font-weight: 400; color: var(--secondary-color); } .notification-box .notification-content p{margin-bottom: 0;} .notification-box .notification-content .medium-l-p{color: var(--secondary-color);} .offcanvas .older-btn{border: none;display: inline-block;margin-top:12px ;padding: 10px 16px;color: var(--default-color);background: var(--white);font-size: 15px;line-height: 20px;font-weight: 700;} .offcanvas .older-btn:focus{outline: none;box-shadow: none;} /* ######################################## Dashbord Body ######################################## */ .dashboard-cnt { width: 100%; } .dashboard-middle-cnt { height: calc(100vh - 81px); height: calc(100svh - 81px); overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; background: var(--tag-color); } /* ######################################## Tooltip error ######################################## */ .form-error{ position: absolute;display: none; top: 100%; font-size: 12px; color: var(--white); background: rgba(220, 53, 69, .9); padding: 5px 10px; z-index: 11; border-radius: 9px; margin-top: 4px; width: fit-content; } .form-error::before { content: ''; position: absolute; top: -20px; left: 22px; transform: translateX(-50%); border: 10px solid transparent; border-bottom-color: rgba(220, 53, 69, .9); } /* ######################################## Dashbord Home ######################################## */ .dashbord-main{padding: 40px;} .dashbord-card{ position: relative; padding: 24px; background: var(--white); height: 100%; border: 1px solid var(--border-color); border-radius: 8px; } .dashbord-card-title{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .appointment-wrapper .appointment-box:last-child{margin-bottom: 0;} .appointment-box{ display: flex; gap: 16px; padding: 16px; border: 1px solid var(--border-color); border-radius: 4px;margin-bottom: 24px; } .appointment-date{ background: var(--tag-color); padding: 17px 8px; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 4px; } .appointment-date p{margin-bottom: 0;} .appointment-date p:first-child{font-weight: 700;} .appointment-time{ display: flex; align-items: center; gap: 8px;justify-content: space-between;width: 100%; } .appointment-left p { margin-bottom: 8px; } .appointment-left .medium-l-p{color: var(--secondary-color);} .appointment-left .main{font-weight: 700;color: var(--black);} .appointment-left p:last-child{margin-bottom: 0;} .appointment-right{ display: flex; flex-direction: column;justify-content: space-between; gap: 16px; } .appointment-right p{font-weight: 700;color: var(--black);} .appointment-right .small-p{ display: inline-block; padding: 1.5px 8px; color: var(--black); background: #92C78180; border-radius: 24px; } .no-appointment-box{ padding: 24px 0 90px; text-align: center; } .no-appointment-box img{width: 48px;height: 48px;margin-bottom: 16px;} .no-appointment-box p{margin-bottom: 8px;font-weight: 5 00;} .no-appointment-box .small-p{font-weight: 400;} .team-wrapper .team-box:last-child{margin-bottom: 0;} .team-box{ display: flex; gap: 12px; align-items: center;margin-bottom: 24px; } .team-profile{flex-shrink: 0;} .team-profile img{width: 40px;height: 40px;object-fit: cover;object-position: center top;border-radius: 50%;} .team-box-content{ position: relative; padding: 12px 56px 12px 0; width: 100%;border-bottom: 1px solid var(--border-color); } .team-box-content p{margin-bottom: 0 ;} .team-wrapper .team-box:last-child .team-box-content{border-bottom: none;} .arrow-right{position: absolute;top: 50%;right: 8px;transform: translateY(-50%) rotate(-90deg);} .account-progress{display: flex;align-items: center;gap: 8px;} .circular-progress { width: 25px; height: 25px; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .inner-circle { position: absolute; width: 15px; height: 15px; border-radius: 50%; background-color: var(--white); } .accont{ display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 24px } .accountadd-image{flex-shrink: 0;} .accountadd-image img{width: 24px;height: 24px;object-fit: cover;} .accont .account-content{ padding: 11px 60px 11px 0; border-bottom: 1px solid var(--border-color); width: 100%; background-image: url('../images/angle-right.svg'); background-repeat: no-repeat; background-size: 24px 24px; background-position: center right 8px; } .accont .account-content p{margin-bottom: 0;} .price-sales{ font-family: var(--primary-font-family); } .dash-progres{ display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 0 20px; } .dash-progress-inner{ text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .dash-progress-inner p{ margin-bottom: 0; } .progress-bar-vertical { width: 6px; min-height: 144px; /* float: left; */ 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 */ align-items: flex-end; -webkit-align-items: flex-end; /* Safari 7.0+ */ border-radius: 18px; } .progress, .progress-stacked{ background: var(--tag-color); } .progress-bar{background: var(--default-color);} .progress-bar-vertical .progress-bar { width: 100%; height: 0; -webkit-transition: height 0.6s ease; -o-transition: height 0.6s ease; transition: height 0.6s ease; } /* ######################################## Dashbord Team ######################################## */ .team-dashbord{padding: 32px 40px;} .team-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .team-header p{margin-bottom: 0 ;} .team-right{ display: flex; align-items: center; gap: 26px; } .search-team-btn,.filletr-btn{ display: flex; align-items: center; justify-content: center;background: var(--white); width: 40px; height: 40px; padding: 8px; border: 1px solid var(--border-color)!important; border-radius: 50%; line-height: 40px; } .search-team-btn img,.filletr-btn img{ width: 24px; height: 24px; object-fit: cover; object-position: center center; } .search-team-btn:focus, .filletr-btn:focus{outline: none;box-shadow: none;} /* ######################################## Custom Table ######################################## */ .team-table .dataTable thead th:first-child{ width: 23px; padding: 0!important; } .team-table .dataTable tbody td:first-child{padding: 0!important;} .team-table .dataTable thead th:first-child .dt-column-order{display: none;} table.dataTable thead>tr>th.dt-orderable-asc:hover, table.dataTable thead>tr>th.dt-orderable-desc:hover, table.dataTable thead>tr>td.dt-orderable-asc:hover, table.dataTable thead>tr>td.dt-orderable-desc:hover{ outline: none; } table.dataTable>tbody>tr{background: var(--white)!important;} table.dataTable.display>tbody>tr:nth-child(odd)>.sorting_1, table.dataTable.order-column.stripe>tbody>tr:nth-child(odd)>.sorting_1{ box-shadow: none!important; } .team-table table.dataTable.stripe>tbody>tr:nth-child(odd)>*, .team-table table.dataTable.display>tbody>tr:nth-child(odd)>*{ box-shadow: none; } table.dataTable.order-column>tbody tr>.sorting_1, table.dataTable.order-column>tbody tr>.sorting_2, table.dataTable.order-column>tbody tr>.sorting_3, table.dataTable.display>tbody tr>.sorting_1, table.dataTable.display>tbody tr>.sorting_2, table.dataTable.display>tbody tr>.sorting_3{ box-shadow: none; } table.dataTable.display tbody tr:hover>.sorting_1, table.dataTable.order-column.hover tbody tr:hover>.sorting_1{ box-shadow: none ; } table.dataTable.hover>tbody>tr:hover>*, table.dataTable.display>tbody>tr:hover>*{ box-shadow: none; } table.dataTable th, table.dataTable th, table.dataTable td, table.dataTable td{ text-align: left!important; padding: 12px 16px!important; font-size: 15px; } table.dataTable th{ font-size: 15px; line-height: 15px; font-weight: 700; font-family: var(--primary-font-family); color: var(--primary-color); } table.dataTable td{ font-size: 17px; font-weight: 400; font-family: var(--primary-font-family); color: var(--black); line-height: 22px; } div.dt-container.dt-empty-footer tbody>tr:last-child>* { border-bottom: 1px solid var(--border-color); } table.dataTable.row-border>tbody>tr>*, table.dataTable.display>tbody>tr>* { border-top: 1px solid var(--border-color); } table.dataTable>thead>tr>th, table.dataTable>thead>tr>td{ border-bottom: 1px solid var(--border-color); } table.dataTable td .review-adde-btn{ border: none; background: transparent; font-size: 17px; font-weight: 500; text-decoration: underline; color: var(--primary-color); } table.dataTable td .table-button{ display: flex; gap: 16px; align-items: center; } table.dataTable td .table-button button{ border: none; background: transparent; } table.dataTable td .table-button button:focus{ box-shadow: none!important; } /* ######################################## Custom Modal ######################################## */ .custom-modal .modal-dialog{max-width: 830px;} .custom-2 .modal-dialog{max-width: 605px;} .custom-modal .modal-content{ border-radius: 16px; } .custom-modal .modal-header{position: relative; padding: 22px 48px;border-bottom: 1px solid var(--border-color);justify-content: center; } .custom-modal .modal-header .btn-close { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); background: var(--tag-color); background-image: url('../images/close.svg'); background-position: center center; background-size: 24px 24px; padding: 0; width: 32px; height: 32px; border-radius: 8px; opacity: 1; margin: 0; } .custom-modal .modal-footer { display: flex; padding: 20px 16px; justify-content: end; gap: 20px; } .custom-modal .modal-footer .close-text-btn{ padding: 10px 16px; font-size: 15px; font-weight: 700; line-height: 20px; color: var(--default-color); background: var(--white); border: none; } .custom-modal .modal-footer .close-text-btn:focus{outline: none;box-shadow: none;} .custom-modal .modal-body{padding: 28px 24px;} .basic-info{ padding: 16px; border: 1px solid var(--border-color); border-radius: 16px; } .basic-info .title-style-5{ margin-bottom: 24px; } .search .form-control{ padding:13px 13px 13px 48px; background-image: url('../images/search-2.svg'); background-repeat: no-repeat; background-position: center left 12px; margin-bottom: 8px; border: none; background-color: var(--tag-color); font-size: 17px; font-weight: 400; color: var(--secondary-color); border-radius: 16px; } .search .form-control:focus{outline: none;box-shadow: none;} /* ######################################## assing radio ######################################## */ .assign-box { display: flex; align-items: center; flex-wrap: wrap;gap: 10px;} .assign-box label{width: calc(100% / 2 - 7px);} .assign-box label>input { display: none;} .assign-box .assign-inner { cursor: pointer; padding: 16px; background: transparent; text-align: center;border: 1px solid var(--border-color); border-radius: 16px;box-shadow:0 24px 32px 0 rgb(0 0 0 / 2%); } .assign-box .assign-inner :is(.loaction-name) { font-size: 14px; line-height: 21px; font-weight: 400; color: #454B60; transition: 0.2s;text-transform: capitalize; } /* .assign-box label>input:checked+.assign-inner { background-color: #0F71E2;color: var(--global-white-color);border: 1px solid #F1F1F5;} */ /* .assign-box label>input:checked+.assign-inner :is(.loaction-name) { color: var(--global-white-color);} */ .assign-box .assign-inner:hover{border: 1px solid #F1F1F5;} .assign-box label>input:checked+.assign-inner .assing-top span{border-color: var(--default-color);} .assign-box label>input:checked+.assign-inner .assing-top span::before{background: var(--default-color);} .assing-top{position: relative; display: flex; align-items: center; gap: 8px; padding: 0 30px 8px 0 ; border-bottom: 1px solid var(--border-color); } .assing-top img{ flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; } .assing-top p{ margin-bottom: 0; } .assing-top span{ position: absolute; top: 50%; right: 3px; transform: translateY(-50%); width: 18px; height: 18px; border: 2px solid var(--tertiary-color); border-radius: 50%; } .assing-top span::before{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background: var(--white); border-radius: 50%; } .assign-fot{ padding-top: 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .assign-fot img{ flex-shrink: 0; width: 24px; height: 24px; } .assign-fot p{ margin-bottom: 0; font-weight: 500; color: var(--black); } /* ######################################## Client ######################################## */ .client-empty-screen{padding: 16px;} .client-info{ padding: 10px 16px; background: var(--info-color); display: flex; align-items: center; justify-content: space-between; border-radius: 8px; } .client-info p{margin-bottom: 0;color: var(--white);} .client-wrapper{ margin-top: 16px; position: relative; height: 100vh; padding: 20px; background: var(--white); display: flex; align-items: center; justify-content: center; border-radius: 16px; } .client-wrapper-inner{text-align: center;} .client-wrapper-inner img{ margin-bottom: 16px; } .client-wrapper-inner .title-style-5{ margin-bottom: 8px; color: var(--black); } .client-wrapper-inner p{margin-bottom: 24px;} .basic-med{ padding: 16px; border: 1px solid var(--border-color); border-radius: 16px; } .basic-med .title-style-5{margin-bottom: 24px;} .basic-med .form-group{ margin-bottom: 16px; } .book-service-wrraper .book-inner{ display: flex; align-items: center; gap: 12px; } .book-service-wrraper .book-inner img{ flex-shrink: 0; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; object-position: center center; } .book-content{ position: relative; width: 100%; padding: 12px 40px 12px 0; border-bottom: 1px solid var(--border-color); } .book-content p{color: var(--black);margin: 0;} .book-content .form-check{ position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .book-service-wrraper { max-height: 310px; overflow-y: auto; } /* ######################################## Dashbord Services ######################################## */ .service-wrrper{ display: flex; align-items: center; padding: 12px 16px; flex-wrap: wrap; gap: 100px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .service-name { display: flex; align-items: center; gap: 12px; flex: 4; } .service-name img{ width: 40px; height: 40px; border-radius: 8px; object-fit: cover; object-position: center center; } .service-name p{ margin-bottom: 0;color: var(--black); } .service-price { flex: 1; } .service-price p{margin-bottom: 0;font-weight: 500;color: var(--black);} .service-duration { flex: 1; } .service-duration p { margin-bottom: 0; font-weight: 500; color: var(--black); } .view-btn { background: transparent; border: transparent; color: var(--default-color); font-size: 12px; font-weight: 700; } /* ######################################## Dashbord Setting ######################################## */ .setting-main{padding: 40px;} .setting-main .users-card{ display: block; position: relative; padding: 24px; background: var(--white); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 24px 32px 0 rgb(0 0 0 / 2%); height: 100%; } .setting-main .users-card img{ width: 24px; height: 24px; object-fit: cover; object-position: center center; margin-bottom: 16px; } .setting-main .users-card p{ margin-bottom: 0; font-weight: 700; color: var(--primary-color); margin-bottom: 4px; } .setting-main .users-card .medium-l-p{ color: var(--tertiary-color); font-weight: 400; margin-bottom: 0; } .setting-main .setting-title{ margin-bottom: 32px; } .setting-main .avatar-upload{margin:unset;max-width: 180px;margin-bottom: 16px;} .setting-card{ position: relative; padding: 24px; background: var(--white); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 24px 32px 0 rgb(0 0 0 / 2%); } .setting-card .title-style-5{margin-bottom: 16px;} .setting-card .form-group{margin-bottom: 8px;} .setting-card .form-select-to{margin-bottom: 8px;} .set-password .form-group{margin-bottom: 16px;} .setting-button{ margin-top: 32px; display: flex; gap: 24px; flex-wrap: wrap; } .setting-button .primary-btn{ padding: 17px 57px; } .setting-button .outline-primary{ padding: 15px 55px; color: var(--default-color); background: transparent; border: 2px solid var(--default-color); } .setting-card .form-select-to.focused .select2-container--default .select2-selection--single { border-color: var(--border-color); } .setting-card .form-select-to.focused .floating-label{color: var(--secondary-color);} /* ######################################## Dashbord Sales ######################################## */ .sales-main{padding: 40px;} .sales-wrapper{ padding: 20px 16px; background: var(--default-color);border-radius: 8px;display: flex;align-items: center;justify-content: space-between;margin-bottom: 40px; } .sales-wrapper .sales-content .title-style-3{color: var(--white);margin-bottom: 4px;} .sales-wrapper .sales-content p{color: var(--white);margin-bottom: 0;} .sales-wrapper .primary-btn{ padding: 10px 41px;background: var(--shade-04);color: var(--default-color);flex-shrink: 0; } .custom-tab{margin-bottom: 40px;} .custom-tab .nav-pills { box-shadow: 0 2px 5px 0 rgb(38 51 77 / 3%); width: fit-content; margin-left: auto;margin-bottom: 24px; } .custom-tab .nav-pills .nav-link.active, .custom-tab .nav-pills .show>.nav-link{ background: var(--default-color); color: var(--white); } .custom-tab .nav-pills .nav-link{ padding: 10px 15px; font-size: 15px; line-height: 20px; color: #6B7A99; font-weight: 500; font-family: var(--primary-font-family); border-radius: 0px; border: 2px solid #F5F6F7; } .custom-tab .nav-pills li:first-child .nav-link{border-radius: 30px 0 0 30px;} .custom-tab .nav-pills li:last-child .nav-link{border-radius: 0px 30px 30px 0px;} .sales-box{ padding: 20px 16px; display: flex; flex-direction: column; justify-content: space-between; background: var(--white); min-height: 149px; border: 1px solid var(--border-color); gap: 10px; border-radius: 8px; } .sales-box .sales-title{display: flex;justify-content: space-between;align-items: flex-start;gap: 10px;} .sales-box .sales-title .title-style-3{color: var(--black);} .sales-box .medium-l-p{color: var(--black);font-weight: 500;margin-bottom: 0;} .sales-main .team-table .dataTable thead th:first-child{ width: inherit; padding: inherit; } .sales-main .team-table .dataTable thead th:first-child .dt-column-order { display: block; } .withdrow-modal .modal-dialog{max-width: 438px;} /* ######################################## Loading page style ######################################## */ .loading-box img{ margin-bottom: 28px; } .loading-box .title-style-2{ margin-bottom: 8px; } .loading-box p{ margin-bottom: 0px; } /* ######################################## Profile Details ######################################## */ .bredcums{ padding: 10px 0; } .bredcums ul{ display: flex; gap: 24px; flex-wrap: wrap; } .bredcums ul li a{ position: relative; font-size: 15px; line-height: 20px; color: var(--secondary-color); font-weight: 400; } .bredcums ul li a::after { content: ""; position: absolute; width: 6px; height: 10px; top: 58%; right: -14px; transform: translateY(-50%); background: url('../images/angle-right-lt.svg') no-repeat; background-size: 6px 10px; } .bredcums ul li:last-child a::after{ content: none; } .profiledetails-section{padding-block: 24px;} .profile-title{margin-bottom: 32px;display: flex;align-items: center;justify-content: space-between;gap: 20px;} .profile-right{flex-shrink: 0;} .profile-fav{position: relative; border: 1px solid var(--border-color)!important; width: 56px; height: 56px; border-radius: 50%; background: var(--white); display: flex; align-items: center; justify-content: center; text-align: center; } .profile-fav img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; object-fit: cover; } .profile-fav .with-ouline{display: block;} .profile-fav .with-filed{ display: none; } .profile-fav.active .with-filed{ display: block; } .profile-fav.active .with-ouline{ display: none; } .profile-title .title-style-2{margin-bottom: 4px; } .profile-image-deatils { position: relative; padding-top: 76.9%; } .profile-image-deatils img,.profile-image-deatils-inner img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;object-position: center center;border-radius: 8px;} .profile-image-deatils-inner { position: relative; padding-top: 70%; } .service-details-inner .title-style-3{ margin-bottom: 24px; } .service-details-inner .service-details-inner-box { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .service-details-inner .service-details-inner-box img { flex-shrink: 0; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; object-position: center center; } .service-details-inner-content{ display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--border-color); } .service-details-inner-content p { color: var(--black); margin: 0; } .service-added-btn{flex-shrink: 0;} .service-added-btn .serv-btn{ display: flex; align-items: center; gap: 16px; border: none; padding: 10px 0; color: var(--default-color); font-size: 17px; line-height: 22px; font-weight: 500; font-family: var(--primary-font-family); background: var(--white); } .service-details-inner-content .service-added-btn .serv-btn img{ width: 24px; height: 24px; object-fit: cover; object-position: center center; } .skin-clinic{ padding: 24px; background: var(--white); } .skin-clinic .title-style-5{margin-bottom: 16px;color: var(--black);} .clicic-box{ display: flex; align-items: center; gap: 16px; margin-bottom: 32px; } .clicic-box img{ flex-shrink: 0; border: 2px solid var(--white); width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center center; } .clicic-content p { font-weight: 500; margin-bottom: 2px; color: var(--primary-color); } .clicic-content .medium-l-p{ color: var(--secondary-color); display: block; } .unique-skill{ padding: 16px 0; } .unique-skill .title-style-3{margin-bottom: 16px;} .unique-list{display: flex;gap: 10px;flex-wrap: wrap;} .unique-list p{ padding: 16px; border: 1px solid var(--border-color); border-radius: 32px; display: inline-block; } .review-part .title-style-3{margin-bottom: 16px;} .review-box{ display: flex; align-items: center; gap: 12px; padding: 12px 0; margin-bottom: 8px } .review-box img{ flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: center center; } .review-content p{ margin-bottom: 0; color: var(--primary-color); font-weight: 500; } .review-time{ display: flex; align-items: center; gap: 2px; } .review-time span{display: block;color: var(--secondary-color);} .about-content{ padding: 16px 0; } .about-content .title-style-3{margin-bottom: 16px;} :root { --star-size: 24px; --star-color: #F3F3F5; --star-background: #F3B742; } .Stars { --percent: calc(var(--rating) / 5 * 100%); display: inline-block; font-size: var(--star-size); font-family: var(--primary-font-family); line-height: 1; margin-bottom: 12px; } .Stars::before { content: "★★★★★"; letter-spacing: 3px; background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* ######################################## Check Out ######################################## */ .check-out-main{padding-block: 40px;background: var(--tag-color);} .checkout-title{margin-bottom: 11px;} .customer-card{ padding: 24px; background: var(--white); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 24px 32px 0 rgb(0 0 0 / 2%);margin-bottom: 22px; } .cutom-link{ padding: 4px; background: var(--tag-color); border-radius: 40px; margin-bottom: 16px;display: flex;align-items: center;gap: 16px; } .cutom-link li a.active{ background: var(--default-color); color: var(--white); font-weight: 500; } .cutom-link li a{ padding: 9px; font-size: 17px; font-weight: 400;text-align: center; line-height: 22px; color: var(--primary-color); border-radius: 24px; width: 100%; font-family: var(--primary-font-family); } .cutom-link li{ width: calc(100% / 3 - 10px); } .check-out-form .title-style-5{margin-bottom: 16px;} .check-out-form .form-check label{ font-size: 17px; line-height: 22px; padding-left:5px; } .payment-list{ display: flex; gap: 8px; margin-bottom: 16px; } .payment-list div{ width: 34px; height: 24px; border: 1px solid var(--border-color); border-radius: 4px; display: flex; align-items: center; justify-content: center; } .payment-summary .title-style-5{margin-bottom: 16px;} .payment-part{margin-bottom: 16px;} .payment-details-inner-box{ display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .payment-details-inner-box img{ flex-shrink: 0; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; object-position: center center; } .payment-delete{ flex-shrink: 0; } .payment-delete .del-btn{ border: none; background: var(--white); } .payment-delete .del-btn:focus{ box-shadow: none; } .payments-item{ display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--border-color); } .payments-item p{ margin-bottom: 0; color: var(--tertiary-color);} .payments-item .pay-p{ color: #474747; font-weight: 500; } .payments-total{border-bottom: none;margin-bottom: 16px;} .payments-total p{color: var(--primary-color)!important;} .payment-edit{ display: flex; align-items: center; gap: 12px; margin-bottom: 16px; justify-content: space-between; } .payment-edit button{ border: none; background: var(--white); font-size: 17px; font-weight: 500; color: var(--default-color); line-height: 22px; } .save-check{ padding: 16px; border-radius: 8px; background: var(--tag-color);display: flex;align-items: center;justify-content: space-between; } .save-check p{ margin-bottom: 0; color: var(--primary-color); } .save-check .small-p{ color: var(--secondary-color); } .save-check button{ border: none; background: transparent; font-size: 17px; font-weight: 500; color: var(--default-color); line-height: 22px; } .save-check button:focus{ box-shadow: none; } .added-card{ display: flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 12px; font-size: 17px; font-weight: 400; line-height: 22px; color: var(--shade-01); border: 1px solid var(--border-color)!important; border-radius: 16px; background: var(--white); margin-top: 12px; } .added-card:focus{box-shadow: none;outline: none;} .add-card-modal .modal-dialog{max-width: 698px;} .add-card-modal .modal-content{border-radius: 16px;padding: 24px;} .add-card-modal .modal-header{ padding: 0; margin-bottom: 32px; justify-content: center; position: relative; border: none; } .add-card-modal .modal-header .btn-close{ position: absolute; right: 0; top: 0; opacity: 1; } /* ######################################## My Appointments ######################################## */ .my-appointments-part{ padding: 72px 0; background: var(--shade-03); background-image: url('../images/appoitment-shape.png'); background-repeat: no-repeat; background-position: right bottom; } .appointments-title{ margin-bottom: 40px; } .my-appointments-part .cutom-link{ max-width: 570px; margin-bottom: 12px; background: var(--shade-02); } .appointment-box-main{ padding: 20px; background: var(--white); border: 1px solid var(--border-color); border-radius: 16px; } .appointment-title{ display: flex; align-items: start; justify-content: space-between; gap: 16px;margin-bottom: 20px; } .appointment-title .appointment-price{ font-weight: 500; color: var(--black); } .appointment-box-main .appointment-left{ display: flex; align-items: center; gap: 12px; } .appointment-box-main .appointment-left img{ flex-shrink: 0; width: 40px; height: 40px; object-fit: cover; object-position: center center; border-radius: 8px; } .appointment-content p{ margin-bottom: 2px; font-weight: 700; color: var(--black); } .appointment-text{ display: flex; align-items: center; gap: 4px; } .appointment-text .medium-p{ color: var(--black); } .appointment-location{ display: flex; align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); } .appointment-location p{ margin-bottom: 0; font-weight: 500; color: var(--black); } .appointment-button{ padding-top: 18px;display: flex;align-items: center;justify-content: space-between;gap: 10px; } .reschedule{flex-shrink: 0; display: flex; align-items: center;justify-content: center; gap: 12px;transition: 0.5s all; padding: 8px 16px; border: 1px solid var(--border-color)!important; border-radius: 12px; background: var(--white); font-size: 15px; font-weight: 700; line-height: 20px; color: var(--default-color); } .reschedule:hover{box-shadow: 0px 0px 0px 2px rgb(0 0 0 / 12%);} .appointment-btn-right{ display: flex; align-items: center; gap: 24px; } .add-note ,.cancel{ border: none!important; background: var(--white); font-size: 15px; font-weight: 700; color: var(--default-color); } .cancel{ color: var(--error-color); } .appointment-canvas.offcanvas-end{ width: 558px;padding: 40px 24px; } .appointment-canvas .offcanvas-body{ padding: 0; } .appointment-canvas .appointment-time-title{display: flex;align-items: center;justify-content: space-between;gap: 20px;margin-bottom: 24px;} .appointment-canvas .appointment-time{ padding: 8px 12px; background: var(--tag-color); border-radius: 32px; font-weight: 700; color: var(--black); margin: 0; width: fit-content; } .appointment-booking-wrapper{ display: flex; align-items: start; gap: 12px;padding-bottom: 24px;border-bottom: 1px solid var(--border-color); } .appointment-booking-wrapper .booking-profile{ flex-shrink: 0; width: 48px; height: 48px; border: 2px solid var(--white); border-radius: 50%; object-fit: cover; object-position: center center; } .appointment-booking-content{ display: flex; gap: 10px; justify-content: space-between; width: 100%; align-items: flex-start; } .appointment-booking-content .booking-title{ margin-bottom: 10px; } .booking-temp-btn{ display: flex; align-items: center; gap: 8px; } .booking-temp-btn button{ border: none; background: var(--white); font-size: 15px; line-height: 20px; font-weight: 700; color: var(--default-color); padding: 10px 16px; } .booking-temp-btn button:focus{ box-shadow: none; outline: none; } .booking-temp-btn button.del{ color: var(--error-color); } .appoin-services-wrapper{ display: flex; gap: 12px; justify-content: space-between; padding-top: 24px;margin-bottom: 12px; } .appoin-left{ display: flex; align-items: center; gap: 12px; } .appoin-left img{ flex-shrink: 0; width: 40px; height: 40px; object-fit: cover; object-position: center center; } .appoin-left div p{ margin: 0; font-weight: 700; color: var(--black); } .appoin-services-wrapper .appo-price{font-weight: 500;color: var(--black);margin: 0;} .appoin-services .add-note{ display: flex; align-items: center ; justify-content: center; gap: 12px; padding: 8px 16px; font-size: 15px; color: var(--default-color); font-weight: 700; } .appoin-services .add-note:focus{box-shadow: none;outline: none;} .appoin-services-btn{ display: flex; align-items: center; gap: 24px; margin-top: 24px; } .appoin-services-btn button{ border: 1px solid var(--default-color)!important; padding: 9px 16px; width: calc(100% / 2 - 12px); background: var(--white); border-radius: 12px; font-size: 17px; line-height: 22px; font-weight: 700; color: var(--default-color); text-align: center; } .appoin-services-btn .cancel{color: var(--error-color);border-color: var(--border-color)!important;} /* ######################################## Nearby beauty professionals ######################################## */ .nearby-section{padding: 72px 0;} .nearby-title{ margin-bottom: 24px; } /* ######################################## Cancel Modal ######################################## */ .cancel-modal .modal-dialog{ max-width: 537px; } .cancel-modal .modal-content{border-radius: 16px;padding: 105px 40px 128px 40px;} .cancel-modal .modal-content .btn-close{ position: absolute; top: 24px; right: 24px; background: var(--tag-color); background-image: url('../images/close.svg'); background-position: center center; background-size: 16px; background-repeat: no-repeat; padding: 0; width: 30px; height: 30px; border-radius: 50%; opacity: 1; margin: 0; } .cancel-modal .modal-body .title-style-3{ margin-bottom: 16px; } .cancel-modal .modal-body{margin-bottom: 40px;} .cancel-modal .modal-body p{margin: 0;} .cancel-modal .modal-footer{padding: 0;border: none;gap: 24px;} .cancel-modal .modal-footer button{width: calc(100% / 2 - 20px);} .cancel-modal .modal-footer .cancel-btn{ border: 2px solid var(--default-color); font-size: 17px; font-weight: 700; color: var(--default-color); padding: 7px 10px; text-align: center; background: var(--white); border-radius: 12px; } /* ######################################## Cancel Modal ######################################## */ .review-modal .modal-dialog{ max-width: 701px; } .review-modal .modal-content{border-radius: 8px;border: none;} .review-modal .modal-content .btn-close { position: absolute; top: 24px; right: 24px; background: var(--tag-color); background-image: url('../images/close.svg'); background-position: center center; background-size: 16px; background-repeat: no-repeat;z-index: 11; padding: 0; width: 30px; height: 30px; border-radius: 50%; opacity: 1; margin: 0; } .review-modal .modal-content .modal-body{padding: 24px;} .review-modal .modal-content .modal-footer{ border-top: 1px solid var(--border-color); padding: 24px; gap: 16px; } .review-modal .modal-content .modal-footer button{width: calc(100% / 2 - 16px);margin: 0;} .review-modal .modal-content .modal-footer .cancel-btn{ padding: 14px 15px; border: 1px solid var(--border-color)!important; border-radius: 12px; font-size: 17px; line-height: 22px; font-weight: 700; color: var(--default-color); background: var(--white); } .review-title{margin-bottom: 40px;} .review-title p{ color: var(--black); } .review-profile{ display: flex; align-items: center; gap: 12px; margin-bottom: 24px } .review-profile img{ width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center center; border: 2px solid var(--white); } .review-profile div p{margin: 0;font-weight: 500;} .review-profile div span{color: var(--secondary-color);} .exp{margin-top: 24px;} .exp .title-style-5{margin-bottom: 12px;} .exp textarea{ width: 100%; background: #F3F3F5; border: 1px solid #E7EDFF; padding: 16px; font-size: 17px; font-weight: 400; color: var(--secondary-color); height: 160px; overflow-y: auto; resize: none; border-radius: 8px; font-family: var(--primary-font-family); } .exp textarea::placeholder{color: var(--secondary-color);} .exp textarea:focus{border-color: var(--border-color);box-shadow: none;outline: none;} /*some basic styles*/ .rating { font-size: 0; display: inline-block } .rating__button { width: 32px; height: 32px; display: inline-block } .rating__star { width: 100%; height: 100%; fill: #F2F2F2 } .rating:hover .rating__star, .rating.has--rating .rating__star { fill: #FFCB45 } .rating__button:hover~.rating__button .rating__star, .rating__button.is--active~.rating__button .rating__star { fill: #F2F2F2 } .rating.has--rating:hover .rating__button:hover~.rating__button .rating__star { fill: #F2F2F2 } .rating.has--rating:hover .rating__button.is--active~.rating__button .rating__star { fill: #FFCB45 } .rating.has--rating:hover .rating__button:hover~.rating__button.is--active~.rating__button .rating__star, .rating.has--rating:hover .rating__button.is--active:hover~.rating__button .rating__star, .rating.has--rating:hover .rating__button.is--active~.rating__button:hover~.rating__button .rating__star { fill: #F2F2F2 } /* ######################################## Notification ######################################## */ .notification-section{ padding: 48px 0; background: var(--tag-color); } .notification-title{ margin-bottom: 24px; } .notification-wrapper{ padding: 8px; background: var(--white);margin-bottom: 12px; border: 1px solid var(--border-color); box-shadow: 0 24px 32px 0 rgb(0 0 0 / 2%); border-radius: 16px; } /* .notification-box{ padding: 12px 16px; display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; margin-bottom: 12px; } */ .notification-box { padding: 12px 16px; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; } .notification-left{ display: flex; align-items: center; gap: 12px; } .notification-left img{ flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: center center; } .notification-left .notification-content p{margin-bottom: 4px;font-weight: 700;color: var(--primary-color);} .notification-left .notification-content span{display: block;color: var(--secondary-color);} .old-notifiy{ padding: 5px 16px; border: 2px solid var(--default-color)!important; border-radius: 12px; font-size: 17px; font-weight: 700; color: var(--default-color); background: var(--white); } .old-notifiy:hover{box-shadow: 0px 0px 0px 2px rgb(0 0 0 / 12%);} /* ######################################## Setting ######################################## */ .setting-section{ padding: 48px 0; } .personal-main{ padding: 48px; background: var(--tag-color); } /* ######################################## Setting ######################################## */ .about-us-user{ padding: 131px 0; position: relative; background: var(--tag-color);border-bottom: 1px solid var(--border-color); } .about-content .title-style-2{ margin-bottom: 12px; } .about-content p{margin-bottom: 16px;} .about-content p:last-child{margin-bottom: 0;} .about-us-user .about-image{ position: absolute; right: 0; top: 0; width: 50%; height: 100%; object-fit: cover; object-position: center center; } .about-last{ padding: 72px 0; background: var(--tag-color); } /* ######################################## Faq ######################################## */ .faq-section{ padding: 64px 0; background: var(--tag-color); } .faq-title{text-align: center;margin-bottom: 24px;} .custom-accordion .accordion-item{ margin-bottom: 16px; border-radius: 16px!important; overflow: hidden; border: 1px solid var(--border-color)!important; } .custom-accordion .accordion-item:first-of-type>.accordion-header .accordion-button{ border-radius: 16px 16px 0 0!important; } .custom-accordion .accordion-button{ border-radius: 16px 16px 0 0 !important; font-size: 20px; line-height: 24px; color: var(--black); font-weight: 400; letter-spacing: -0.24px; font-family: var(--secondary-font-family); padding: 24px; background: var(--white)!important; box-shadow: none!important; } .custom-accordion .accordion-body{ padding-top: 12px; } .custom-accordion .accordion-body p{margin-bottom: 0;color: var(--tertiary-color);} .custom-accordion .accordion-button:not(.collapsed){ padding-bottom: 0; } .accordion-button::after{ width: 24px; height: 24px; background-image: url('../images/angle-down.svg'); background-size: 18px; background-position: center; } .accordion-button:not(.collapsed)::after{ background-image: url('../images/angle-down.svg'); } .faq-left{margin-bottom: 16px;} /* ######################################## Help section ######################################## */ .help-section{ position: relative; background: var(--tag-color); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 72px 0; } .help-title{ margin-bottom: 34px; } .help-box{ display: flex; align-items: center; gap: 16px;margin-bottom: 24px; } .help-box .help-image{flex-shrink: 0; padding: 16px; display: flex; align-items: center; justify-content: center; background: var(--white); width: 66px; height: 66px; border-radius: 50%; object-fit: cover; object-position: center center; } .help-box div p{ color: var(--primary-color); margin-bottom: 4px; font-weight: 700; } .help-box div span,.help-box div span a{ color: var(--tertiary-color);} .help-section .hep-image{ position: absolute; top: 0; right: 0; width: 50%; height: 100%; object-fit: cover; object-position: center center; } .contact-image { position: relative; text-align: right; } .contact-image img{ border-radius: 16px; max-width: 530px; width: 100%; } /* ######################################## Privacy Policy ######################################## */ .privacy-section{ padding: 88px 0; background: var(--tag-color); } .title-privacy{text-align: center;margin-bottom: 26px;} .content-privacy h1,.content-privacy h2,.content-privacy h3,.content-privacy h4,.content-privacy h5,.content-privacy h6{ font-size: 20px; font-weight: 400; line-height: 24px; color: var(--black); margin-bottom: 12px; font-family: var(--secondary-font-family); letter-spacing: -0.24px; margin-top: 8px; } .content-privacy p{margin-bottom: 16px;} .content-privacy p:last-child{margin-bottom: 0;} .content-privacy ul,.content-privacy ol{ padding-left: 20px; margin-bottom: 16px;list-style: disc;} .content-privacy ol{list-style: decimal;} .content-privacy ul li,.content-privacy ol li{font-size: 17px;line-height: 22px;color: var(--black);font-weight: 400; margin-bottom: 16px;} .content-privacy ul li:last-child,.content-privacy ol li:last-child{margin-bottom: 0;} .about-dashbord{text-align: right;} .about-dashbord img{ max-width: 750px; border-radius: 16px; } .about-dash-content{ padding: 40px; margin-top: 40px; border-radius: 16px; background: var(--white); } /* ######################################## Choose Time Modal ######################################## */ .choose-time-modal .modal-dialog{ max-width: 725px; } .choose-time-modal .btn-close{ position: absolute; top: 24px; right: 24px; z-index: 1; background-color: var(--tag-color); width: 30px; height: 30px; border-radius: 50%; opacity: 1; } .choose-time-modal .modal-content{ border-radius: 13px;padding: 24px 54px 29px; } .choose-time-modal .modal-content .modal-body{ padding: 0; } .choose-time-modal .modal-content .title-style-5{ text-align: center; margin-bottom: 29px; } .choose-title{margin-bottom: 20px;} .choose-time p{margin-bottom: 10px;font-weight: 600;color: var(--primary-color);} .choose-time-box { display: flex; align-items: center;gap: 4px;overflow-x: auto;padding-bottom: 10px;margin-bottom: 15px;} .choose-time-box label{flex-shrink: 0;} .choose-time-box label>input{ display: none;} .choose-time-box .choose-time-inner{ cursor: pointer; padding: 8px 24px;background: var(--tag-color); border-radius: 18px;} .choose-time-box .choose-time-inner p{ margin: 0; font-weight: 400; font-size: 13px; line-height: 18px; text-align: center; color: var(--black); } .choose-time-box label>input:checked+.choose-time-inner{background: var(--default-color);} .choose-time-box label>input:checked+.choose-time-inner p{color: var(--white);} /* width */ .choose-time-box::-webkit-scrollbar { height: 7px; } /* Track */ .choose-time-box::-webkit-scrollbar-track { background: #f1f1f1; } /* Handle */ .choose-time-box::-webkit-scrollbar-thumb { background: #888; } /* Handle on hover */ .choose-time-box::-webkit-scrollbar-thumb:hover { background: #555; } .choose-service{ padding: 16px; border: 1px solid var(--border-color); border-radius: 13px;margin-bottom: 10px; } .choose-service .choose-title{ display: flex; align-items: start; justify-content: space-between; margin-bottom: 15px; gap: 10px; } .choose-left{ display: flex; align-items: center; gap: 10px; } .choose-left img{ width: 33px; height: 33px; border-radius: 6px; object-fit: cover; object-position: center center; } .choose-left div p{margin-bottom: 0;font-weight: 700;} .choose-des{display: flex;align-items: center;justify-content:space-between;gap: 20px;padding-bottom: 15px;border-bottom: 1px solid var(--border-color);} .choose-deleft p{font-size: 12px;font-weight: 500;color: var(--black);margin-bottom: 0;} .choose-right{ display: flex; align-items: center; flex-wrap: wrap; gap: 15px } .choose-right p{padding-right: 28px;margin: 0; color: var(--black); background: url('../images/chose-check.svg');background-size: 24px;background-position: right center;background-repeat: no-repeat;} .choose-btn{display: flex;align-items: center;justify-content: space-between;padding-top: 15px;} .choose-btn button{ display: flex; align-items: center; justify-content: center; width: fit-content; border: none!important; padding: 8px 13px; font-size: 12px; font-weight: 700; color: var(--default-color); text-align: center; font-family: var(--primary-font-family); background: transparent!important; } .choose-btn button:nth-child(3) { color: var(--error-color); } .choose-footer{ text-align: center;margin-top: 50px; } .choose-footer button{ min-width: 286px; padding-block: 13px; } .add-service-chosse-btn{ display: flex; align-items: center; gap: 10px; justify-content: center; border: 1.67px solid var(--default-color)!important; padding: 6px 13px; border-radius: 10px; font-size: 14px; line-height: 18px; color: var(--default-color); font-weight: 700; width: fit-content; background: var(--white)!important; } .chose-date-time-slider{margin-bottom: 43px;} .chose-date-time-slider .container { margin: auto; position: relative; } .chose-date-time-slider .container>div { padding: 0 0px; } .date-slider-wrapper { padding: 0 0px; margin: auto; /* position: relative; */ width: 324px; margin: auto; } .date-slider-month { min-width: 100%; text-align: center; } .date-slider-prev { left: 5px; } .date-slider-next { right: 5px; } .date-slider-prev:before, .date-slider-next:before { font-size: 50px; line-height: 2; color: #0079d2; } .date-slider-prev, .date-slider-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: flex; align-items: center; justify-content: center; padding: 0px; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: #D9D9D9; width: 33px; height: 33px; border-radius: 50%; } .date-slider-prev[disabled] { cursor: auto; } .date-slider-day { padding: 10px; width: 71px; height: 93px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--primary-font-family); background: var(--white); border: 1px solid var(--border-color)!important; border-radius: 8px; flex-shrink: 0; position: relative; text-align: center; transition-property: transform; -webkit-flex-shrink: 0; } .date-slider-day span{ font-size: 13px; font-weight: 400; color: var(--black); } .date-slider-day p{font-weight: 700;color: var(--black);margin: 0;} .date-slider-day[date-slider-selected="true"] { background: var(--default-color); color: var(--white); border-color: var(--default-color); } .date-slider-day[date-slider-selected="true"] span{ color: var(--white); } .date-slider-day[date-slider-selected="true"] p{ color: var(--white); } .days-container { align-items: center; /* cursor: pointer; */ display: flex; gap: 13px; /* margin: auto 1%; */ transition-property: transform; width: 100%; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .days-wrapper { overflow: hidden; } /* ######################################## Full calender ######################################## */ .dash-full-calender{ background: var(--white); padding: 0 16px 16px; } .fc-header-toolbar{padding: 12px 0;margin: 0!important;} .fc-header-toolbar .fc-toolbar-chunk:first-child{ display: flex; align-items: center; gap: 10px; } .fc-header-toolbar .fc-toolbar-chunk .fc-toolbar-title { font-size: 17px; font-weight: 700; color: var(--primary-color); flex-shrink: 0; } .fc-header-toolbar .fc-toolbar-chunk:first-child .fc-button-group{display: flex;align-items: center;gap: 10px;} .fc-header-toolbar .fc-toolbar-chunk:first-child .fc-button-group .fc-button{ display: flex; align-items: center; justify-content: center; width: 52px; height: 56px; border: 2px solid #F5F6F7!important; background: var(--white)!important; border-radius: 50%; box-shadow: 0px 2px 5px rgb(38 51 77 / 3%); } .fc-header-toolbar .fc-toolbar-chunk:first-child .fc-button-group .fc-button span{color: var(--black);font-weight: 500;} .fc-header-toolbar .fc-toolbar-chunk:nth-child(3){ display: flex; gap: 0; } .fc-header-toolbar .fc-toolbar-chunk:nth-child(3) .fc-button-primary:first-child{ border-radius: 30px 0 0 30px;border-left: 1px solid rgba(245, 246, 247, 1)!important; } .fc-header-toolbar .fc-toolbar-chunk:nth-child(3) .fc-button-primary:last-child{ border-radius: 0 30px 30px 0; } .fc-header-toolbar .fc-toolbar-chunk:nth-child(3) .fc-button-primary{ padding: 10px 15px; background: var(--white); border: 2px solid rgba(245, 246, 247, 1)!important; border-left: none!important; color: #6B7A99; margin: 0; font-size: 15px; font-weight: 500; font-family: var(--primary-font-family); text-transform: capitalize; } .fc-header-toolbar .fc-toolbar-chunk:nth-child(3) .fc-button-primary.fc-button-active{ background: var(--default-color); color: var(--white); } .fc-theme-standard td, .fc-theme-standard th { border: 2px solid #F5F6F7; background: var(--white); } .fc-theme-standard th{ border-bottom: none; } .fc-theme-standard .fc-scrollgrid{ border: 2px solid #F5F6F7; } .fc .fc-daygrid-day-number{ font-size: 17px; font-weight: 700; font-family: var(--primary-font-family); color: var(--primary-color); } .fc .fc-daygrid-day-top{ justify-content: center; } .fc .fc-col-header-cell-cushion{ font-size: 13px; font-weight: 500; font-family: var(--primary-font-family); color: var(--primary-color); text-transform: uppercase; } .fc .fc-daygrid-day.fc-day-today { background-color: #F4BAFF0D; } .fc .fc-multimonth-title { font-size: 1.2em; font-weight: 700; padding: 1em 0px; text-align: left; } .fc-multiMonthYear-view .fc-daygrid-day-frame { position: relative; vertical-align: middle; display: flex; align-items: center; justify-content: center; min-width: 28px !important; min-height: 28px !important; max-width: 28px !important; margin: auto; border-radius: 50%; } .fc-multiMonthYear-view .fc-multimonth-header-table thead tr th { border: none !important; } .fc-multiMonthYear-view .fc-multimonth-header-table thead tr th .fc-col-header-cell-cushion { font-size: 11px; line-height: 13px; font-weight: 400; padding: 0; } .fc-multiMonthYear-view .fc-multimonth-daygrid-table tbody tr td { border: none !important; width: 28px !important; height: 28px !important; line-height: 28px; border-radius: 50%; vertical-align: middle; } .fc-multiMonthYear-view .fc-multimonth-daygrid-table tbody tr td .fc-daygrid-day-number { font-size: 11px; line-height: 13px; font-weight: 400; padding: 0; } .fc-multiMonthYear-view .fc-multimonth-daygrid-table tbody tr td.appointments-calendar__day-cell--today .fc-daygrid-day-frame { background: var(--default-color); } .fc-multiMonthYear-view .fc-multimonth-daygrid-table tbody tr td.appointments-calendar__day-cell--today .fc-daygrid-day-frame .fc-daygrid-day-number { color: var(--white); } /* .fc-multiMonthYear-view .fc-multimonth-daygrid-table tbody tr td.fc-day-future .fc-daygrid-day-frame { background: var(--shade-04); } */ .fc-timegrid-event .fc-event-main { overflow-y: auto; } .fc-multiMonthYear-view .fc-multimonth-daygrid-table tbody tr td.fc-cell-shaded, .fc-multiMonthYear-view .fc-multimonth-daygrid-table tbody tr td.fc-day-disabled { background: var(--white); } .fc-timegrid table tbody tr .fc-timegrid-slot { height: 70px !important; } /* ######################################## Switch toggle css ######################################## */ /* .status-toggle-container { display: flex; align-items: center; gap: 10px; } .switch { position: relative; display: inline-block; width: 50px; height: 24px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .slider { background-color: #2196F3; } input:checked + .slider:before { transform: translateX(26px); } */ .error-message { font-size: 0.8em; color: red; display: block; margin-top: 5px; } .tell-box{ padding-inline: 40px; } .set-business-wrapper{ display: flex; align-items: center; gap: 64px; justify-content: space-between;margin-bottom: 16px; } .swp-part{ display: flex; align-items: center; gap: 8px; justify-content: space-between; width: 100%; } .set-business-wrapper .set-select{ display: flex; align-items: center; gap: 12px; } .set-business-wrapper .single-select-dropdown-main{ width: 155px; margin: 0; } .set-business-wrapper .medium-l-p{ margin: 0 0 0 0; font-weight: 600; } .switch { position: relative; display: inline-block; width: 51px; height: 31px; } .switch input { display: none; } .switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--tertiary-color); border-radius: 99px; -webkit-transition: 0.4s; transition: 0.4s; } .switch .slider:before { position: absolute; content: ""; height: 27px; width: 27px; background: #fff; border-radius: 50%; left: 2px; bottom: 2px; -webkit-transition: 0.4s; transition: 0.4s;} .switch input:checked+.slider { background: var(--default-color); } .switch input:checked+.slider:before { -webkit-transform: translateX(20px); -moz-transform: translateX(20px); transform: translateX(20px); } .switch input:focus+.slider {box-shadow: none;} .choose-time-box label.disable .choose-time-inner { opacity: 0.3; cursor: not-allowed; } /* ######################################## Professional Client Booking ####### ################################# */ input.bootstrap-timepicker-hour, input.bootstrap-timepicker-minute, input.bootstrap-timepicker-meridian { border: none; } /* Detect Chrome autofill using animation */ @keyframes onAutoFillStart { from {} to {} } input.floating-control:-webkit-autofill { animation-name: onAutoFillStart; animation-duration: 0s; animation-delay: 0s; animation-fill-mode: both; } /* ######################################## Media Query CSS ####### ################################# */ @media (min-width: 1400px){ .container{max-width: 1248px;padding: 0;} } @media (max-height: 500px){ .login-left{overflow-y: auto;} } @media (min-width: 1200px) and (max-width: 1366px) { .login-left { padding: 50px 30px; } .signup-box .sign-tag{top: 0;} } @media (min-width: 992px) and (max-width: 1199px) { .login-left { padding: 50px 20px; } .banner-part .banner-caption { max-width: 438px; } .signup-box .sign-tag{top: 0;} } @media (max-width: 1199px){ /*********************** Footer Section CSS ***********************/ .for-professionals-footer { padding-left: 0px; } /* ######################################## Dashbord Sidebar ######################################## */ .side-bar-log{display: flex;align-items: center;justify-content: space-between;} .side-button-responsive{display: none;} .sidebar-menu{position: fixed;top: 0;left: 0;z-index: 111;transform: translateX(-100%);} /* ######################################## Dashbord Navbar ######################################## */ .dashbord-navbar{padding: 16px 20px;} .dashbord-title { gap: 14px; } .navbar-menu{display: block;} .sidebar-btn-collopse img{transform: translate(-50%, -50%) rotate(0);left: 50%;} /* ######################################## Dashbord Sidebar collops ######################################## */ .sidebar-menu.show-dash-sidebar{ width: 290px;transform: translateX(0); } .sidebar-menu.show-dash-sidebar .side-bar-log a span{ opacity: 1;visibility: visible; } .sidebar-menu.show-dash-sidebar .sildebar-list li a span{ opacity: 1;visibility: visible;} .sidebar-btn-collopse.active img{transform: translate(-50%, -50%) rotate(0);left: 50%;} } @media (min-width: 768px) and (max-width: 991px) { /* ######################################## Typography ######################################## */ .title-style-1{font-size: 38px;line-height: 48px;} .title-style-2 { font-size: 28px; line-height: 35px; } .professional-banner .professional-caption h1 { font-size: 60px; line-height: 68px; } .why-join-section .title h2 { font-size: 44px; line-height: 54px; margin-bottom: 40px; } .extra-content h2 { font-size: 44px; line-height: 54px; } .ready-join-content h2 { font-size: 44px; line-height: 54px; } } @media (max-width: 991px) { /* ######################################## Header CSS ######################################## */ .header-navigation .header-right { flex-direction: row-reverse; } .header-navigation .navbar-collapse { position: fixed;padding: 50px 20px 20px; width: 300px; top: 0; right: 0; height: 100vh!important; z-index: 1; background: var(--white); opacity: 0; visibility: hidden; transition: 0.5s all; box-shadow: 1px 1px 30px rgb(0 0 0 / 25%); transform: translateX(100%); } .header-navigation .navbar-collapse.collapse.show { opacity: 1; visibility: visible; transform: translateX(0); } .header-navigation .navbar-toggler { border: none; padding: 5px; } .header-navigation .close-btn { position: absolute; top: 8px; right: 10px; } /* ######################################## Footer CSS ######################################## */ .footer-main{padding: 30px 0;} /* ######################################## Professionals CSS ######################################## */ .professionals-section{padding: 50px 0;margin-bottom: 40px;} .professionals-image { position: relative; width: 100%; height: 100%; right: unset; top: unset; margin-top: 25px; } /* ######################################## category CSS ######################################## */ /* .category-scroll{overflow: scroll;margin-bottom: 20px;} */ /* .category-wrapper{width: 1100px;padding-bottom: 20px;} */ /* ######################################## Login Screen ######################################## */ .login-part .login-inner { height: 100%; flex-direction: column; } .login-left{width: 100%;padding: 50px 22px;min-height: 100vh;align-items: flex-start;} .login-right{display: none;} .login-logo { margin-bottom: 20px; } .login-box .forgot { margin: 16px 0; } .login-bottom-content p { margin-bottom: 16px; } .login-box{padding: 20px;} .login-title { margin-bottom: 16px; } /* ######################################## Sign Up Screen ######################################## */ .signup-box .signup-logo img { width: 70px; } .signup-box .signup-logo { margin-bottom: 20px; } .signup-title { margin-bottom: 16px; } .signup-box .primary-btn-large { margin: 28px 0 20px; } .signup-bottom-content p { margin-bottom: 16px; } .signup-box .sign-tag{top: unset;right: unset;position: relative;margin: 20px auto auto;} /* ######################################## login after CSS ######################################## */ .header-navigation .login-header{flex-direction: row;} .add-more-service-btn{margin-bottom: 24px;font-size: 16px;} .professional-banner { padding: 60px 0; } .why-join-section { padding: 60px 0; } .why-box .why-img { margin-bottom: 20px; } .extra-main { padding: 50px 0; margin: 0; } .extra-content { padding-left: 0px;padding-bottom: 20px; } .extra-main .extra-image { position: relative; left: unset; top: unset; width: 100%; height: 100%; object-fit: cover; object-position: center center; } .ready-to-join { padding: 50px 0; } .skin-clinic{padding: 24px 0;} .about-us-user{padding: 30px 0 0;} .about-us-user .about-content{margin-bottom: 20px;} .about-us-user .about-image{position: relative;width: 100%;} .help-section .hep-image{position: relative;width: 100%;margin-top: 15px;} .help-title { margin-bottom: 15px; } .help-box{margin-bottom: 15px;} .help-section{padding: 40px 0 0;} .about-last{padding: 30px 0;} .faq-section{padding: 40px 0;} .privacy-section{padding: 40px 0;} .contact-image{text-align: center;} .dash-progres{padding: 0;} .fc-theme-standard .fc-scrollgrid {width: 900px;overflow-x: auto;} .fc .fc-view-harness {overflow-x: auto; height: 600px !important;} .fc .fc-toolbar {align-items: flex-start;display: flex;justify-content: space-between;flex-direction: column;gap: 10px;margin-bottom: 20px !important;} } @media (max-width: 767px){ /* ######################################## Typography ######################################## */ .title-style-1{font-size: 34px;line-height: 41px;} .title-style-2 { font-size: 28px; line-height: 35px; } p{font-size: 16px;line-height: 21px;} .medium-p{ font-size: 14px; line-height: 21px; } .primary-btn-large { font-size: 16px; line-height: 21px; } /* ######################################## Footer CSS ######################################## */ .footer-link ul li, .footer-link ul li a { font-size: 14px; line-height: 19px; } .copy-right{flex-direction: column;gap: 10px;margin-top: 40px;padding-top: 20px;} .copy-right p { font-size: 14px; } /* ######################################## Top Text CSS ######################################## */ .top-text-section { padding: 40px 0 30px; } /* ######################################## Search Box ######################################## */ .mutibox-part .location-dropdown,.date-search { display: none; } .mutibox-part .search input,.mutibox-part .search{width: 100%;} /* ######################################## Login Screen ######################################## */ .login-box .forgot{margin: 14px 0;} .login-box .forgot a { font-size: 14px; } /* ######################################## auth CSS ######################################## */ .auth-box { padding: 20px; } .auth-title { margin-bottom: 30px; } .resend { margin: 15px 0 24px; } .common-section-auth .common-inner { padding: 50px 20px; } .otp-row input { padding: 8px 13px; max-width: 40px; font-size: 16px; line-height: 21px; } .date-form .form-control { margin-bottom: 30px; } .maybe-later { margin-top: 20px; } .professional-banner .professional-caption h1 { font-size: 36px; line-height: 46px; margin-bottom: 15px; } .why-join-section .title h2 { font-size: 32px; line-height: 42px; margin-bottom: 15px; } .extra-content h2 { font-size: 32px; line-height: 42px; } .ready-join-content h2 { font-size: 32px; line-height: 42px; } /* ######################################## assing radio ######################################## */ .assign-box { display: flex; align-items: center; flex-wrap: wrap;gap: 10px;} .assign-box label{width: 100%;} /* ######################################## Dashbord Services ######################################## */ .service-wrrper{gap: 40px;} /* ######################################## Dashbord Setting ######################################## */ .setting-main{padding: 20px;} /* ######################################## Dashbord Topbar ######################################## */ .profile-dropdown .cutom-profile { font-size: 15px; line-height: 20px; } .profile-dropdown .cutom-profile div span{display: none}; .profile-dropdown .cutom-profile .profile img { width: 38px; height: 38px; } .dashbord-profile-site .notification-button { padding: 6px; width: 32px; height: 32px; line-height: 32px; } .dashbord-main { padding: 20px; } .dashboard-middle-cnt { height: calc(100vh - 71px); height: calc(100svh - 71px); } .dashbord-card { padding: 16px; } .team-dashbord { padding: 20px 20px; } .team-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-direction: column; text-align: center; gap: 20px; } .custom-tab .nav-pills {margin: auto auto 20px auto;} .team-table { overflow-x: auto; } .team-table table { width: 900px !important; } .setting-button .primary-btn{ padding: 15px 40px; } .form-checkbox-inner { gap: 20px; } .profile-title { margin-bottom: 15px; } .profiledetails-section { padding-block: 10px; } .service-details-inner .title-style-3 { margin-bottom: 4px; } .skin-clinic { padding: 14px 0; } .unique-skill { padding: 6px 0; } .about-content { padding: 6px 0; } .cutom-link li a { font-size: 14px; line-height: 22px; } .check-out-main { padding-block: 20px; } .customer-card { padding: 15px; margin-bottom: 15px; } .my-appointments-part{padding: 50px 0;} .add-note, .cancel { font-size: 13px; } .reschedule{font-size: 13px;} /* ######################################## Switch toggle css ######################################## */ .set-business-wrapper { display: flex; align-items: flex-start; gap: 10px; flex-direction: column; } .set-business-wrapper .set-select{width: 100%;} .set-business-wrapper .single-select-dropdown-main{width: 50%;} .custom-tab .nav-pills .nav-link { padding: 10px 10px; font-size: 14px; line-height: 16px; } .top-title { padding-inline: 11px; } .sales-wrapper { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; flex-direction: column; gap: 20px; } }