body {
background: #f9f9f9;
padding: 0px;
margin: 0px;
font-family: "DM Serif Display";
}
html {
scroll-behavior: smooth;
}
/* .container{
max-width: 1024px;
padding: 0 15px;
} */
/* DM Sans  variable font (supports weight 100..1000) self-hosted from /public/assets/fonts.
Two unicode-range slices keep payload small while still covering latin + latin-ext. */
@font-face {
font-family: 'DM Sans';
src: url('../fonts/DMSans-Regular-Ext.woff2') format('woff2');
font-weight: 100 1000;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'DM Sans';
src: url('../fonts/DMSans-Regular.woff2') format('woff2');
font-weight: 100 1000;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'DM Sans';
src: url('../fonts/DMSans-Italic-Ext.woff2') format('woff2');
font-weight: 100 1000;
font-style: italic;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'DM Sans';
src: url('../fonts/DMSans-Italic.woff2') format('woff2');
font-weight: 100 1000;
font-style: italic;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Serif Display kept for marketing/display copy that explicitly opts in via var(--font-serif). */
/* DM Sans  variable font (supports weight 100..1000) self-hosted from /public/assets/fonts.
Two unicode-range slices keep payload small while still covering latin + latin-ext. */
@font-face {
font-family: 'DM Sans';
src: url('../fonts/DMSans-Regular-Ext.woff2') format('woff2');
font-weight: 100 1000;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'DM Sans';
src: url('../fonts/DMSans-Regular.woff2') format('woff2');
font-weight: 100 1000;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'DM Sans';
src: url('../fonts/DMSans-Italic-Ext.woff2') format('woff2');
font-weight: 100 1000;
font-style: italic;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'DM Sans';
src: url('../fonts/DMSans-Italic.woff2') format('woff2');
font-weight: 100 1000;
font-style: italic;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Serif Display kept for marketing/display copy that explicitly opts in via var(--font-serif). */
@font-face {
font-family: 'DM Serif Display';
src: url('../fonts/DMSerifDisplay-Italic.woff2') format('woff2'),
url('../fonts/DMSerifDisplay-Italic.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'DM Serif Display';
src: url('../fonts/DMSerifDisplay-Regular.woff2') format('woff2'),
url('../fonts/DMSerifDisplay-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* ============= css start here ========================== */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); */
* {
font-family: 'DM Sans', sans-serif;
}
header .header {
display: flex;
align-items: center;
justify-content: space-between;
}
/* header .header .logo img {
width: 160px;
} */
header .header .menu ul.site_menu {
display: flex;
gap: 28px;
margin: 0px;
}
header .header .menu {
display: flex;
align-items: center;
gap: 32px;
justify-content: space-between;
width: 100%;
}
header .header .menu ul.site_menu li {
list-style: none;
padding: 0px 25px;
}
header .header .menu ul.site_menu li a {
color: #ffffff;
font-size: 14px;
line-height: 21px;
font-weight: 600;
padding: 9px 0px 0px !important;
text-transform: uppercase;
text-decoration: none;
transition: 0.2s ease-in all;
list-style: none;
}
header {
background: #1b1b3f;
width: 100%;
padding: 15px 0px;
position: fixed;
top: 0px;
z-index: 999;
}
header.sticky {
background: #1b1b3f;
width: 100%;
padding: 7px 0px;
position: fixed;
top: 0px;
z-index: 99;
}
header .header .menu ul.site_menu li a:hover {
color: rgb(16, 141, 227);
}
header .header .menu ul.site_menu li a {
position: relative;
text-decoration: none;
}
/* line */
header .header .menu ul.site_menu li a::after {
content: "";
position: absolute;
left: 0;
bottom: -5px;
width: 0;
height: 2px;
background-color: #108de3;
transition: width 0.3s ease;
}
/* hover effect */
header .header .menu ul.site_menu li a:not(.active):hover::after {
width: 100%;
}
/* header .header .menu .buttons button {
line-height: 126%;
padding: 12px 25px;
border-radius: 5px;
backdrop-filter: blur(10px);
font-weight: 300;
transition: 0.5s;
} */
header .header .menu .buttons button#Register {
background: transparent;
border: 1px solid #fff;
}
header .header .menu .buttons {
display: flex;
gap: 8px;
}
header .header .menu .buttons button:hover {
transform: inherit;
transition: 0.3s ease-in all;
background-color: #f0f6ff;
color: #108de3;
color: #fff;
transform: scale(1.05);
}
header .header .menu .buttons button.active {
transition: 0.3s ease-in all;
}
.buttons button {
background: #108de3;
border-radius: 36px;
color: #fff;
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 10px 35px;
border: none;
transition: 0.3s ease-in all;
}
.buttons .dropdown-menu:after {
content: "";
position: absolute;
top: -6px;
right: 17px;
width: 12px;
height: 12px;
background-color: rgb(255 255 255);
transform: rotate(45deg);
border-radius: 1px;
}
.buttons button:hover {
transform: scale(1.05);
transition: 0.3s ease-in all;
background: #108de3 !important;
}
.buttons button.active {
transform: scale(1.05);
transition: 0.3s ease-in all;
}
.buttons a.dropdown-item {
font-size: 14px;
padding: 7px 10px;
}
/*
.header {
background: #1B1B3F;
width: 100%;
padding: 7px 0px;
position: fixed;
top: 0px;
z-index: 999;
}
.header .navbar-expand-lg .navbar-collapse{
justify-content: center;
}
.header .navbar-nav li{
padding: 0px 45px;
}
.header .navbar-nav li a {
color: #FFFFFF;
font-size: 14px;
line-height: 21px;
font-weight: 600;
padding: 0px !important;
text-transform: uppercase;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
color: #108DE3;
border-bottom: solid solid 1px #108DE3;
}
.find-match button{
background: #108DE3;
border-radius: 36px;
color: #fff;
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 10px 40px;
border: none;
} */
.slider {
background: url(/assets/img/slider.png) no-repeat;
background-size: cover;
width: 100%;
height: 930px;
display: flex;
align-items: center;
margin-top: 87px;
position: relative;
}
.slider .row {
align-items: center;
}
.surgmatch-content h1 {
font-size: 70px;
font-weight: 700;
line-height: 76px;
color: #262f40;
}
.surgmatch-content h1 span {
color: #108de3;
}
.surgmatch-content h6 {
padding: 15px 0px;
color: #108de3;
font-size: 16px;
font-weight: 600;
margin-bottom: 0px;
}
.surgmatch-content p {
padding: 0px 0px;
color: #525252;
font-size: 16px;
font-weight: 400;
margin-bottom: 15px;
}
.findmatch-btn {
display: flex;
align-items: center;
column-gap: 15px;
}
.findmatch-btn button {
background: #fff;
border-radius: 36px;
color: #108de3;
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 10px 40px;
border: solid 1px #108de3;
transition: 0.3s ease-in all;
}
.findmatch-btn button:hover {
background: #108de3;
color: #fff;
transform: scale(1.05);
}
.surgmatch-content-tt img {
max-width: 80%;
animation: bounce 2s infinite ease-in-out;
}
.surgmatch-content-tt {
display: flex;
justify-content: end;
}
.how {
background: #f5f7f8;
padding: 115px 0px;
}
.howtosurg-works {
text-align: center;
}
.howtosurg-works p {
max-width: 900px;
text-align: center;
width: 100%;
margin: 0 auto;
}
.howtosurg-works h2 {
font-size: 56px;
font-weight: 700;
line-height: 76px;
color: #262f40;
margin-bottom: 12px;
}
.howtosurg-works h2 span {
color: #108de3;
}
.howtosurg-works p {
padding: 0px 0px;
color: #525252;
font-size: 16px;
font-weight: 400;
margin-bottom: 71px;
}
.share-needsbox {
box-shadow: 0px 2px 7px 0px #0000001a;
background: #fff;
border-radius: 20px;
padding: 20px;
}
.share-needsbox {
box-shadow: 0px 2px 7px 0px #0000001a;
background: #fff;
border-radius: 20px;
padding: 40px 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
z-index: 9;
height: 100%;
}
.needs-guide {
width: 75px;
height: 75px;
background: #cfecff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 15px;
position: relative;
}
.needs-guide span {
position: absolute;
width: 32px;
height: 32px;
background: #108de3;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 20px;
line-height: 24px;
font-weight: 600;
top: -13px;
right: -16px;
}
.share-needsbox h6 {
color: #262f40;
font-size: 18px;
font-weight: 600;
line-height: 100%;
padding: 15px 0px;
margin-bottom: 0px;
}
.share-needsbox p {
color: #525252;
font-size: 15px;
font-weight: 400;
margin-bottom: 0px;
text-align: center;
}
.infrom-empowred h6 {
color: #108de3;
font-size: 20px;
font-weight: 600;
line-height: 100%;
padding-top: 103px;
text-align: center;
}
.how .row {
position: relative;
}
.how .row:after {
position: absolute;
content: "";
width: 95%;
height: 1px;
background: rgba(16, 141, 227, 50%);
bottom: 66px;
left: 29px;
right: 0px;
}
.whyai {
padding: 115px 0px;
background: #fff;
}
.Decision-support {
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 7px 0px;
background: rgb(255, 255, 255);
border-radius: 20px;
padding: 40px 20px;
position: relative;
z-index: 9;
height: 100%;
}
.ai-translate {
width: 75px;
height: 75px;
background: #cfecff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 15px;
}
.Decision-support h6 {
color: #262f40;
font-size: 18px;
font-weight: 600;
line-height: 100%;
padding: 15px 0px;
margin-bottom: 0px;
}
.Decision-support p {
color: #525252;
font-size: 15px;
font-weight: 400;
margin-bottom: 0px;
text-align: start;
}
.result {
background: url(/assets/img/result.png) no-repeat;
background-size: cover;
width: 100%;
height: 570px;
display: flex;
align-items: center;
}
.data-point h2 {
font-size: 56px;
font-weight: 700;
line-height: 76px;
color: #ffffff;
margin-bottom: 12px;
}
.data-point h2 span {
color: rgba(16, 141, 227, 1);
}
.data-point p {
color: #fff;
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-bottom: 60px;
}
.data-point {
text-align: center;
}
.precision-matching {
box-shadow: 0px 2px 7px 0px #000 0001A;
background: rgba(0, 0, 0, 0.2);
padding: 30px;
border: solid 1px rgba(16, 141, 227, 1);
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.precision-matching h2 {
color: rgba(16, 141, 227, 1);
font-weight: 800;
font-size: 70px;
line-height: 100%;
}
.precision-matching h6 {
color: #fff;
font-size: 18px;
font-weight: 600;
line-height: 100%;
padding: 10px 0px;
margin-bottom: 0px;
}
.precision-matching p {
color: #fff;
font-size: 14px;
font-weight: 400;
line-height: 22px;
padding: 0px 0px;
margin-bottom: 0px;
}
.journey {
padding: 115px 0px;
background: #fff;
}
.journey .row {
align-items: center;
}
.complete-transparncey {
display: flex;
align-items: center;
column-gap: 20px;
margin-top: 30px;
}
.complete-transparncey .complete-transparncey-content {
width: 85%;
}
.search-check {
width: 75px;
height: 75px;
background: #cfecff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 15px;
}
.complete-transparncey-content h6 {
color: rgba(38, 47, 64, 1);
font-size: 18px;
font-weight: 600;
line-height: 100%;
margin-bottom: 8px;
}
.complete-transparncey-content p {
color: rgba(67, 67, 67, 1);
font-size: 15px;
font-weight: 400;
line-height: 22px;
margin-bottom: 0px;
}
.journey-madeclear h2 {
font-size: 56px;
font-weight: 700;
line-height: 76px;
color: #262f40;
margin-bottom: 12px;
}
.journey-madeclear h2 span {
color: rgba(16, 141, 227, 1);
}
.madeclaer-img {
position: relative;
}
.madeclaer-img {
position: relative;
left: 60px;
}
.trust-matching {
position: absolute;
left: -20px;
}
.trust-matching img {
transform: rotate(0deg);
}
.matched-partner {
display: flex;
align-items: center;
column-gap: 5px;
position: absolute;
top: 127px;
z-index: 999;
background: #fff;
border-radius: 5px;
padding: 10px;
left: -50px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
animation: bounce 2s infinite ease-in-out;
}
.supported-partner {
display: flex;
align-items: center;
column-gap: 5px;
position: absolute;
bottom: 9px;
z-index: 999;
background: #fff;
border-radius: 5px;
padding: 10px;
left: -66px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
animation: bounce 2s infinite ease-in-out;
}
.matched-partner h6 {
color: rgba(16, 141, 227, 1);
font-size: 13px;
font-weight: 500;
line-height: 20px;
margin-bottom: 0px;
}
.supported-partner h6 {
color: rgba(16, 141, 227, 1);
font-size: 13px;
font-weight: 500;
line-height: 20px;
margin-bottom: 0px;
}
.Confident-partner {
display: flex;
align-items: center;
column-gap: 5px;
position: absolute;
bottom: 136px;
z-index: 999;
background: #fff;
border-radius: 5px;
padding: 10px;
right: 115px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
animation: bounce 2s infinite ease-in-out;
}
.Confident-partner h6 {
color: rgba(16, 141, 227, 1);
font-size: 13px;
font-weight: 500;
line-height: 20px;
margin-bottom: 0px;
}
.Trust-partner {
display: flex;
align-items: center;
column-gap: 5px;
position: absolute;
top: 53px;
z-index: 999;
background: #fff;
border-radius: 5px;
padding: 10px;
right: 137px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
animation: bounce 2s infinite ease-in-out;
}
.Trust-partner h6 {
color: rgba(16, 141, 227, 1);
font-size: 13px;
font-weight: 500;
line-height: 20px;
margin-bottom: 0px;
}
.smarter-way {
background: url(/assets/img/smarter-way.png) no-repeat;
background-size: cover;
width: 100%;
height: 400px;
display: flex;
align-items: center;
}
.navigate-surgical {
text-align: center;
}
.navigate-surgical h2 {
color: rgba(38, 47, 64, 1);
font-size: 56px;
font-weight: 700;
line-height: 130%;
margin-bottom: 12px;
}
.navigate-surgical h2 span {
color: rgba(16, 141, 227, 1);
}
.navigate-surgical p {
color: rgba(67, 67, 67, 1);
font-size: 15px;
font-weight: 400;
line-height: 22px;
margin-bottom: 0px;
padding: 12px 0px 34px;
}
.navigate-surgical .findmatch-btn {
justify-content: center;
}
.footer {
background: url(/assets/img/footer.png) no-repeat;
background-size: cover;
width: 100%;
height: 300px;
display: flex;
align-items: center;
}
.f-menu {
display: flex;
column-gap: 80px;
justify-content: space-between;
}
.sub-menu h6 {
color: #fff;
font-size: 20px;
font-weight: 600;
line-height: 28px;
margin-bottom: 24px;
}
.sub-menu ul {
padding: 0px;
margin: 0px;
}
.sub-menu ul li {
list-style: none;
}
.sub-menu ul li a {
text-decoration: none;
padding: 5px 0px;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #fff;
display: block;
}
.stay-date h6 {
color: #fff;
font-size: 20px;
font-weight: 600;
line-height: 28px;
margin-bottom: 24px;
}
.stay-date input {
background: rgba(255, 255, 255, 20%);
border-radius: 8px;
padding: 5px;
border: none;
color: #fff;
font-size: 14px;
font-weight: 400;
line-height: 20px;
padding: 10px;
}
.stay-date input:focus {
background: rgba(255, 255, 255, 20%);
border-radius: 8px;
}
.stay-date input::placeholder {
color: rgba(217, 219, 225, 1);
}
.stay-date .form-control:focus {
color: rgba(217, 219, 225, 1);
}
.stay-date-prt {
position: relative;
}
.stay-date span {
position: absolute;
right: 13px;
top: 8px;
}
@keyframes bounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
.footer-btm {
background: rgba(4, 19, 29, 1);
border-top: solid 1px rgba(16, 141, 227, 0.5);
padding: 19px 0px;
}
.footer-btm p {
text-align: center;
margin-bottom: 0px;
color: #fff;
font-weight: 500;
font-size: 13px;
line-height: 20px;
}
.social-media {
margin-top: 15px;
display: flex;
align-items: center;
column-gap: 15px;
margin-left: 0px;
}
.social-media a {
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 10%);
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
text-decoration: none;
font-size: 16px;
transition: 0.3s ease-in all;
}
.social-media a:hover {
background: #108de3;
}
.logo h1 {
margin-bottom: 0px;
}
.bottom-arrow {
position: absolute;
right: 50%;
bottom: 60px;
animation: arrowFloat 1.8s infinite ease-in-out;
}
@keyframes arrowFloat {
0% {
transform: translate(-50%, 0);
opacity: 0.7;
}
50% {
transform: translate(-50%, -12px);
opacity: 1;
}
100% {
transform: translate(-50%, 0);
opacity: 0.7;
}
}
header .header .menu ul.site_menu li a.active {
border-bottom: solid 2px #108de3;
color: #108de3;
}
.login {
background: url("/assets/img/login-bg.jpg") no-repeat center center;
background-size: cover;
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
}
.login::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
height: 100%;
width: 100%;
z-index: 0;
background: linear-gradient(90deg, #071423 0%, rgba(3, 25, 45, 0.85) 30%, #31587ecf 50%, #03192d33 70%, #23334270 100%)
}
.login>* {
position: relative;
z-index: 2;
}
/* .login-box {
background: #0a101f;
padding: 30px;
border-radius: 12px;
box-shadow: 0 0 20px hsl(230deg 70% 55% / 20%), inset 0 0 20px hsl(var(--primary, 230 70% 55%) / .1);
} */
.login-box {
padding: 30px;
border-radius: 12px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 7px 0px;
background: rgb(255, 255, 255);
}
.login-logo {
display: flex;
justify-content: center;
padding: 20px 0px;
cursor: pointer;
}
.login-logo img {
width: 200px;
}
/* .login-box h2{
text-align: center;
color: #ffff;
margin-bottom: 0px;
font-weight: 500;
} */
.login-box h2 {
text-align: center;
color: #49969c;
margin-bottom: 0px;
font-weight: 600;
font-size: 30px;
}
.login-box label {
color: #262f40;
font-size: 14px;
font-weight: 600;
}
.login-box p {
color: #525252;
font-size: 14px;
margin-bottom: 0px;
padding: 10px 0px;
text-align: center;
}
.login-box label {
color: #262f40;
font-size: 14px;
font-weight: 600;
margin-bottom: 6px;
}
.login-box input {
background: #fff;
border-radius: 6px;
padding: 10px 10px;
color: #525252;
border: solid 1px #1f2b3e40;
font-size: 13px;
}
.login-box input:focus {
background: #ffffff;
border: solid 1px #00bfff;
}
.login-box input::placeholder {
color: #525252;
}
.login-box button {
background: #49969c;
border-radius: 36px;
color: #fff;
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 10px 40px;
border: none;
transition: 0.3s ease-in all;
width: 100%;
margin: 7px 0px;
cursor: pointer;
}
.login-box button:hover {
transform: scale(1.05);
transition: 0.3s ease-in all;
background: #49969c;
}
.login-box a {
color: #49969c;
font-size: 14px;
font-weight: 600;
}
.login-box select {
background: #fff;
border-radius: 8px;
padding: 9px 10px;
color: #525252;
border: solid 1px #1f2b3e40;
font-size: 14px;
}
.login-box select:focus {
background: #fff;
border: solid 1px #00bfff;
}
.login-box select::after {
filter: invert(1);
background: url("/assets/img/from-arrow.svg") no-repeat center center;
content: "";
position: absolute;
top: 10px;
right: 0px;
}
/* input#exampleFormControlInput1::-webkit-calendar-picker-indicator {
filter: invert(1000);
} */
.select-wrapper {
position: relative;
}
.select-wrapper::after {
content: "";
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-50%);
width: 14px;
height: 14px;
background: url("/assets/img/form-arrow.svg") no-repeat center center;
background-size: contain;
pointer-events: none;
filter: invert(1000);
opacity: 0.6;
}
.submit {
display: flex;
justify-content: center;
align-items: center;
}
.submit button {
display: block;
width: auto;
}
.symptoms {
background: url(/assets/img/slider.png) no-repeat;
background-size: cover;
width: 100%;
height: 1100px;
display: flex;
position: relative;
margin-top: 78px;
padding: 23px 0px;
}
.sysmt-img {
background: #fff;
border-radius: 20px;
box-shadow: 0px 2px 7px 0px #0000001a;
padding: 21px 25px;
}
.gr-border {
background: linear-gradient(179.78deg,
#21d3f1 -2.02%,
#086adc 97.96%,
#0868dc 100%);
padding: 1px;
border-radius: 20px;
}
.sysmt-content h2 {
font-size: 45px;
font-weight: 700;
line-height: 140%;
color: #262f40;
margin-bottom: 0px;
}
.sysmt-content h2 span {
color: #108de3;
}
.sysmt-content h6 {
font-size: 16px;
font-weight: 600;
line-height: 100%;
color: #108de3;
margin-bottom: 0px;
padding: 14px 0px;
}
.sysmt-content p {
color: #525252;
font-size: 16px;
font-weight: 400;
margin-bottom: 0px;
padding-bottom: 32px;
}
.where-begin p {
color: #525252;
font-size: 16px;
font-weight: 400;
margin-bottom: 0px;
padding: 91px 55px 0px;
text-align: center;
margin-bottom: 0px;
}
.your-option-list {
box-shadow: 0px 2px 7px 0px #0000001a;
background: #fff;
border-radius: 20px;
padding: 15px;
border-left: solid 2px #108de3;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
transition: 0.3s ease-in all;
overflow: hidden;
cursor: pointer;
}
.your-option {
width: 75%;
}
.your-option-list:hover {
transform: translateY(-10px);
transition: 0.3s ease-in all;
}
.your-option-list::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0%;
height: 2px;
background: linear-gradient(90deg, #49969C, #49969C);
transition: width 0.4s ease;
border-radius: 20px;
}
.your-option-list:hover::before {
width: 100%;
transition: 0.3 ease-in all;
border-radius: 20px;
}
.start-body {
display: flex;
align-items: center;
column-gap: 15px;
}
.body-icon {
background: #49969c47;
width: 57px;
height: 57px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}
.start-body .body-content h6 {
padding: 0px;
font-weight: 600;
font-size: 16px;
line-height: 100%;
color: #262f40;
margin-bottom: 5px;
}
.start-body .body-content p {
color: #525252;
font-size: 16px;
font-weight: 400;
margin-bottom: 0px;
padding-bottom: 0px;
}
.body-content {
width: calc(100% - 72px);
}
.arrow-assestment {
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
background: #cfecff;
border-radius: 5px;
}
.sysmt-content h3 {
color: #108de3;
text-align: center;
padding-top: 31px;
font-size: 18px;
font-weight: 600;
line-height: 100%;
}
.sysmt-img {
position: relative;
}
.sysmt-img span {
position: absolute;
bottom: 0px;
right: 46px;
bottom: 40px;
cursor: pointer;
}
.sysmt-img img {
transition: opacity 0.3s ease;
}
/* ===============================
FORCE CLICKABLE BODY OVERLAY
================================ */
/* parents must allow overlays */
.gr-border,
.sysmt-img {
position: relative;
overflow: visible !important;
}
/* image should NEVER block clicks */
.sysmt-img img {
pointer-events: none;
display: block;
width: 100%;
}
/* invisible overlay to normalize click layer */
.body-overlay {
position: absolute;
inset: 0;
z-index: 5;
pointer-events: none;
}
/* body hotspot wrapper */
.body-hotspot {
position: absolute;
transform: translate(-50%, -50%);
z-index: 10;
}
/* 🔥 BIG CLICK AREA (KEY FIX) */
.hotspot-click-area {
width: 45px;
height: 45px;
cursor: pointer;
}
/* popup bubble */
.hotspot-label {
position: absolute;
top: -48px;
left: 50%;
transform: translateX(-50%);
background: #fff;
border: 1px solid #108de3;
border-radius: 8px;
padding: 6px 12px;
white-space: nowrap;
z-index: 20;
}
.hotspot-label strong {
display: block;
font-size: 13px;
font-weight: 600;
color: #108de3;
}
.hotspot-label small {
font-size: 11px;
color: #666;
}
.buttons {
position: relative;
}
.buttons .dropdown-menu {
position: absolute;
top: 23% !important;
right: 0;
background: #fff;
border-radius: 8px;
min-width: 180px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
z-index: 1000;
}
.buttons .dropdown-item button {
width: 100%;
background: none;
border: none;
padding: 12px 16px;
text-align: left;
cursor: pointer;
font-size: 12px;
transition: 0.3s ease-in all;
}
.buttons .dropdown-item:hover {
background: #108de3;
transition: 0.3s ease-in all;
color: #fff;
}
.upload-id {
width: 100%;
max-width: 320px;
border: 1px dashed rgba(47, 128, 237, 0.349);
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
background: #f9fbff;
padding: 15px;
font-size: 14px;
color: #525252;
font-weight: 500;
}
.upload-id:hover {
background: #eef4ff;
border-color: #1c6dd0;
}
.upload-id p {
margin-top: 8px;
font-size: 14px;
color: #2f80ed;
}
.upload-id img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.upload-icon {
font-size: 32px;
color: #2f80ed;
font-weight: bold;
}
.upload-doc img {
width: 25px;
height: 25px;
filter: invert(1) brightness(2);
object-fit: inherit;
border-radius: 0px;
}
.upload-doc {
margin: 0px 0px 6px;
background: #108de3;
border-radius: 100%;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
}
.eyefiled {
position: relative;
}
.eyefiled span {
position: absolute;
right: 1px;
top: 1px;
width: 40px;
height: 37px;
background: #fff;
border-radius: 10px;
text-align: center;
align-content: center;
color: #262e40;
}
.buttons .user-profile {
background: #64a6aba1;
border-radius: 36px;
color: #fff;
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 5px 6px;
border: none;
transition: 0.3s ease-in all;
}
.profile-dropdown {
position: absolute;
right: -20px;
top: 50px;
background: #fff;
/* border-radius: 8px; */
/* box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15); */
/* min-width: 150px; */
/* overflow: hidden; */
z-index: 1000;
padding: 9px 0px;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
padding: 8px 0;
min-width: 200px;
border: solid 1px rgb(204 204 204 / 55%);
}
.profile-dropdown::before {
content: "";
position: absolute;
top: -5px;
right: 32px;
width: 12px;
height: 12px;
background: #ffffff;
transform: rotate(45deg);
box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.1);
z-index: 999;
}
.profile-dropdown button {
width: 100%;
padding: 8px 14px;
background: none;
border: none;
text-align: left;
cursor: pointer;
color: #212529;
border-radius: 0px;
margin: 2px 0px;
font-size: 14px;
font-weight: 400;
display: flex;
align-items: center;
column-gap: 10px;
}
.profile-dropdown button:hover {
background-color: #49969c5c !important;
color: #49969C !important;
transform: inherit !important;
}
.eyefiled span#toggle i {
font-size: 13px;
}
.forgotlink {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 5px 0px;
}
.checkforgot {
display: flex;
align-items: center;
column-gap: 6px;
padding: 5px 0px;
}
.checkforgot input {
width: 15px;
height: 15px;
}
.registerinputlabel {
margin-bottom: 10px;
}
.faq {
padding: 80px 0px;
}
.help-center-content h1 {
text-align: start;
font-size: 40px;
font-weight: 700;
line-height: 76px;
color: #262f40;
}
.help-center-content h6 {
text-align: center;
color: #108de3;
font-size: 25px;
font-weight: 500;
}
.help-center-content {
padding: 40px 0px;
}
.questions-card {
background: #fff;
box-shadow: 0px 2px 7px 0px #0000001a;
padding: 20px 30px;
border-radius: 10px;
border: solid 1px #e2e8ee;
margin-top: 67px;
}
.help-center-content p {
padding: 15px 0px 0px;
color: #525252;
font-size: 16px;
font-weight: 400;
margin-bottom: 0px;
max-width: 1000px;
text-align: center;
margin: 0 auto;
}
.getting-started h2 {
color: #49969C;
font-size: 21px;
font-weight: 500;
padding: 20px 0px;
display: flex;
align-items: center;
column-gap: 10px;
margin-bottom: 0px;
}
.questions-card .accordion-body {
font-size: 14px;
color: #525252;
font-weight: 400;
}
.questions-card .accordion-button:not(.collapsed) {
background: #49969c47;
}
.questions-card .accordion-item h2 button {
font-size: 16px;
line-height: 100%;
color: #262f40;
margin-bottom: 0px;
font-weight: 600;
}
.questions-card .accordion-button:focus {
box-shadow: 0 0 0.25rem rgb(204 226 227) !important;
}
.getting-started span {
background: #49969c47;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
font-size: 16px;
color: #49969C;
}
.legal-ploicy-servi {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 27px;
}
.legal-ploicy-servi h6 {
color: #ffffff;
font-size: 35px;
font-weight: 600;
margin-bottom: 0px;
position: relative;
z-index: 99;
}
.contact .legal-ploicy-servi p {
color: #fff;
font-size: 14px;
margin-bottom: 0px;
font-weight: 400;
text-align: center;
z-index: 99;
position: relative;
}
section.policy {
padding: 70px 0px;
}
.legeal-service h6 {
color: #262f40;
font-size: 23px;
margin-bottom: 0px;
padding: 23px 7px 0px;
font-weight: 700;
}
.legeal-service p {
font-size: 16px;
color: #525252;
font-weight: 400;
margin-bottom: 0px;
position: relative;
padding-left: 42px;
padding-top: 9px;
}
.legeal-service p::after {
position: absolute;
content: "";
background: #525252;
border-radius: 100%;
width: 5px;
height: 5px;
left: 27px;
top: 17px;
}
table.history-table .status-badge:after {
display: none;
}
table.history-table .status-badge {
padding: 3px 24px;
text-align: center;
width: auto;
}
.legeal-service ul {
padding: 0px;
margin: 0px 54px;
}
.legeal-service ul li {
font-size: 16px;
color: #525252;
font-weight: 400;
padding: 5px 0px;
}
.welcome-surgmatch ul {
padding: 0px;
margin: 0px 58px;
}
.welcome-surgmatch ul li {
font-size: 16px;
color: #525252;
font-weight: 400;
padding: 3px 0px;
}
.legeal-service span {
color: #262f40;
font-size: 14px;
margin-bottom: 0px;
padding: 10px 22px 0px;
font-weight: 700;
display: block;
}
section.policy .legal-ploicy-servi {
margin: 0;
padding: 35px 0px 0px;
flex-direction: column;
/* background: #108de330 url(/assets/img/slider.png) no-repeat; */
background-position: center;
margin-top: 35px;
}
section.contact .legal-ploicy-servi {
margin: 0;
padding: 70px 0px 70px;
height: 350px;
flex-direction: column;
background: #108de330 url(/assets/img/contact-banner.jpg) no-repeat;
background-position: center;
margin-top: 27px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
section.contact .legal-ploicy-servi::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
url(/assets/img/surgmatch_contact_banner-after.png) center/cover no-repeat,
linear-gradient(to right, rgba(10, 25, 60, 0.9) 0%, rgba(10, 25, 60, 0.75) 30%, rgba(10, 25, 60, 0.4) 55%, rgba(10, 25, 60, 0) 75%),
linear-gradient(to right, rgba(29, 45, 83, 0.6) 0%, rgba(29, 45, 83, 0.3) 50%, rgba(29, 45, 83, 0.6) 100%);
z-index: 2;
pointer-events: none;
}
section.faq .legal-ploicy-servi {
margin: 0;
flex-direction: column;
/* background: #108de330 url(/assets/img/slider.png) no-repeat; */
background-position: center;
margin-top: 50px;
}
.policy .legal-ploicy-servi h6 {
color: #49969C;
}
.policy .legal-ploicy-servi p {
color: #525252;
margin-bottom: 0px;
padding: 9px 0px;
}
.legeal-service {
padding: 35px 0px;
}
.welcome-surgmatch p {
margin-bottom: 0px;
font-size: 16px;
color: #262f40;
font-weight: 400;
padding: 5px 0px;
}
.welcome-surgmatch p::after {
display: none;
}
.faq .legal-ploicy-servi h6 {
color: #49969C;
font-size: 35px;
font-weight: 600;
margin-bottom: 0px;
}
.faq .legal-ploicy-servi p {
color: #525252;
margin-bottom: 0px;
padding: 9px 0px;
}
.welcome-surgmatch p {
padding-left: 44px;
}
/* hr{
border: solid 1px #dee2e6;
} */
.questions-card .accordion-item {
border-color: #cce2e3;
}
.coming-soon {
padding: 120px 0;
}
.coming-soon h1 {
font-size: 42px;
font-weight: 700;
}
.coming-soon p {
font-size: 18px;
color: #108de3;
}
.coming-soon small {
color: #777;
}
.checkforgot label {
margin-bottom: 0px !important;
display: flex;
align-items: center;
}
.registerinputlabel {
color: #d85252;
}
main {
min-height: calc(100vh - 359px);
}
.profile {
padding: 75px 0px;
}
section.profile .legal-ploicy-servi {
margin: 0;
padding: 70px;
flex-direction: column;
background: #108de330 url(/assets/img/slider.png) no-repeat;
background-position: center;
}
.profile-user {
padding: 0px 0px 0px;
border-radius: 12px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 7px 0px;
background: rgb(255, 255, 255);
margin-top: 63px;
/* border-bottom: solid 3px #21adee; */
}
.profile-user .nav-pills li button {
color: #108de3;
font-size: 16px;
transition: 0.2s ease-in all;
padding: 6px 23px;
font-size: 16px;
font-weight: 600;
}
/* .profile-user .nav-pills li button:hover{
background: #0d6efd;
transition: 0.2s ease-in all;
color: #fff;
} */
.tabbbing-card .nav-pills {
margin: 0px 0px;
flex-direction: column;
width: 100%;
transition: 0.3s ease-in all;
}
.tabbbing-card .nav-pills li {
width: 100%;
padding: 5px 0px;
}
.tabbbing-card .nav-pills li button {
width: 100%;
color: #262f40;
display: flex;
align-items: center;
column-gap: 10px;
justify-content: start;
border-radius: 0px;
position: relative;
font-size: 15px;
}
.tabbbing-card .nav-pills li button img {
height: 20px;
filter: invert(1);
}
.tabbbing-card .nav-pills li button span {
display: inline-flex;
width: 25px;
justify-content: center;
align-items: center;
}
.tabbbing-card .nav-pills li button span i {
font-size: 21px;
}
/* .profile-user .tab-pane {
border-radius: 12px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 7px 0px;
background: rgb(255, 255, 255);
margin-top: 31px;
} */
.profile-user .tab-pane h2 {
color: #262f40;
font-size: 23px;
font-weight: 600;
margin-bottom: 0px;
line-height: 100%;
border-bottom: solid 1px #ddd;
padding: 15px 20px;
}
.account-information {
padding: 20px 20px 20px;
}
.account-information input {
background: #fff;
border-radius: 6px;
padding: 10px 10px;
color: #525252;
border: solid 1px #1f2b3e40;
font-size: 14px;
}
.account-information label {
color: #262f40;
font-size: 14px;
font-weight: 600;
margin-bottom: 6px;
}
.account-information select {
background: #fff;
border-radius: 6px;
padding: 9px 10px;
color: #525252;
border: solid 1px #1f2b3e40;
font-size: 14px;
}
.account-information textarea {
resize: inherit;
font-size: 14px;
}
.account-information textarea:focus {
background: #ffffff;
border: solid 1px #49969C;
}
.savechnages {
display: flex;
align-items: center;
column-gap: 10px;
justify-content: end;
}
.savechnages button {
background: #49969C;
border-radius: 36px;
color: #fff;
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 8px 30px;
border: none;
transition: 0.3s ease-in all;
margin: 7px 0px;
cursor: pointer;
}
.savechnages button:hover {
transform: scale(1.05);
transition: 0.3s ease-in all;
background: #49969C;
}
button.cancel {
border: solid 1px #49969C;
background: none;
color: #49969C;
}
button.cancel:hover {
color: #fff;
}
.history-table {
width: 100%;
border-collapse: collapse;
border: solid 1px #e5e7eb;
border-radius: 0px;
overflow: hidden;
}
.history-table thead {
background-color: #f6f8fa;
}
.history-table th {
text-align: left;
font-size: 14px;
font-weight: 500;
color: #262f40;
border: 1px solid #94c1c5b3;
padding: 10px 15px;
font-weight: 600;
white-space: nowrap;
}
.history-table td {
padding: 12px;
font-size: 14px;
color: #525252;
border: 1px solid #e5e7eb;
vertical-align: middle;
white-space: nowrap;
}
.history-table tbody tr:hover {
background-color: #f9fafb;
}
.recommendation-text {
color: #6b7280;
max-width: 320px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.status-badge {
padding: 7px 27px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
display: inline-block;
}
.status-badge.completed {
background-color: #30a66f;
color: #ffffff;
}
.status-badge.progress {
background-color: #108de3;
color: #ffffff;
height: auto;
white-space: nowrap;
}
.view-action {
color: #62a5aa;
text-decoration: none;
font-weight: 600;
font-size: 12px;
background: #49969c47;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 35px;
padding: 3px 14px;
text-transform: lowercase;
}
.view-action i {
margin-right: 6px;
}
.view-action:hover {
text-decoration: none;
}
.professoinal {
background: #49969c3d;
padding: 15px;
border-radius: 5px;
border: solid 1px #49969c6b;
display: flex;
align-items: center;
justify-content: space-between;
}
.active-plan h6 {
color: #262f40;
font-size: 20px;
margin-bottom: 10px;
font-weight: 600;
display: flex;
align-items: center;
column-gap: 10px;
}
.active-plan h6 span {
background: #30a66f;
border-radius: 20px;
font-size: 12px;
padding: 5px 14px;
color: #fff;
}
.active-plan p {
padding: 0px 0px;
color: #525252;
font-size: 16px;
font-weight: 400;
margin-bottom: 0px;
}
.upgrade-plan button {
background: #49969C;
border-radius: 36px;
color: #fff;
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 8px 32px;
border: none;
transition: 0.3s ease-in all;
margin: 7px 0px;
cursor: pointer;
}
.upgrade-plan button:hover {
transform: scale(1.05);
transition: 0.3s ease-in all;
background: #108de3;
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
background: #62a5aa;
}
.errorFocus {
border-color: #df3851a3 !important;
border: solid 1;
}
.history-wrapper h3 {
color: #262f40;
font-size: 19px;
font-weight: 600;
margin-bottom: 10px;
line-height: 100%;
padding: 10px 0px;
}
.history-card {
overflow: hidden;
border: none;
border-radius: 0px;
}
.help-center-contact {
margin-top: 30px;
}
.help-center-contact ul {
padding: 0px;
margin: 0px 39px;
}
.help-center-contact ul li {
font-size: 16px;
color: #525252;
font-weight: 400;
padding: 5px 0px;
list-style: none;
display: flex;
align-items: center;
column-gap: 10px;
}
.help-center-contact .getting-started h2 {
padding: 20px 0px 3px;
}
.user-profile-img {
width: 100px;
height: 100px;
margin-bottom: 10px;
margin: 0 auto;
margin-bottom: 19px;
position: relative;
background: #1b1b3f2b;
border-radius: 100%;
margin-top: -50px;
z-index: 9;
position: relative;
display: flex;
justify-content: center;
align-items: center;
background: #559da3b3;
border: solid 3px rgb(255 255 255 / 79%);
}
.user-profile-img img {
width: 100%;
height: 100%;
border-radius: 100%;
object-fit: cover;
border: solid 6px #64a6aba1;
}
.user-profile-img span {
position: absolute;
z-index: 9999;
bottom: 0px;
right: 0px;
background: #49969C;
border-radius: 100%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 12px;
border: solid 2px #ffff;
cursor: pointer;
}
.informatin-bg {
background: linear-gradient(135deg, #49969c 0%, #49969c 40%, #49969Ccc 70%, #49969c 100%);
height: 100px;
padding: 0px -20px;
margin: -20px;
}
.edit-name {
position: relative;
}
span.pencel {
position: absolute;
top: 40px;
right: 15px;
font-size: 14px;
color: #8f8f8f;
}
.edit-address {
position: relative;
}
.edit-address span.pencel {
position: absolute;
top: 39px;
right: 28px;
font-size: 14px;
color: #8f8f8f;
}
.tabbbing-card {
padding: 20px 0px;
border-radius: 12px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 7px 0px;
background: rgb(255, 255, 255);
margin-top: 63px;
border-bottom: solid 3px #49969C;
transition: 0.3s ease-in all;
}
.tabbbing-card:hover {
transform: translateY(-10px);
}
.tabbbing-card ul li button.active:after {
position: absolute;
content: "";
background: url(../img/arrow-left.svg) no-repeat;
background-size: 20px;
width: 20px;
height: 20px;
right: -10px;
top: 30%;
}
.tabbbing-card .nav-link.active span img {
filter: brightness(0) invert(1);
}
.pgn-button ul {
display: flex;
align-items: center;
justify-content: end;
margin-top: 17px;
}
.pgn-button ul li {
list-style: none;
margin: 0px 5px;
}
.pgn-button ul li button {
border-radius: 5px;
width: 35px;
height: 35px;
border: none;
display: flex;
justify-content: center;
align-items: center;
background: #e3f0fd;
font-size: 15px;
color: #108de3;
transition: 0.3s ease-in all;
}
.pgn-button ul li button:hover {
background: #108de3;
color: #fff;
}
.pgn-button ul li button.active {
background: #108de3;
color: #fff;
}
.health-care {
padding-top: 50px;
text-align: center;
}
.health-care h1 {
font-size: 40px;
font-weight: 700;
line-height: 76px;
color: #262f40;
margin-bottom: 25px;
}
.health-care h1 span {
color: #108de3;
}
.service-card {
box-shadow: 0px 2px 7px 0px #0000001a;
background: #fff;
border-radius: 20px;
padding: 15px;
border-bottom: solid 2px #108de3;
margin-bottom: 20px;
align-items: center;
justify-content: space-between;
position: relative;
transition: 0.3s ease-in all;
overflow: hidden;
cursor: pointer;
height: 100%;
}
.service-card:hover {
transform: translateY(-10px);
transition: 0.3s ease-in all;
}
.systom-content p {
background: #1b1b3ff5;
border-radius: 35px;
color: #fff !important;
font-size: 12px !important;
display: inline-block;
padding: 2px 13px;
margin-bottom: 0px;
}
.systom-content h2 {
color: #262f40;
font-size: 18px;
font-weight: 600;
line-height: 100%;
padding: 8px 0px;
margin-bottom: 0px;
}
.service-card p {
color: #525252;
font-size: 15px;
font-weight: 400;
margin-bottom: 0px;
text-align: start;
padding-top: 8px;
}
.icon-ismart {
width: 60px;
height: 60px;
background: #cfecff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 15px;
}
.systom-icon {
display: flex;
align-items: center;
column-gap: 10px;
}
.systom-content {
padding-top: 12px;
}
.icon-ismart img {
max-width: 35px;
}
.contact-from {
box-shadow: 0px 2px 7px 0px #0000001a;
background: #fff;
border-radius: 20px;
padding: 15px;
border-bottom: solid 2px #49969C;
margin-bottom: 20px;
align-items: center;
justify-content: space-between;
position: relative;
transition: 0.3s ease-in all;
overflow: hidden;
cursor: pointer;
height: 100%;
}
.contact-from:hover {
transform: translateY(-10px);
transition: 0.3s ease-in all;
}
.contact {
padding: 50px 0px;
}
.service {
padding: 50px 0px;
}
.contact-from h2 {
color: #262f40;
font-size: 25px;
font-weight: 600;
line-height: 100%;
padding: 15px 0px;
margin-bottom: 0px;
}
.contact-from iframe {
width: 100%;
height: 100%;
}
.body-icon i {
font-size: 19px;
color: #49969C;
}
.contact .start-body .body-content p {
font-size: 14px;
}
.contact .your-option h2 {
color: #262f40;
font-size: 25px;
font-weight: 600;
line-height: 100%;
padding: 15px 0px;
margin-bottom: 15px;
}
.contact .your-option-list {
border: solid 1px #49969c47;
box-shadow: none;
}
.contact .health-care {
padding-top: 20px;
text-align: center;
}
.surg-dfty {
margin-top: 47px;
}
/*
.profile-dropdown::after {
content: "";
position: absolute;
top: -5px;
right: 20px;
width: 12px;
height: 12px;
background: #fff;
transform: rotate(45deg);
box-shadow: -2px -2px 5px rgba(0,0,0,0.05);
} */
.doctor-slider {
position: relative;
background: linear-gradient(135deg, #367fc7, #2da2f7);
color: #fff;
overflow: hidden;
height: 650px;
position: relative;
display: flex;
align-items: center;
}
.wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
line-height: 0;
}
.wave svg {
width: 100%;
height: 120px;
}
.wave path {
fill: #f5f7f8;
}
.doctor-content {
position: relative;
z-index: 9;
}
.doctor-content h1 {
font-size: 50px;
font-weight: 700;
line-height: 50px;
color: #fff;
margin-bottom: 0px;
}
.doctor-content h1 span {
color: #fff;
}
.doctor-content p {
padding: 0px 0px;
color: rgb(255 255 255 / 78%);
font-size: 16px;
font-weight: 400;
margin-bottom: 0px;
padding: 20px 0px;
}
.profile .tabbbing-card h2 {
font-size: 22px;
padding-left: 28px;
color: #49969C;
}
/* .findmatch-btn button {
border-width: 2px;
} */
main {
min-height: calc(100vh - 359px);
}
/* ===== sdgjdsfjhsdfjhf ========= */
.whyjoin-platfrom {
background: #f5f7f8;
padding: 60px 0px;
}
.howits-work {
background: #fff;
padding: 60px 0px;
position: relative;
}
.howits-work .row {
position: relative;
}
.howits-work .row:after {
position: absolute;
content: "";
width: 95%;
height: 1px;
background: rgba(16, 141, 227, 50%);
bottom: 66px;
left: 29px;
right: 0px;
}
.howits-work .needs-guide img {
max-width: 34px;
}
.howits-work .needs-guide span {
width: 25px;
height: 25px;
font-size: 17px;
}
.doctor-slider:after {
position: absolute;
content: "";
width: 95%;
height: 1px;
background: url(../img/doctor-bg.svg);
bottom: 66px;
left: 29px;
right: 0px;
height: 100%;
opacity: 0.1;
pointer-events: none;
}
.doctor-slider .row {
align-items: center;
position: relative;
z-index: 99;
}
.doctor-profile-img {
width: 500px;
display: flex;
justify-content: end;
align-items: center;
}
.doctor-profile-img {
position: relative;
z-index: 9;
}
.doctor-profile-img img {
border-radius: 10px;
}
.doctor-profile-img:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: rgb(16 141 227 / 14%);
bottom: 0px;
left: 0px;
right: 0px;
z-index: 999;
border-radius: 10px;
}
span.plus-doctr-new {
position: absolute;
bottom: 20px;
left: 20px;
display: inline-block;
animation: spin 5s linear infinite;
opacity: 0.7;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
span.plus-doctr-new img {
width: 35px;
}
span.plus-doctr {
position: absolute;
top: 4px;
right: 10px;
opacity: 0.7;
}
span.plus-doctr img {
width: 45px;
}
.doctor-content .findmatch-btn button:hover {
background: #1b1b3f;
border-color: #fff;
}
.header-dashboard {
background: #fff;
}
/* =============== Doctor dashboard CSS Start Here ================================ */
.header-dashboard {
background: #fff;
padding: 15px;
display: flex;
align-items: center;
position: fixed;
width: 100%;
top: 0px;
z-index: 99;
border-bottom: solid 1px #e5e7eb;
}
.d-logo {
display: flex;
align-items: center;
column-gap: 25px;
}
.d-logo h2 {
color: #fff;
font-size: 25px;
margin-bottom: 0px;
}
.profile-dropdown-das .dropdown-toggle::after {
content: "";
display: inline-block;
width: 12px;
height: 12px;
background: url(../img/arrow-down.svg) no-repeat center;
background-size: 9px;
vertical-align: middle;
border: none;
pointer-events: none;
filter: invert(0) brightness(0);
}
.profile-dropdown-das .dropdown-menu {
position: relative;
}
.profile-dropdown-das .dropdown-menu::before {
content: "";
position: absolute;
top: -5px;
left: 39px;
width: 12px;
height: 12px;
background: #ffffff;
transform: rotate(45deg);
box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.1);
z-index: 999;
}
.profile-dropdown-das .dropdown-menu li {
position: relative;
z-index: 9999;
}
.dropdown-item:focus,
.dropdown-item:focus {
outline: none;
}
.profile-dropdown-das .profile-btn {
display: flex;
align-items: center;
gap: 12px;
border-radius: 4px;
background: #fff;
border: none !important;
padding: 0px;
}
.logo img {
height: 45px;
}
.profile-dropdown-das .profile-img {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
border: solid 2px #18afea73;
border-radius: 100%;
}
.profile-dropdown-das .profile-info {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.profile-dropdown-das .profile-name {
font-size: 16px;
font-weight: 600;
color: var(--text-color);
line-height: 20px;
}
.profile-dropdown-das .profile-role {
font-size: 12px;
font-weight: 500;
color: #77777f;
text-transform: uppercase;
line-height: 14px;
}
.profile-dropdown-das .dropdown-menu {
border-radius: 6px;
min-width: 200px;
margin-top: 12px !important;
}
.profile-dropdown-das .dropdown-item:hover {
background-color: #f5f5f5;
}
.profile-dropdown-das .profile-btn:focus {
outline: none;
box-shadow: none;
border: 0;
}
.profile-dropdown-das .btn.show,
.profile-dropdown-das .btn:active,
.profile-dropdown-das .btn:focus {
border: none;
box-shadow: none;
}
.profile-dropdown-das .dropdown-menu a {
padding: 10px 15px;
border-bottom: solid 1px #ddd;
transition: 0.3s ease-in-out;
font-size: 13px;
font-weight: 500;
color: #77777f;
line-height: 14px;
}
.profile-dropdown-das .dropdown-menu a:last-child {
border-bottom: none;
}
.profile-dropdown-das .dropdown-menu a:hover {
background: var(--blue);
color: var(--white);
}
.dropdown.profile-dropdown-das {
display: flex;
justify-content: end;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 96%;
width: 250px;
padding: 0;
background-color: #ffffff;
transition: var(--tran-05);
z-index: 100;
margin: 20px;
box-shadow: 0 0 40px #0000000d;
border-radius: 10px;
overflow: hidden;
transition: 0.5s;
}
.sidebar.close {
width: 80px;
}
/* ===== Reusable code - Here ===== */
.sidebar header {
position: relative;
border-bottom: 1px solid #ccc;
padding: 0 0 10px;
}
/* .sidebar header .image,
.sidebar .icon {
min-width: 60px;
border-radius: 6px;
} */
.sidebar .icon {
min-width: 60px;
border-radius: 6px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.sidebar .text,
.sidebar .icon {
color: var(--text-color);
transition: var(--tran-03);
}
.sidebar.close span.toggle span.two {
right: auto;
left: 0;
}
.sidebar .text {
font-size: 14px;
font-weight: 400;
white-space: nowrap;
color: #636363;
width: 100%;
transition: 0.5s ease-in all;
opacity: 1;
visibility: visible;
}
.sidebar.close .text {
opacity: 0;
visibility: hidden;
width: 1px;
transition: 0.5s ease-in all;
}
/* =========================== */
.sidebar header {
position: relative;
border-bottom: 1px solid #ccc;
padding: 0px 0 15px;
margin: 0 0 20px;
}
.sidebar header .image-text {
display: flex;
align-items: center;
justify-content: space-between;
}
.sidebar header .logo-text {
display: flex;
flex-direction: column;
}
header .image-text .name {
margin-top: 2px;
font-size: 28px;
font-weight: 800;
color: #fff;
}
.sidebar header .image {
margin-right: 10px;
}
header .image-text .profession {
font-size: 20px;
margin-top: -10px;
display: block;
font-weight: 200;
color: #fff;
}
.sidebar header .image {
display: flex;
align-items: center;
justify-content: center;
}
.sidebar header .image img {
width: 160px;
border-radius: 0px;
}
span.toggle {
position: relative;
width: 25px;
height: 18px;
cursor: pointer;
}
span.toggle span {
position: absolute;
width: 100%;
height: 2px;
background: #636363;
border-radius: 5px;
top: 0;
right: 0;
}
span.toggle span.two {
top: 8px;
width: 80%;
}
span.toggle span.three {
top: 16px;
}
/* .sidebar header .toggle {
position: absolute;
top: 10%;
right: -28px;
transform: translateY(-50%) rotate(180deg);
height: 25px;
width: 25px;
background-color: #000000;
color: var(--sidebar-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
cursor: pointer;
transition: var(--tran-05);
} */
body.dark .sidebar header .toggle {
color: var(--text-color);
}
/* .sidebar.close .toggle{
transform: translateY(-50%) rotate(0deg);
} */
.sidebar .menu {
margin-top: 10px;
}
.sidebar li.search-box {
border-radius: 6px;
background-color: var(--primary-color-light);
cursor: pointer;
transition: var(--tran-05);
}
.sidebar li.search-box input {
height: 100%;
width: 100%;
outline: none;
border: none;
background-color: var(--primary-color-light);
color: var(--text-color);
border-radius: 6px;
font-size: 17px;
font-weight: 500;
transition: var(--tran-05);
}
.sidebar li a {
list-style: none;
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
text-decoration: none;
transition: 0.3s ease-in all;
gap: 5px;
padding: 10px 15px;
}
.sidebar header {
margin: 15px;
}
.sidebar .menu-bar .menu {
padding: 0 15px;
}
.sidebar .menu-bar li.nav-link.Sign_Out {
margin: 0px 15px;
background: #49969C;
padding: 0px;
}
.sidebar .menu-bar li.nav-link.Sign_Out a i {
color: #fff;
}
.sidebar .menu-bar li.nav-link.Sign_Out a span.text {
color: #fff;
}
.sidebar li a i {
font-size: 18px;
color: #636363;
}
.sidebar li.active a i {
color: #ff173d;
}
.sidebar li a img {
margin-right: 0px;
width: 20px;
filter: invert(45%) sepia(9%) saturate(906%) hue-rotate(179deg) brightness(89%) contrast(86%);
transition: 0.3s;
}
.sidebar li.nav-link:hover a img,
.sidebar li.nav-link.active a img {
filter: brightness(0) invert(1);
}
.sidebar li.active a .text {
color: #108de3;
font-weight: 500;
}
/* .sidebar li a:hover {
background-color: #f6f6f6;
} */
/* .sidebar li a:hover .icon,
.sidebar li a:hover .text {
font-weight: 600;
} */
body.dark .sidebar li a:hover .icon,
body.dark .sidebar li a:hover .text {
color: var(--text-color);
}
.sidebar .menu-bar {
height: calc(100% - 90px);
display: flex;
flex-direction: column;
justify-content: space-between;
overflow-y: scroll;
}
.menu-bar::-webkit-scrollbar {
display: none;
}
.sidebar.close~.Right_part {
left: 76px;
height: 100vh;
width: calc(100% - 96px);
}
.sidebar .menu ul.menu-links {
padding: 0;
margin: 0;
}
.sidebar.close header .image-text {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
}
.sidebar.close header .image-text span.image {
opacity: 1;
visibility: visible;
width: 40px;
min-width: 40px;
height: 40px;
margin: 0;
overflow: visible;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar.close header .image-text span.image img.sidebar-brand-logo {
width: 40px;
height: 40px;
max-width: 40px;
margin: 0;
object-fit: contain;
}
.sidebar li.nav-link {
padding: 0;
margin: 0 0 5px;
transition: 0.3s ease-in all;
border-radius: 5px;
}
.sidebar li.nav-link:hover {
background: #49969C;
color: #fff;
}
.sidebar li.nav-link:hover span {
color: #fff;
}
.sidebar li.nav-link:hover svg {
color: #fff;
}
.sidebar .text {
font-size: 14px;
margin-left: 10px;
width: calc(22px - 100%);
}
.sidebar {
width: 250px;
}
.sidebar .menu ul.menu-links li svg {
color: #a8b0bc;
height: 22px;
width: 22px;
}
.Right_part {
position: absolute;
top: 0;
top: 0;
left: 270px;
width: calc(100% - 290px);
transition: var(--tran-05);
padding: 0px 20px 0px 10px;
margin: 20px;
min-height: 95vh;
max-height: 95vh;
overflow: auto;
transition: 0.5s;
}
.Right_part .text {
font-size: 30px;
font-weight: 500;
color: var(--text-color);
padding: 12px 60px;
}
.sidebar.close~.Right_part {
left: 100px;
height: 100vh;
width: calc(100% - 120px);
}
.Right_part .main {
min-height: calc(100vh - 228px);
margin-right: 0px;
padding: 0px 0 0;
margin-top: 24px;
}
.Right_part {
left: 280px;
width: calc(100% - 300px);
overflow-x: hidden;
}
.site_header {
display: flex;
align-items: center;
justify-content: space-between;
}
.site_header .user {
width: 20%;
display: flex;
justify-content: end;
}
.site_header .Search {
width: 33.33%;
}
.site_header .Icon {
width: 20%;
text-align: start;
}
.site_header .user .dropdown .dropbtn {
display: flex;
align-items: center;
justify-content: end;
}
.site_header .user .dropdown .dropbtn .user_icon {
margin-right: 15px;
}
/* .site_header .user .dropdown .dropbtn .user_icon img {
width: 100%;
} */
.sidebar .menu ul.menu-links {
padding: 0;
margin: 0;
}
.site_header .user .dropdown .dropbtn .user_name h2 {
font-size: 16px;
font-weight: 500;
color: #222;
margin: 0;
}
.site_header .user .dropdown .dropbtn .user_name p.designation {
margin: 0;
font-size: 12px;
font-weight: 300;
color: #6c7c93;
}
.site_header .user .dropdown .dropbtn .user_name p.last_login {
margin: 0px 0 0;
font-size: 14px;
color: #222222;
font-weight: 500;
}
.site_header .user .dropdown .dropbtn .user_icon {
position: relative;
}
.site_header .user .dropdown .dropbtn .user_icon span.user_edit {
position: absolute;
bottom: 0;
display: block;
right: -5px;
}
.site_header .Search form {
width: 100%;
position: relative;
overflow: hidden;
}
.site_header .Search form input {
width: 100%;
height: 50px;
border-radius: 50px;
outline: none;
border: 1px solid #cecece;
padding: 10px 20px;
font-weight: 500;
}
.site_header .Search form button {
position: absolute;
right: 0px;
top: 0;
border: 0;
background: #2a3374;
height: 50px;
padding: 0 25px;
border-radius: 0px 50px 50px 0;
color: #fff;
font-size: 20px;
}
.site_header .Icon .icon_inner a {
text-decoration: none;
margin: 0 0 0 5px;
transition: 0.3s;
color: #222;
}
.site_header .Icon .icon_inner a:hover img {
transform: scale(1.05);
}
header .site_header .Icon .icon_inner a img {
transition: 0.3s;
}
.site_header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
margin: 0 0 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 40px 0px #0000000d;
z-index: 99;
left: auto;
width: 100%;
transition: 0.5s;
position: sticky;
top: 0;
right: auto;
}
/* .sidebar.close ~ .Right_part .site_header {
left: 122px;
width: calc(100% - 157px);
} */
.user_icon {
width: 40px;
height: 40px;
}
.user_icon img {
width: 100%;
height: 100%;
border-radius: 100%;
object-fit: cover;
border: solid 2px rgb(73 150 156 / 59%);
}
.icon_inner h2 {
color: #262f40;
font-size: 25px;
margin-bottom: 5px;
font-weight: 400;
white-space: nowrap;
}
.icon_inner h6 {
color: #6c7c93;
font-size: 14px;
margin-bottom: 0px;
font-weight: 400;
}
.user_name h2 span {
color: #262f40;
font-weight: 400;
}
.profile-verfication-card {
box-shadow: 0px 2px 7px 0px #0000001a;
background: #fff;
border-radius: 20px;
padding: 31px 15px;
border-left: solid 2px #49969C;
margin-bottom: 20px;
display: flex;
align-items: end;
justify-content: space-between;
position: relative;
transition: 0.3s ease-in all;
overflow: hidden;
cursor: pointer;
margin-top: 0px;
}
.profile-verification {
width: 80px;
height: 80px;
}
.profile-verification img {
width: 100%;
height: 100%;
border-radius: 15px;
object-fit: cover;
}
.profile-using-dash {
display: flex;
align-items: self-start;
column-gap: 21px;
}
.profile-using-dash .under-review h6 {
color: #262f40;
font-size: 19px;
margin-bottom: 0px;
padding-top: 5px;
}
.editprofile-doctor button {
background: #49969C;
border-radius: 100px;
color: #fff;
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 8px 10px;
border: solid 1px #49969C;
transition: 0.3s ease-in all;
display: flex;
align-items: center;
column-gap: 5px;
justify-content: center;
}
.editprofile-doctor button:hover {
transform: scale(1.05);
}
.editprofile-doctor button svg {
height: 16px;
}
span.approvde {
border-radius: 10px;
background: #f3e8ce9e;
color: #dd9e01;
padding: 2px 14px 2px 23px;
border-radius: 35px;
font-size: 12px;
position: absolute;
top: 15px;
right: 15px;
}
span.approvde::after {
position: absolute;
content: "";
width: 5px;
height: 5px;
background: #fbbd23;
left: 12px;
top: 9px;
border-radius: 100%;
}
.profile-using-dash p {
padding: 0px 0px;
color: #525252;
font-size: 14px;
font-weight: 400;
margin-bottom: 0px;
max-width: 800px;
}
.profile-viewrs {
border: solid 2px #fff;
box-shadow: 0px 5px 10px 0px #00000014;
background: #108de345;
border-radius: 20px;
padding: 15px 20px;
margin-bottom: 20px;
display: flex;
align-items: self-start;
justify-content: space-between;
position: relative;
transition: 0.3s ease-in all;
overflow: hidden;
cursor: pointer;
margin-top: 10px;
flex-direction: column;
}
.profile-viewrs:hover {
transform: translateY(-10px);
transition: 0.3s ease-in all;
}
.viewrs-content {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.viewrs-content h6 {
color: #525252;
font-size: 17px;
margin-bottom: 0px;
}
.profile-viewrs h2 {
color: #262f40;
font-size: 45px;
margin-bottom: 0px;
padding: 0px 0px 10px;
font-weight: 600;
}
.profile-viewrs span {
color: #108de3;
font-size: 15px;
font-weight: 600;
}
.defty {
background: #f3e8ff;
}
.deftydrty {
background: #ffe2e5;
}
.viewrs-content svg {
height: 20px;
}
.inrease-profile {
width: 50px;
height: 50px;
background: #fa5a7d;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.defty .inrease-profile {
width: 50px;
height: 50px;
background: #bf83ff;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.udrft .inrease-profile {
background: #49969C;
}
li.nav-link.active {
background: #49969C;
color: #fff;
}
header.d-header {
background: none;
}
.user {
position: relative;
cursor: pointer;
}
.dropbtn {
padding: 0px 0px;
border-radius: 12px;
transition: 0.3s;
margin-right: 0px;
}
.profile-img {
width: 45px;
height: 45px;
border-radius: 50%;
object-fit: cover;
}
.user_name h2 {
font-size: 16px;
font-weight: 600;
margin: 0;
}
.user_name .designation {
font-size: 13px;
color: #6c757d;
}
.user-dropdown {
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
padding: 8px 0;
min-width: 200px;
border: solid 1px rgb(204 204 204 / 32%);
margin-top: 9px !important;
}
.user-dropdown .dropdown-item {
padding: 10px 16px;
font-size: 14px;
transition: 0.2s;
display: flex;
align-items: center;
column-gap: 8px;
}
.user-dropdown .dropdown-item img {
width: 18px;
}
.user-dropdown .dropdown-item:hover {
background-color: #49969c5c;
color: #49969C;
}
.user-dropdown .dropdown-item:hover img {
filter: invert(53%) sepia(28%) saturate(623%) hue-rotate(140deg) brightness(92%) contrast(90%);
}
.user-dropdown::before {
content: "";
position: absolute;
top: -5px;
right: 28px;
width: 12px;
height: 12px;
background: #ffffff;
transform: rotate(45deg);
box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.1);
z-index: 999;
}
/* .user.dropdown::after {
content: "";
display: inline-block;
width: 12px;
height: 12px;
background: url(../img/arrow-down-profile.svg) no-repeat center;
background-size: 9px;
vertical-align: middle;
border: none;
pointer-events: none;
filter: invert(0) brightness(0);
position: absolute;
top: 17px;
} */
.sidebar .menu ul.menu-links li.active svg a svg {
color: #fff;
}
.sidebar .menu-bar .menu ul.menu-links li.nav-link.active a svg {
color: #fff;
}
.sidebar .menu-bar .menu ul.menu-links li.nav-link.active a span.text.nav-text {
color: #fff;
font-weight: 600;
}
.sidebar .menu-bar .menu ul.menu-links li.nav-link:hover a svg {
color: #fff;
}
/* FontAwesome sidebar icons (replaces the old ![]()
icons) */
.sidebar .menu ul.menu-links li.nav-link a i.sidebar-icon,
.sidebar .ftr-dash li.nav-link a i.sidebar-icon {
color: #6c7c93;
font-size: 17px;
width: 22px;
text-align: center;
display: inline-block;
margin-right: 0px;
transition: color 0.2s ease;
}
.sidebar .menu ul.menu-links li.nav-link.active a i.sidebar-icon,
.sidebar .menu ul.menu-links li.nav-link:hover a i.sidebar-icon {
color: #fff;
}
/* Sign Out — same brand teal as the active sidebar item, white icon + text */
.sidebar .ftr-dash li.nav-link.Sign_Out {
background: #49969C;
border-radius: 6px;
margin: 0 4px 8px;
}
.sidebar .ftr-dash li.nav-link.Sign_Out a {
color: #fff;
}
.sidebar .ftr-dash li.nav-link.Sign_Out a i.sidebar-icon,
.sidebar .ftr-dash li.nav-link.Sign_Out:hover a i.sidebar-icon {
color: #fff;
}
.sidebar .ftr-dash li.nav-link.Sign_Out a .text {
color: #fff;
font-weight: 600;
}
.sidebar .ftr-dash li.nav-link.Sign_Out:hover {
background: #3A7E83;
}
header.d-header {
margin: 0;
padding: 15px;
}
/* .sidebar.close .text {
display: none;
} */
.footer-dash {
border-radius: 8px;
padding: 12px 0px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin-right: 0px;
margin-top: 30px;
background: linear-gradient(90deg, #223F73 0%, #122C52 40%, #0A1F3F 70%, #06172E 100%);
}
.footer-dash p {
color: #fff;
text-align: center;
margin-bottom: 0px;
font-size: 12px;
}
.under-review span {
color: #49969C;
font-size: 14px;
display: block;
padding: 5px 0px;
}
.dash-doctor-profile {
padding: 30px;
margin: 0 0 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 40px 0px #0000000d;
margin-right: 0px;
z-index: 99;
margin-top: 0px;
}
.dcotr-profile-img-d {
display: flex;
align-items: start;
column-gap: 20px;
align-items: center;
margin-bottom: 33px;
}
.doctr-dashboard-profile {
width: 90px;
height: 90px;
position: relative;
}
.doctr-dashboard-profile img {
width: 100%;
height: 100%;
}
.profile-dashboard-content h6 {
color: #262f40;
font-size: 21px;
margin-bottom: 3px;
font-weight: 500;
}
.profile-dashboard-content p {
color: #6c7c93;
font-size: 14px;
margin-bottom: 0px;
}
span.upload-doctor-profile {
position: absolute;
bottom: 0px;
right: 0px;
background: #49969C;
border-radius: 100%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
/* font-size: 9px; */
}
span.upload-doctor-profile svg {
height: 16px;
}
.account-information input:focus {
background: #ffffff;
border: solid 1px #49969C;
}
.chip-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.chip {
padding: 8px 16px;
border-radius: 25px;
border: 1px solid #d1d5db;
cursor: pointer;
font-size: 14px;
background: #f3f4f6;
transition: 0.3s;
display: flex;
align-items: center;
gap: 8px;
}
.chip:hover {
background: #e5e7eb;
}
.chip.active {
background: #e0f2fe;
border: 1px solid #3b82f6;
color: #2563eb;
}
.remove {
font-weight: bold;
cursor: pointer;
}
.area-experties {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 13px;
}
.chip {
padding: 6px 16px;
border-radius: 25px;
border: 1px solid #e0e6eb;
background: #fff;
cursor: pointer;
font-size: 14px;
transition: 0.3s;
display: inline-flex;
align-items: center;
gap: 6px;
position: relative;
}
/* Hide cross by default */
.chip .cross {
display: none;
font-size: 14px;
}
/* When checkbox checked */
input[type="checkbox"]:checked+.chip {
background: #e7f2fc;
border-color: #1285e2;
color: #1285e2;
}
/* Show cross when selected */
input[type="checkbox"]:checked+.chip .cross {
display: inline;
display: flex;
}
label.chip {
color: #6c7c93;
font-weight: 400;
}
span.cross svg {
width: 16px;
}
.document-card {
background: #fff;
padding: 25px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
max-width: 100%;
margin: 8px auto;
height: 100%;
}
.document-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0px;
}
.document-info {
display: flex;
gap: 15px;
margin-bottom: 10px;
}
.document-icon {
width: 45px;
height: 45px;
background: #e6f9f0;
color: #22c55e;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.document-text h4 {
color: #262f40;
font-size: 18px;
font-weight: 400;
line-height: 100%;
padding: 5px 0px;
margin-bottom: 0px;
}
.document-text p {
color: #525252;
font-size: 12px;
font-weight: 400;
margin-bottom: 0px;
text-align: start;
}
.file-name {
font-size: 15px;
color: #000000;
font-weight: 400;
}
.required {
color: red;
}
.status-badge {
padding: 3px 28px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
position: relative;
width: 90px;
font-size: 12px;
font-weight: 400;
}
.status-badge:after {
position: absolute;
content: "";
width: 5px;
height: 5px;
background: #fbbd23;
left: 12px;
top: 9px;
border-radius: 100%;
}
.status-badge.approved:after {
background: #16a34a;
}
.status-badge.pending {
background: #fef8e9;
color: #fbbd23;
}
.status-badge.approved {
background: #e6f9f0;
color: #16a34a;
}
.upload-wrapper {
border: 2px dashed #d1d5db;
border-radius: 14px;
padding: 0px;
text-align: center;
position: relative;
transition: 0.3s ease;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
}
.upload-wrapper:hover {
border-color: #49969c91;
background: #49969c14;
}
.file-input {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.upload-icon {
font-size: 22px;
color: #6b7280;
margin-bottom: 8px;
}
.upload-content p {
margin: 5px 0;
font-size: 15px;
}
.browse-text {
color: #2563eb;
font-weight: 500;
}
.upload-content small {
font-size: 12px;
color: #9ca3af;
}
.medical-license .document-icon {
background: #e7f1f9;
}
.medical-license .document-icon svg {
color: #49969C;
}
.upload-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.upload-icon {
font-size: 22px;
color: #6b7280;
margin-bottom: 8px;
width: 35px;
height: 35px;
display: flex;
justify-content: center;
background: #49969C;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
border-radius: 100%;
}
.document-card.medical-license p {
margin-bottom: 0px;
color: #525252;
font-size: 12px;
font-weight: 400;
text-align: start;
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
gap: 10px;
}
p.preview-pdf span i {
font-size: 70px;
/* color: #fe6565; */
}
.dash-doctor-profile h6 {
color: #262f40;
font-size: 17px;
font-weight: 600;
margin-bottom: 6px;
}
.dash-doctor-profile.procedures .area-experties {
margin-bottom: 0px;
}
.dash-doctor-profile.procedures h6 {
margin-bottom: 14px;
}
.document-card.medical-license .account-information {
padding: 0px 0px 0px;
}
.upload-icon svg {
width: 16px;
}
.add-procedure {
display: flex;
justify-content: space-between;
align-items: center;
/* margin-bottom: 27px; */
width: 100%;
background: #fff;
box-shadow: 0 0 40px 0px #0000000d;
border-radius: 10px;
padding: 15px;
}
.device-names label {
color: #262f40;
font-size: 14px;
font-weight: 600;
margin-bottom: 6px;
}
.device-names {
display: flex;
column-gap: 20px;
width: 75%;
align-items: center;
}
.search-withfilters {
width: 100%;
margin-top: 29px;
}
.search-withfilters input {
background: #fff;
border-radius: 6px;
padding: 10px 10px;
color: #525252;
border: solid 1px #1f2b3e40;
font-size: 14px;
}
.search-withfilters input:focus {
background: #ffffff;
border: solid 1px #49969C;
}
.device-names .select-wrapper {
background: #fff;
border-radius: 6px;
padding: 0px 0px;
color: #525252;
/* border: solid 1px #1f2b3e40; */
font-size: 14px;
transition: 0.3s ease-in all;
min-width: 250px;
}
.device-names .select-wrapper select {
font-size: 14px;
padding: 10px;
}
/* .select-wrapper{
position: relative;
}
.select-wrapper{
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 100%;
}
.select-wrapper::after{
content: "";
position: absolute;
top: 50%;
right: 14px;
transform: translateY(-50%);
width: 14px;
height: 14px;
background: url("/assets/img/form-arrow.svg") no-repeat center;
background-size: contain;
pointer-events: none;
filter: brightness(0) saturate(100%) opacity(0.7);
} */
.device-names select:focus {
background: #ffffff;
border: solid 1px #49969C;
}
.add-procedure button {
background: #49969C;
border-radius: 100px;
color: #fff;
font-size: 14px;
font-weight: 400;
line-height: 20px;
padding: 8px 20px;
border: solid 1px #49969C;
transition: 0.3s ease-in all;
display: flex;
align-items: center;
column-gap: 5px;
justify-content: center;
white-space: nowrap;
}
.add-procedure button:hover {
transform: scale(1.05);
}
/* Card Container */
.submission-card {
background: #f3f4f6;
border-radius: 18px;
padding: 25px 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
width: 100%;
max-width: 900px;
}
/* Title */
.card-title {
font-size: 18px;
font-weight: 600;
color: #1f2937;
margin-bottom: 20px;
}
/* Table */
.submission-table {
width: 100%;
border-collapse: collapse;
overflow: hidden;
}
.submission-table thead th {
text-align: left;
font-size: 14px;
font-weight: 500;
color: #262f40;
border: 1px solid #94c1c5b3;
padding: 10px 15px;
font-weight: 600;
white-space: nowrap;
}
.submission-table tbody td {
padding: 10px 15px;
font-size: 14px;
color: #262f40;
border: 1px solid #e5e7eb;
white-space: nowrap;
}
/* Status Badge */
.status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 14px;
border-radius: 20px;
font-size: 12px;
font-weight: 400;
}
/* Approved */
.status.approved {
background-color: #e6f4ea;
color: #16a34a;
}
/* Active (alias of approved tone but distinct semantic) */
.status.active {
background-color: #e6f7ee;
color: #15803d;
}
/* Pending */
.status.pending {
background-color: #f3e8ce9e;
color: #f59e0b;
}
/* Rejected */
.status.rejected {
background-color: #fde2e2;
color: #dc2626;
}
/* Revision */
.status.revision {
background-color: #e0eaff;
color: #2563eb;
}
/* Inactive */
.status.inactive {
background-color: #eef0f3;
color: #6b7280;
}
/* Waitlist */
.status.waitlist {
background-color: #fff7d6;
color: #b45309;
}
/* Dot */
.status .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #16a34a;
flex-shrink: 0;
}
.status.active .dot { background-color: #15803d; }
.status.rejected .dot { background-color: #dc2626; }
.status.revision .dot { background-color: #2563eb; }
.status.inactive .dot { background-color: #9ca3af; }
.status.pending .dot { background-color: #f59e0b; }
.status.waitlist .dot { background-color: #d97706; }
.custom-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
}
/* Keep react-toastify notifications above the modal overlay (z-index 10000)
so toasts appear on top of the dimmed background, not behind it. */
.Toastify__toast-container {
z-index: 10010 !important;
}
.custom-modal {
background: #fff;
width: 700px;
padding: 20px;
border-radius: 10px;
animation: scaleIn 0.5s ease;
}
.custom-modal h5 {
margin: 0;
}
button.submit-btn {
background: #49969C;
border-radius: 100px;
color: #fff;
font-size: 14px;
font-weight: 400;
line-height: 20px;
padding: 8px 17px;
border: solid 1px #49969C;
transition: 0.3s ease-in all;
display: flex;
align-items: center;
column-gap: 5px;
justify-content: center;
/* display: inline-block; */
margin: 0 auto;
}
button.submit-btn:hover:not(:disabled) {
transform: scale(1.05);
transition: 0.3s ease-in all;
}
/* Disabled state — applies wherever .submit-btn is used (CMS Save
Changes when nothing has been edited, modals, etc.). Keeps the
brand colour but visibly mutes it so the admin can tell at a
glance the button can't be clicked. */
button.submit-btn:disabled,
button.submit-btn[disabled] {
background: #b8d6d8;
border-color: #b8d6d8;
color: #f1f5f9;
cursor: not-allowed;
opacity: 0.75;
transform: none;
box-shadow: none;
filter: grayscale(0.15);
}
button.submit-btn:disabled:hover,
button.submit-btn[disabled]:hover {
transform: none;
background: #b8d6d8;
border-color: #b8d6d8;
}
@keyframes scaleIn {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.custom-modal-overlay .account-information {
padding: 0px;
}
.custom-modal-overlay .modal-header {
position: relative;
margin-bottom: 11px;
border-bottom: solid 1px rgb(221 221 221 / 73%);
padding-bottom: 12px;
}
.custom-modal-overlay .modal-header h4 {
color: #262f40;
font-size: 21px;
margin-bottom: 0px;
font-weight: 600;
white-space: nowrap;
}
.custom-modal-overlay button.close-btn {
position: absolute;
right: 0px;
background: none;
border: none;
top: 0px;
}
button.close-btn img {
width: 11px;
}
.custom-modal-overlay .account-information label {
font-weight: 400;
}
.device-details {
padding: 0px;
margin: 0 0 0px;
background-color: #fff;
border-radius: 14px;
margin-right: 0px;
z-index: 9;
border: solid 1px rgb(73 150 156 / 25%);
border-bottom: solid 3px #49969C;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
overflow: hidden;
position: relative;
cursor: pointer;
box-shadow: 0 6px 18px rgba(38, 47, 64, 0.06);
}
.device-details:hover {
transform: translateY(-6px);
box-shadow: 0 18px 32px -12px rgba(73, 150, 156, 0.35);
border-color: rgb(73 150 156 / 55%);
}
.device-details:focus-visible {
outline: 2px solid #49969C;
outline-offset: 2px;
}
.device-text-details {
padding: 14px 16px 16px;
}
.device-img {
width: 100%;
height: 200px;
background: #f4f8f9;
padding: 0;
overflow: hidden;
border-radius: 0;
position: relative;
}
.device-img::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 50%;
background: linear-gradient(to top, rgba(38, 47, 64, 0.18), transparent);
pointer-events: none;
opacity: 0;
transition: opacity 0.25s ease;
}
.device-details:hover .device-img::after {
opacity: 1;
}
/* Status badges overlaid on the device image (top-right) */
.device-img-badges {
position: absolute;
top: 10px;
right: 10px;
display: inline-flex;
flex-direction: row;
align-items: flex-end;
gap: 6px;
z-index: 2;
pointer-events: none;
}
.device-img-badges .status {
background-color: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 2px 8px rgba(38, 47, 64, 0.15);
border: 1px solid rgba(255, 255, 255, 0.6);
font-weight: 500;
padding: 4px 10px;
}
.device-img-badges .status.approved { color: #15803d; background: #d4f7e1b0;}
.device-img-badges .status.active { color: #15803d; background: #d4f7e1b0;}
.device-img-badges .status.pending { color: #b45309;background: #f5ebcbba; }
.device-img-badges .status.rejected { color: #b91c1c; background: #fadaddb5;}
.device-img-badges .status.inactive { color: #4b5563; }
.device-img img {
width: 100%;
height: 100%;
border-radius: 0;
object-fit: cover;
overflow: hidden;
transition: transform 0.4s ease;
}
.device-details:hover .device-img img {
transform: scale(1.06);
}
.device-text-details-sound h6 {
font-weight: 400;
margin-bottom: 7px;
font-size: 17px;
}
.device-text-details-sound p {
font-size: 14px;
color: #6c757d;
font-weight: 400;
margin-bottom: 0px;
}
/* ---- New, cleaner card footer (replaces .view-details-sop on the
device card so action buttons no longer inherit the legacy red/teal
overrides). ---- */
.device-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
padding-top: 4px;
}
.device-card-footer .device-bodyparts {
background: #eef6f7;
border: 1px solid rgba(73, 150, 156, 0.18);
border-radius: 999px;
padding: 4px 12px;
color: #2c656a;
font-size: 12px;
font-weight: 500;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 45%;
}
.device-card-footer .device-actions {
display: inline-flex;
align-items: center;
gap: 4px;
flex-wrap: nowrap;
margin-left: auto;
}
.device-card-footer .device-actions .view-procedures,
.device-card-footer .device-actions .view-procedures-Reactivate,
.device-card-footer .device-actions .view-procedures-Deactivate {
height: 30px;
min-width: 30px;
padding: 0 8px;
font-size: 12px;
border-radius: 7px;
}
.device-card-footer .device-actions .action-divider {
height: 22px;
margin: 0 2px;
}
/* Keep the legacy .view-details-sop wrapper styling for any other pages
that still rely on it, but ensure the device card no longer uses it. */
.view-details-sop {
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
margin-top: 18px;
}
.view-details-sop p {
background: #eef2f6;
border-radius: 6px;
padding: 5px 10px;
color: #6c757d;
font-size: 14px;
margin-bottom: 0px;
font-weight: 400;
}
.view-details-sop a {
text-decoration: none;
background: #49969C;
border: none;
border-radius: 6px;
padding: 8px 14px;
color: #fff;
font-size: 15px;
display: inline-flex;
align-items: center;
column-gap: 2px;
font-weight: 400;
cursor: pointer;
line-height: 1;
}
.view-details-sop a svg {
width: 16px;
}
span.device-approvie {
position: absolute;
top: 8px;
right: 8px;
font-size: 12px;
background: rgb(171 241 208 / 88%);
padding: 2px 10px 2px 18px;
border-radius: 35px;
color: #16a34a;
font-weight: 400;
z-index: 9999;
}
span.device-approvie:after {
position: absolute;
content: "";
width: 5px;
height: 5px;
background: #16a34a;
left: 9px;
top: 8px;
border-radius: 100%;
}
span.device-approvie.pending {
background: #f3e8ce9e;
color: #e9aa0e;
}
span.device-approvie.pending:after {
background: #fbbd23;
}
span.device-approvie.reject {
background: #ecd6db;
color: #d1374d;
}
span.device-approvie.reject:after {
background: #d1374d;
}
.submit-approvial {
display: flex;
align-items: center;
column-gap: 20px;
}
button.submit-btn.cancel {
background: #fff;
border-radius: 36px;
border: solid 1px #108de3;
color: #108de3;
}
.submit-approvial button {
transition: 0.3s ease-in all;
}
.submit-approvial button:hover {
background: #108de3;
color: #fff;
transform: scale(1.05);
}
.submission-table thead {
background: #f6f8fa;
}
span.status.pending span.dot {
background: #f59e0b;
}
.area-experties.dash-doctor-profile .area-experties {
margin-bottom: 0px;
}
.insurance-plan {
padding: 30px;
margin: 0 0 20px;
background-color: #fff;
border-radius: 10px;
margin-right: 0px;
z-index: 99;
margin-top: 0px;
}
.insurance-plan h6 {
color: #262f40;
font-size: 17px;
font-weight: 600;
margin-bottom: 10px;
}
.insurance-plan .area-experties {
margin-bottom: 0px;
}
.insurance-status {
padding: 20px;
margin: 0 0 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 40px 0px #0000000d;
margin-right: 0px;
z-index: 99;
margin-top: 30px;
border: solid 1px #108de352;
border-bottom: solid 3px #108de3;
transition: 0.3s ease-in all;
overflow: hidden;
position: relative;
cursor: pointer;
}
.insurance-status:hover {
transform: translateY(-10px);
transition: 0.3s ease-in all;
}
.insurance-heading h6 {
color: #262f40;
font-size: 17px;
font-weight: 600;
margin-bottom: 0px;
padding: 20px 0px;
}
.insurance-status h6 {
color: #262f40;
font-size: 17px;
font-weight: 600;
margin-bottom: 0px;
padding: 0px 0px;
}
.insurance-status span.device-approvie {
top: 20px;
right: 20px;
}
.legal-ploicy-servi.legal-ploicy-servi-back {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
flex-direction: row !important;
}
.legal-ploicy-servi.legal-ploicy-servi-back ul.breadcrumb {
font-size: 14px;
}
.legal-ploicy-servi.legal-ploicy-servi-back li.breadcrumb-item {
color: #525252;
text-decoration: none;
font-weight: 400;
font-size: 14px;
}
.legal-ploicy-servi.legal-ploicy-servi-back li.breadcrumb-item a {
color: #49969C;
text-decoration: none;
}
.custom-modal-overlay.termcondition .modal-body.account-information {
height: 500px;
overflow: auto;
overflow-x: hidden;
}
.custom-modal-overlay.termcondition .modal-body.account-information .legeal-service {
padding: 0px 15px;
}
.custom-modal-overlay.termcondition .modal-body.account-information .legeal-service h6 {
font-size: 15px;
padding: 11px 0px 5px;
}
.custom-modal-overlay.termcondition .modal-body.account-information .legeal-service ul li {
font-size: 14px;
}
.custom-modal-overlay.termcondition .modal-body.account-information .legeal-service ul {
padding: 0px;
margin: 0px 37px;
}
/* Scrollbar width */
.custom-modal-overlay.termcondition .modal-body.account-information::-webkit-scrollbar {
width: 6px;
}
/* Scrollbar track */
.custom-modal-overlay.termcondition .modal-body.account-information::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
/* Scrollbar thumb */
.custom-modal-overlay.termcondition .modal-body.account-information::-webkit-scrollbar-thumb {
background: #108DE3;
border-radius: 10px;
}
/* Hover */
.custom-modal-overlay.termcondition .modal-body.account-information::-webkit-scrollbar-thumb:hover {
background: #0c6fb3;
}
.custom-modal-overlay.termcondition .custom-modal.large {
width: 800px;
}
.custom-modal-overlay.termcondition .custom-modal.large button.submit-btn {
width: auto;
margin: 5px 0px 0px;
}
.custom-modal-overlay.termcondition .modal-footer button.disable-submit {
background: #108de3;
border-radius: 100px;
color: #fff;
font-size: 14px;
font-weight: 400;
line-height: 20px;
padding: 8px 17px;
border: solid 1px #108de3;
transition: 0.3s ease-in all;
display: flex;
align-items: center;
column-gap: 5px;
justify-content: center;
opacity: 0.5;
}
.custom-modal-overlay.termcondition .modal-footer {
display: flex;
justify-content: center;
padding: 10px 0px 0px;
border-top: solid 1px rgb(221 221 221 / 31%);
margin-top: 11px;
width: calc(100% + 42px);
margin-left: -21px;
}
.custom-modal-overlay.termcondition .modal-footer .terms-accept-btn button:hover {
transform: scale(1.05);
transition: 0.3s ease-in all;
background: #108de3;
}
.terms-link {
color: #108DE3;
cursor: pointer;
font-weight: 600;
text-decoration: underline
}
.terms-progress {
width: 100%;
height: 4px;
background: #eee;
margin-top: 8px;
}
.terms-progress-bar {
height: 4px;
background: #1a73e8;
transition: width 0.2s ease;
}
.accepted-label {
margin-left: 10px;
color: green;
font-weight: 600;
}
.terms-accept-btn {
display: flex;
justify-content: center;
align-items: center;
}
section.service.contact .legal-ploicy-servi {
margin-bottom: 70px;
}
.profile-dropdown button img {
max-width: 17px;
}
hr.divider {
margin: 5px 0px;
border-color: #848181;
}
.profile-wrapper button.user-profile:hover {
background: #64a6aba1 !important;
}
.swal-confirm-btn,
.swal-cancel-btn {
width: 85px;
}
.css-t3ipsp-control {
box-shadow: none !important;
border: 1px solid #ccc !important;
}
.css-t3ipsp-control--is-focused {
box-shadow: none !important;
border: 1px solid #ccc !important;
}
/* .css-t3ipsp-control:focus {
box-shadow: none !important;
outline: none !important;
} */
/* ========= why ai surgmatch CSS start here =================== */
.for-providers {
background: url(/assets/img/slider.png) no-repeat;
background-size: cover;
width: 100%;
height: 500px;
display: flex;
align-items: center;
margin-top: 87px;
position: relative;
background-position: center;
}
.for-providers .row {
align-items: center;
}
.for-providers .surgmatch-content-tt img {
max-width: 80%;
padding: 4px;
border-radius: 18px;
background: linear-gradient(90deg, #27d3e254, #3b82f66b);
display: inline-block;
}
.platfrom .health-care {
padding-top: 0px;
}
.platfrom .health-care h1 {
margin-bottom: 0px;
}
.platfrom .health-care p {
color: #525252;
font-size: 15px;
font-weight: 400;
margin-bottom: 0px;
text-align: center;
padding-bottom: 34px;
}
.ourpartner-platform {
background: linear-gradient(135deg, #367fc7, #2da2f7);
padding: 50px 0px;
border-radius: 20px;
position: relative;
}
.ourpartner-platform::after {
position: absolute;
content: "";
width: 100%;
height: 1px;
background: url(../img/our-partner.svg);
bottom: 0px;
left: 0px;
contain-intrinsic-block-size: auto 100px;
height: 100%;
opacity: 0.2;
pointer-events: none;
right: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
.ourpartner-platform h2 {
color: #fff;
font-size: 27px;
font-weight: 600;
text-align: center;
position: relative;
z-index: 9999;
}
.ourpartner-platform button {
background: #fff;
border-radius: 36px;
color: #108de3;
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 10px 40px;
border: solid 1px #108de3;
transition: 0.3s ease-in all;
display: flex;
justify-content: center;
align-items: center;
margin: 26px auto 0px;
position: relative;
z-index: 999;
}
.ourpartner-platform button:hover {
background: #1b1b3f;
border-color: #fff;
color: #fff;
transform: scale(1.05);
}
.partnerwith-surgmatch {
padding: 20px 0px 60px;
}
.platfrom .ai-translate img {
max-width: 50px;
}
.legal-ploicy-servi p {
margin-bottom: 0px;
padding: 7px 0px;
color: #525252;
font-size: 15px;
font-weight: 400;
}
.expected-plan {
padding: 15px 0px 60px;
}
.plan-details {
box-shadow: 0px 2px 7px 0px #0000001a;
background: #fff;
border-radius: 20px;
padding: 20px;
border-bottom: solid 2px #108de3;
margin-bottom: 0px;
align-items: center;
position: relative;
overflow: hidden;
cursor: pointer;
height: 100%;
display: flex;
column-gap: 20px;
transition: 0.3s ease-in all;
}
.plan-details:hover {
transform: translateY(-10px);
}
.patient-details {
display: flex;
align-items: center;
column-gap: 30px;
}
.plan-image {
width: 100px;
height: 100px;
background: #cfecff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 15px;
}
.plan-image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.plan-start-date p {
color: #525252;
font-size: 14px;
font-weight: 400;
margin-bottom: 5px;
text-align: start;
padding-top: 0px;
text-transform: uppercase;
}
.plan-start-date h6 {
color: #108de3;
font-size: 15px;
font-weight: 400;
margin-bottom: 0px;
text-align: start;
padding-top: 0px;
text-transform: uppercase;
}
.plan-details h2 svg {
color: #108de3 !important;
width: 20px;
}
.plan-details h2 {
color: #262f40 !important;
font-size: 18px;
font-weight: 400;
align-items: self-start;
width: 100%;
padding: 0px 0px;
margin-bottom: 15px;
display: flex;
align-items: center;
column-gap: 15px;
}
.recovery-plan {
width: 100%;
max-width: 900px;
margin: auto;
}
.plan-steps {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
}
.plan-title {
font-size: 16px;
font-weight: 400;
margin-bottom: 5px;
color: #262f40;
}
.plan-week {
font-size: 15px;
color: rgb(16, 141, 227);
margin: 3px 0 0;
text-align: center;
}
.plan-progress-bar {
width: 100%;
height: 10px;
background: #e5e9ef;
border-radius: 10px;
position: relative;
}
.plan-progress-fill {
width: 40%;
height: 100%;
background: linear-gradient(90deg, #4fc3f7, #1e88e5, #108de3);
border-radius: 10px;
}
.plan-dots {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.plan-dot {
width: 10px;
height: 10px;
background: #cfd6df;
border-radius: 50%;
position: relative;
}
.plan-dot.active {
background: #1e88e5;
}
.plan-dot-label {
position: absolute;
top: -4px;
left: 20px;
font-size: 12px;
color: #4a6fa5;
}
.plan-details.expected-recovery {
flex-direction: column;
}
.recommende-img img {
border-radius: 5px;
width: 100%;
height: 440px;
object-fit: cover;
}
.recommended-plan {
padding: 0px 0px 60px;
}
.recomended-plan-content h2 {
color: #262f40;
font-size: 21px;
font-weight: 600;
}
.recomended-plan-content p {
color: #525252;
font-size: 16px;
font-weight: 400;
margin-bottom: 0px;
padding-bottom: 34px;
}
.Initial-cons {
display: flex;
align-items: center;
column-gap: 15px;
margin-bottom: 20px;
border-bottom: solid 1px #108de317;
padding-bottom: 18px;
border-radius: 10px;
}
.Initial-cons-content p {
color: #525252;
font-size: 16px;
font-weight: 400;
margin-bottom: 0px;
padding-bottom: 0px;
}
.recommende-img {
display: flex;
justify-content: end;
}
.Initial-cons-icon {
background: #cfecff;
width: calc(75px - 15px);
height: 57px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}
.Initial-cons-icon svg {
color: #108de3 !important;
width: 30px;
}
.repaier {
position: relative;
}
.repaier::after {
position: absolute;
content: "";
height: 100%;
width: 2px;
top: 0px;
background: transparent;
left: 29px;
z-index: -1;
border: 1px dashed #1d88e5;
}
.Initial-cons-content {
width: calc(100% - 75px);
}
.keyinstruction .recommende-img {
display: flex;
justify-content: start;
}
.keyinstruction {
padding: 0px 0px 60px;
}
.keyinstruction .your-option {
width: 100%;
}
.keyinstruction .recomended-plan-content h2 {
color: #262f40;
font-size: 21px;
font-weight: 600;
padding-bottom: 17px;
}
.keyinstruction .body-icon {
width: calc(75px - 15px);
}
.keyinstruction .body-icon p {
width: calc(100% - 75px);
}
.questions-basic {
box-shadow: 0px 2px 7px 0px #0000001a;
background: #fff;
border-radius: 20px;
padding: 20px;
border-bottom: solid 2px #108de3;
margin-bottom: 0px;
align-items: center;
position: relative;
transition: 0.3s ease-in all;
overflow: hidden;
cursor: pointer;
height: 100%;
column-gap: 20px;
}
.questions-basic:hover {
transform: translateY(-10px);
}
.questions-basic h6 {
color: #262f40;
font-size: 21px;
font-weight: 600;
margin-bottom: 10px;
}
.questions-basic ul {
padding: 0px;
margin: 0px 20px;
}
.questions-basic ul li {
color: #525252;
font-size: 16px;
font-weight: 400;
padding: 5px 0px;
}
.specfic-questions {
padding: 0px 0px 60px;
}
.keyinstruction .row {
align-items: center;
}
.body-wrapper {
position: relative;
width: 100%;
height: 600px;
display: flex;
justify-content: center;
align-items: center;
}
.human-body {
width: 300px;
height: auto;
}
#tooltip {
position: absolute;
background: #fff;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: none;
width: 250px;
font-size: 12px;
}
.part {
fill: transparent;
stroke: #ccc;
cursor: pointer;
}
.part:hover {
fill: rgba(0, 150, 255, 0.4);
}
/* * after the convert to in next js added the new css start here */
.matched-partner img {
width: 20px;
}
.Trust-partner img {
width: 20px;
}
.Confident-partner img {
width: 20px;
}
.supported-partner img {
width: 20px;
}
/* chatgpt css */
.sysmt-img {
position: relative;
}
/* .body-hotspot {
position: absolute;
transform: translate(-50%, -50%);
cursor: pointer;
}
.hotspot-label {
position: absolute;
top: -35px;
left: 50%;
transform: translateX(-50%);
background: #108de3;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
} */
.toggle-btn {
position: absolute;
bottom: 10px;
left: 10px;
background: #108de3;
color: white;
padding: 8px 12px;
border-radius: 6px;
border: none;
}
/* merei css */
.profile-wrapper button.user-profile img {
width: 100%;
height: 100%;
border-radius: 100%;
object-fit: cover;
}
.profile-wrapper button.user-profile {
width: 40px;
height: 40px;
padding: 1px;
}
/* .custom-modal {
width: 600px;
border-radius: 12px;
padding: 20px;
}
.modal-header h4 {
font-weight: 600;
} */
/* Header */
.procedure-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.procedure-header h5 {
font-size: 16px;
font-weight: 400;
margin: 0;
}
/* Divider */
.divider {
height: 1px;
background: #eee;
margin: 15px 0;
}
.procedures-body p {
background: #f5f7f8;
border-radius: 5px;
padding: 10px;
margin-top: 10px;
font-size: 14px;
color: #525252;
font-weight: 400;
border: solid 1px #dddddd1f;
margin-bottom: 6px;
}
.procedures-body label {
color: #262f40;
font-size: 14px;
font-weight: 400;
margin-bottom: 0px;
}
/* =====================================================================
Action-icon buttons (used across every admin table:
doctor / users / procedures / insurance / devices / queries / content)
Soft-tinted by default, vibrant + lifted on hover, shadow + scale on
active. Uniform 32 px height keeps action rows perfectly aligned.
===================================================================== */
.view-procedures,
.view-procedures-Reactivate,
.view-procedures-Deactivate {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 32px;
min-width: 32px;
padding: 0 10px;
font-size: 12px;
font-weight: 500;
line-height: 1;
border-radius: 8px;
border: 1px solid transparent;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease,
transform 0.18s ease, box-shadow 0.18s ease,
border-color 0.18s ease;
}
.view-procedures:disabled,
.view-procedures-Reactivate:disabled,
.view-procedures-Deactivate:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
.view-procedures:active:not(:disabled),
.view-procedures-Reactivate:active:not(:disabled),
.view-procedures-Deactivate:active:not(:disabled) {
transform: translateY(0) scale(0.96);
}
/* Subtle vertical separator between action-button groups */
.action-divider {
display: inline-block;
width: 2px;
height: 30px;
margin: 0 6px;
vertical-align: middle;
background: linear-gradient(
to bottom,
rgba(73, 150, 156, 0) 0%,
rgba(73, 150, 156, 0.28) 50%,
rgba(73, 150, 156, 0) 100%
);
border-radius: 1px;
flex-shrink: 0;
}
/* Default (View / Edit / Revise) — teal */
.view-procedures {
background: #e8f4f5;
color: #2c656a;
border-color: #c5e0e2;
}
.view-procedures:hover:not(:disabled) {
background: #49969C;
color: #fff;
border-color: #49969C;
transform: translateY(-1px);
box-shadow: 0 6px 14px -6px rgba(73, 150, 156, 0.55);
}
.prcode-tabing div#nav-tab {
border-bottom: none;
display: flex;
align-items: center;
column-gap: 7px;
margin-bottom: 20px;
}
/* .prcode-tabing button#nav-home-tab {
background: #ffffff;
border: none;
color: #fff;
border-bottom: solid 2px #0f8ce2;
background: #0f8ce2;
} */
.prcode-tabing .nav-tabs .nav-link.active {
background: #49969C;
color: #fff;
border-bottom: 2px solid #49969C;
}
.prcode-tabing .nav-tabs .nav-link {
/* border: solid 1px #cfecff; */
border-radius: 5px;
padding: 5px 18px;
font-size: 15px;
transition: 0.3s ease-in all;
border-radius: 5px;
color: #49969C;
background: #ffffff;
border: none;
border-bottom: solid 2px #49969C !important;
}
.prcode-tabing .nav-tabs .nav-link:hover {
background: #49969C;
color: #fff;
border-bottom: solid 2px #49969C !important;
border: none;
}
.custom-page-btn {
padding: 6px 14px;
font-size: 14px;
border-radius: 6px;
border: 1px solid #dcdcdc;
background-color: #f8f9fa;
color: #6c757d;
cursor: pointer;
transition: all 0.2s ease;
}
.custom-page-btn:hover:not(:disabled) {
background-color: #49969C;
color: #fff;
}
.custom-page-btn:disabled {
background-color: #f1f1f1;
color: #b5b5b5;
cursor: not-allowed;
border-color: #e0e0e0;
}
.pagenation-demo {
display: flex;
align-items: center;
column-gap: 0px;
}
.pagenation-demo ul {
padding: 0px;
margin: 0px;
display: flex;
align-items: center;
column-gap: 5px;
}
.pagenation-demo ul li {
list-style: none;
background: #49969c9e;
height: 35px;
width: 35px;
border-radius: 5px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
transition: 0.3s ease-in all;
cursor: pointer;
}
.pagenation-demo ul li:hover {
background: #49969C;
color: #fff;
}
.pagination-list {
display: flex;
list-style: none;
padding: 0;
}
.pagination-list li {
cursor: pointer;
margin: 0 5px;
padding: 6px 12px;
border-radius: 4px;
background: #eee;
}
.pagination-list li.active-page {
background: #49969C;
color: #fff;
}
.file-list {
margin-top: 10px;
}
.file-item {
display: flex;
justify-content: space-between;
background: #f5f5f5;
padding: 6px 10px;
margin-bottom: 5px;
border-radius: 4px;
}
.remove-btn {
background: none;
border: none;
color: red;
cursor: pointer;
}
.file-preview-list {
margin-top: 0px;
height: 125px;
width: 100%;
}
.file-preview-item {
position: relative;
margin-bottom: 10px;
padding: 0px 10px;
background: none;
border-radius: 6px;
height: 100%;
width: 100%;
border-radius: 5px;
}
.preview-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
}
.progress-bar {
height: 6px;
background: #ddd;
margin-top: 5px;
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: #0f8de3;
transition: width 0.3s;
}
.remove-btn {
position: absolute;
top: -3px;
right: 12px;
border: none;
background: transparent;
cursor: pointer;
background: #fe6565;
border-radius: 100%;
color: #fff;
width: 25px;
height: 25px;
display: flex;
justify-content: center;
align-items: center;
}
/* Overlay */
.rd-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
}
/* Modal Box */
.rd-modal-box {
width: 600px;
background: #fff;
border-radius: 16px;
overflow: hidden;
font-family: "Poppins", sans-serif;
animation: rdFade 0.3s ease;
}
/* Header */
.rd-modal-header {
background: #49969c42;
padding: 15px;
display: flex;
justify-content: space-between;
}
.rd-device-head {
display: flex;
gap: 15px;
}
.rd-device-icon {
width: 60px;
height: 60px;
background: #fff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
padding: 5px;
}
.rd-device-title h2 {
color: #262f40;
font-size: 17px;
font-weight: 600;
margin-bottom: 6px;
}
.rd-device-title p {
color: #525252;
font-size: 14px;
margin-bottom: 5px;
font-weight: 400;
}
/* Status */
.rd-status {
font-size: 12px;
padding: 4px 10px;
border-radius: 20px;
}
.rd-approved {
background: #dcfce7;
color: #16a34a;
}
/* Close */
.rd-close-btn {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
}
/* Body */
.rd-modal-body {
padding: 15px;
}
/* Grid */
.rd-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 20px;
}
.rd-info-item label {
padding: 0px 0px;
color: #525252;
font-size: 14px;
font-weight: 400;
}
.rd-info-item p {
color: #262f40;
font-size: 14px;
font-weight: 400;
line-height: 19px;
padding: 5px 0px;
margin-bottom: 0px;
}
/* Section */
.rd-section h4 {
margin-bottom: 10px;
}
.rd-section ul {
padding-left: 18px;
}
.rd-section li {
margin-bottom: 6px;
}
/* Footer */
.rd-modal-footer {
padding: 15px 20px;
border-top: 1px solid #e2e8f0;
text-align: right;
}
.rd-close-footer {
background: #f1f5f9;
border: none;
padding: 8px 18px;
border-radius: 8px;
cursor: pointer;
}
/* Animation */
@keyframes rdFade {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Responsive */
@media (max-width: 768px) {
.rd-modal-box {
width: 90%;
}
.rd-info-grid {
grid-template-columns: 1fr;
}
}
.rd-info-item {
position: relative;
padding-right: 20px;
}
/* Right border */
.rd-info-item::after {
content: "";
position: absolute;
top: 10%;
right: 0;
width: 1px;
height: 80%;
background: #e2e8f0;
}
.rd-info-item:nth-child(2n)::after {
display: none;
}
.rd-device-icon img {
width: 100%;
height: 100%;
border-radius: 5px;
object-fit: cover;
}
.rd-modal-box {
position: relative;
}
.rd-modal-box button {
position: absolute;
right: 8px;
background: #fff;
border: none;
border-radius: 100%;
top: 8px;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.pg-approved {
margin-right: 30px;
}
.custom-dropdown-select__value-container {
min-height: 41px;
flex-wrap: wrap;
overflow: visible !important;
padding: 2px 8px !important;
}
.custom-dropdown-select__value-container::-webkit-scrollbar {
display: none;
}
.custom-dropdown-select small {
font-size: 14px !important;
color: #ffc107;
padding-top: 10px;
}
.custom-dropdown-select__control {
border: solid 1px #cdcfd3;
}
.custom-dropdown-select__option {
display: flex !important;
align-items: center !important;
background: #cee2e5 !important;
margin: 10px 0px !important;
width: calc(100% - 20px) !important;
margin: 7px auto !important;
border-radius: 0px !important;
color: #2f777f !important;
font-size: 14px !important;
}
.custom-dropdown-select__option--is-selected {
background: #4d9ca1 !important;
color: #fff !important;
}
.custom-dropdown-select__option:hover {
background-color: #49969C !important;
color: #fff !important;
}
.filter-device {
width: 100%;
}
.custom-dropdown-select__menu {
/* position: relative; */
z-index: 9999 !important;
}
.custom-dropdown-select__option input[type="checkbox"] {
background: #71c1c5;
width: 20px;
height: 20px;
appearance: none;
}
.custom-dropdown-select__option input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 7px;
top: 4px;
width: 5px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.custom-dropdown-select__option input[type="checkbox"] {
border-radius: 5px;
}
.custom-dropdown-select__option input[type="checkbox"]:checked {
transform: scale(1.1);
}
.custom-dropdown-select__menu-list {
z-index: 9999 !important;
max-height: 200px;
overflow-y: auto;
}
/* Scrollbar width */
.custom-dropdown-select__menu-list::-webkit-scrollbar {
width: 6px;
}
/* Scrollbar track */
.custom-dropdown-select__menu-list::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
/* Scrollbar thumb */
.custom-dropdown-select__menu-list::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
/* Hover effect */
.custom-dropdown-select__menu-list::-webkit-scrollbar-thumb:hover {
background: #555;
}
.custom-dropdown-select__single-value {
font-size: 14px;
color: #87888a;
}
.custom-dropdown-select__placeholder {
font-size: 14px;
color: #87888a;
}
.custom-dropdown-select__menu {
overflow: hidden !important;
}
.document-text {
min-height: 70px;
width: calc(100% - 60px);
}
.upd-drag .upload-wrapper {
width: 70%;
padding: 15px;
margin: 0 auto;
}
.upd-drag {
margin-bottom: 30px;
}
.document-card.medical-license.pdf-converter .upload-wrapper {
width: 70%;
}
.upload-preview-image {
display: flex;
justify-content: start;
column-gap: 10px;
}
.preview-pdf {
display: flex;
flex-direction: column;
font-size: 12px;
row-gap: 10px;
}
.edit-btn {
position: absolute;
top: -3px;
right: 44px;
border: none;
cursor: pointer;
background: #49969C;
border-radius: 100%;
color: #fff;
width: 25px;
height: 25px;
display: flex;
justify-content: center;
align-items: center;
font-size: 13px;
}
.document-card.medical-license.pdf-converter .upload-preview-image {
display: flex;
gap: 20px;
flex-wrap: wrap;
height: 200px;
overflow: auto;
padding: 0px 10px;
}
.document-card.medical-license.pdf-converter .upload-preview-image .upload-wrapper {
width: calc(25% - 15px);
}
/* .single-image {
right: 0;
} */
.upload-wrapper.gvt-id .edit-btn {
right: 0px;
}
.upload-wrapper.medi-certif .edit-btn {
right: 32px;
}
.upload-wrapper.medi-certif button.remove-btn {
right: 0px;
}
/* Scrollbar width */
.document-card.medical-license.pdf-converter .upload-preview-image::-webkit-scrollbar {
width: 6px;
}
/* Track */
.document-card.medical-license.pdf-converter .upload-preview-image::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
/* Thumb */
.document-card.medical-license.pdf-converter .upload-preview-image::-webkit-scrollbar-thumb {
background: #49969c5c;
border-radius: 10px;
}
.custom-dropdown-select__control {
min-height: 43px;
height: auto;
border-radius: 6px !important;
}
.custom-dropdown-select__control:focus {
background: #ffffff;
border: solid 1px #49969C;
box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
.custom-dropdown-select__control.css-13cymwt-control:focus-visible {
box-shadow: none !important;
}
.custom-dropdown-select__control {
min-height: 41px;
max-height: 41px;
overflow: auto;
}
.pagination .text-muted {
font-size: 14px;
}
.button-action {
display: flex;
gap: 10px;
}
.body-wrist {
display: flex;
width: 100%;
justify-content: space-between;
column-gap: 10px;
}
.procedures-body {
width: 100%;
}
.no-device-founddetails {
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.no-device-founddetails p {
margin-bottom: 0px;
text-align: center;
}
.no-device-founddetails img {
max-width: 300px;
}
.no-device-founddetails p {
color: #6c7c93;
margin-bottom: 0px;
font-size: 16px;
}
/* Parent container fix */
.table-wrapper {
overflow: visible;
/* hidden hoga to cut karega */
padding: 1px;
/* thoda space de do */
}
.device-text-details h6 {
font-size: 16px;
font-weight: 600;
margin-bottom: 6px;
}
.vedty-data p {
padding: 0 0 8px;
color: #525252;
font-size: 14px;
font-weight: 400;
margin-bottom: 0px;
}
.vedty-data .device-procedures {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
padding-bottom: 6px;
min-height: 38px;
}
.vedty-data {
margin-bottom: 12px;
padding-bottom: 10px;
}
/* .clear-filters-btn {
margin-top: 29px;
} */
.vedty-data {
border-bottom: solid 1px #dddddd94;
}
.clear-filters-btn {
display: flex;
align-items: center;
column-gap: 15px;
margin-top: 29px;
}
.add-procedure .prcode-tabing div#nav-tab {
margin-bottom: 0px;
}
table.submission-table th span img {
max-width: 12px;
margin-bottom: 2px;
cursor: pointer;
}
.search-filters-data {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.search-procd {
position: relative;
}
.search-procd input {
background: #fff;
border-radius: 6px;
padding: 10px 10px;
color: #525252;
border: solid 1px #1f2b3e40;
font-size: 14px;
}
.search-procd input:focus {
background: #ffffff;
border: solid 1px #49969C;
}
.search-procd span {
position: absolute;
top: 11px;
right: 16px;
color: #49969C;
cursor: pointer;
}
.ftr-dash p {
margin-bottom: 0px;
color: #49969C;
font-size: 12px;
padding: 10px;
text-align: center;
}
button.clear-ftil {
background: #dbdbdb;
color: #5a6069;
border-color: #eff1f3;
}
.add-procedure.add-procedure-filters {
column-gap: 10px;
}
.recvery-timeline {
display: flex;
align-items: center;
width: 100%;
column-gap: 10px;
}
.recvery-timeline .css-b62m3t-container {
width: 100%;
}
.recvery-timeline .custom-dropdown-select--is-disabled.css-3iigni-container {
width: 100%;
}
.table-wrapper::-webkit-scrollbar {
width: 8px;
}
/* Track (background) */
.table-wrapper::-webkit-scrollbar-track {
background: #e6f2f3;
border-radius: 10px;
}
/* Thumb (scroll moving part) */
.table-wrapper::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #62A5AA, #49969C);
border-radius: 10px;
}
/* Hover effect */
.table-wrapper::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #49969c5c, #49969c5c);
}
/* dsggfdfsdfdghdghgh */
/* Stats Card */
.stat-card {
cursor: pointer;
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.stat-icon {
font-size: 22px;
}
.stat-subtext {
font-size: 12px;
color: #49969c;
}
/* Admin Card */
.admin-card {
transition: all 0.3s ease;
}
.active-badge {
background: #e6f7ee;
color: #00a86b;
padding: 5px 10px;
border-radius: 20px;
}
/* Button */
.btn-primary {
background: #007bff;
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 20px;
transition: 0.3s;
}
.btn-primary:hover {
background: #0056b3;
}
/* Activity */
.activity-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #eee;
}
.activity-item:hover {
background: #fafafa;
}
.activity-dot {
width: 8px;
height: 8px;
background: #007bff;
border-radius: 50%;
}
/* View All */
.view-all {
font-size: 12px;
color: #007bff;
cursor: pointer;
}
.titlehbd{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.bottomhgd{
display: flex;
justify-content: space-between;
align-items: end;
gap: 44px;
margin-top: 20px;
width: 100%;
}
.profile-verfication-card h6{
color: #49969c;
}
/*
.activity-list {
display: flex;
flex-direction: column;
}
.activity-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #e5e5e5;
}
.activity-item:last-child {
border-bottom: none;
}
.activity-text p {
font-size: 14px;
font-weight: 500;
margin: 0;
}
.activity-text small {
font-size: 12px;
}
.activity-dot {
width: 8px;
height: 8px;
background-color: #0d6efd;
border-radius: 50%;
}
.view-all {
color: #0d6efd;
font-size: 13px;
cursor: pointer;
margin-top: 10px;
}
.activity-item {
position: relative;
}
.activity-dot {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
} */
.activity-card {
padding: 20px;
}
.activity-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
}
/* .activity-list {
display: flex;
flex-direction: column;
} */
.activity-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 0;
/* border-bottom: 1px solid #eee; */
gap: 15px;
border: none;
}
.activity-item:last-child {
border-bottom: none;
}
.activity-content p {
margin: 0;
font-size: 14px;
font-weight: 500;
}
.activity-content{
display: flex;
flex-direction: column;
justify-content: center;
justify-items: flex-start;
align-items: flex-start;
}
.activity-content span {
font-size: 12px;
color: #888;
}
.activity-dot {
width: 8px;
height: 8px;
background-color: #49969c;
border-radius: 50%;
}
.activity-footer {
margin-top: 15px;
}
.activity-footer span {
font-size: 13px;
color: #0d6efd;
cursor: pointer;
}
.activity-card {
padding: 20px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: start;
}
.custom-select .custom-dropdown-select__control {
border: 1px solid #ccc;
}
.error-border .custom-dropdown-select__control {
border: 1px solid red !important;
box-shadow: none !important;
}
/* Approve / Reactivate — green */
.view-procedures-Reactivate {
background: #e6f6ec;
color: #15803d;
border-color: #bbe5c5;
}
.view-procedures-Reactivate:hover:not(:disabled) {
background: #198754;
color: #fff;
border-color: #198754;
transform: translateY(-1px);
box-shadow: 0 6px 14px -6px rgba(25, 135, 84, 0.55);
}
/* Reject / Deactivate / Delete / Close — red */
.view-procedures-Deactivate {
background: #fde8ea;
color: #b91c1c;
border-color: #f5c6cb;
}
.view-procedures-Deactivate:hover:not(:disabled) {
background: #dc3545;
color: #fff;
border-color: #dc3545;
transform: translateY(-1px);
box-shadow: 0 6px 14px -6px rgba(220, 53, 69, 0.55);
}
/* Action cell wrapper — consistent gap between the action buttons */
.submission-table tbody td > button + button,
.submission-table tbody td > .view-procedures + .view-procedures,
.submission-table tbody td > .view-procedures + .view-procedures-Reactivate,
.submission-table tbody td > .view-procedures + .view-procedures-Deactivate,
.submission-table tbody td > .view-procedures-Reactivate + .view-procedures,
.submission-table tbody td > .view-procedures-Reactivate + .view-procedures-Reactivate,
.submission-table tbody td > .view-procedures-Reactivate + .view-procedures-Deactivate,
.submission-table tbody td > .view-procedures-Deactivate + .view-procedures,
.submission-table tbody td > .view-procedures-Deactivate + .view-procedures-Reactivate,
.submission-table tbody td > .view-procedures-Deactivate + .view-procedures-Deactivate {
margin-left: 6px;
}
.tabletopheader{
display: flex;
justify-content: start;
align-items: start;
flex-direction: column;
gap: 5px;
}
.tabletopheader p{
font-size: 13px;
color: #7d7c7cc9;
}
.remark-remove{
display: flex;
justify-content: flex-end;
align-items: center;
justify-items: end;
gap: 5px;
}
.tabletopleft{
display: flex;
justify-content: center;
align-items: end;
gap: 10px;
}
/* =====================================================================
DASHBOARD — interactive & creative refresh
Brand palette: #49969C teal, #3A7E83 deep teal, #5BBAC2 light teal,
#F59E0B amber accent, #262f40 ink, #6c7c93 muted.
All new selectors are prefixed with .dash- to avoid collisions.
===================================================================== */
/* ---------- HERO ---------- */
.dash-hero {
position: relative;
border-radius: 24px;
padding: 28px 32px;
margin-bottom: 24px;
overflow: hidden;
color: #fff;
background: linear-gradient(135deg, #49969C 0%, #3A7E83 60%, #2c656a 100%);
box-shadow: 0 14px 30px -12px rgba(73, 150, 156, 0.45);
isolation: isolate;
}
.dash-hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.18), transparent 38%),
radial-gradient(circle at 12% 90%, rgba(255, 255, 255, 0.12), transparent 40%);
z-index: 0;
}
.dash-hero__bubbles {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.dash-hero__bubbles span {
position: absolute;
display: block;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
animation: dashFloat 9s ease-in-out infinite;
}
.dash-hero__bubbles span:nth-child(1) { width: 110px; height: 110px; top: -30px; right: 14%; animation-delay: 0s; }
.dash-hero__bubbles span:nth-child(2) { width: 60px; height: 60px; top: 50%; right: 6%; animation-delay: 1.5s; }
.dash-hero__bubbles span:nth-child(3) { width: 160px; height: 160px; bottom: -60px; right: -30px; animation-delay: 3s; background: rgba(255,255,255,0.05); }
@keyframes dashFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-14px); }
}
.dash-hero__content { position: relative; z-index: 1; max-width: 720px; }
.dash-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.4px;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.25);
padding: 6px 12px;
border-radius: 999px;
backdrop-filter: blur(6px);
}
.dash-hero__title {
font-size: 28px;
font-weight: 600;
margin: 14px 0 6px;
color: #fff;
letter-spacing: -0.4px;
}
.dash-hero__subtitle {
font-size: 14px;
opacity: 0.88;
margin-bottom: 20px;
}
.dash-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.dash-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
border: 1px solid transparent;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.dash-btn--primary {
background: #fff;
color: #2c656a;
box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.25);
}
.dash-btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.28);
}
.dash-btn--ghost {
background: rgba(255, 255, 255, 0.12);
color: #fff;
border-color: rgba(255, 255, 255, 0.35);
}
.dash-btn--ghost:hover {
background: rgba(255, 255, 255, 0.22);
transform: translateY(-2px);
}
.dash-pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background: #7CFAA8;
box-shadow: 0 0 0 0 rgba(124, 250, 168, 0.7);
animation: dashPulse 1.6s infinite;
display: inline-block;
}
@keyframes dashPulse {
0% { box-shadow: 0 0 0 0 rgba(124, 250, 168, 0.6); }
70% { box-shadow: 0 0 0 8px rgba(124, 250, 168, 0); }
100% { box-shadow: 0 0 0 0 rgba(124, 250, 168, 0); }
}
/* ---------- STAT CARDS ---------- */
.dash-stats-row { row-gap: 12px; }
.dash-stat {
--accent: #49969C;
--soft: #e8f4f5;
position: relative;
background: #fff;
border-radius: 20px;
padding: 20px 18px 18px;
box-shadow: 0 2px 7px 0 #0000001a;
transition: transform 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
border: 1px solid #f1f3f5;
}
.dash-stat::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--accent);
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.dash-stat::after {
content: "";
position: absolute;
width: 140px; height: 140px;
right: -50px; bottom: -50px;
background: var(--soft);
border-radius: 50%;
opacity: 0.7;
z-index: 0;
transition: transform 0.4s ease;
}
.dash-stat:hover {
transform: translateY(-4px);
box-shadow: 0 14px 28px -14px rgba(73, 150, 156, 0.4);
}
.dash-stat:hover::after { transform: scale(1.1); }
.dash-stat > * { position: relative; z-index: 1; }
.dash-stat__top {
display: flex;
align-items: center;
justify-content: space-between;
}
.dash-stat__icon {
width: 42px; height: 42px;
border-radius: 12px;
background: var(--soft);
color: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
}
.dash-stat__icon img,
.dash-stat__icon svg { width: 22px; height: 22px; }
.dash-stat__trend {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 999px;
}
.dash-stat__trend.up { color: #16a34a; background: #e6f4ea; }
.dash-stat__trend.down { color: #dc2626; background: #fde8e8; }
.dash-stat__label {
font-size: 13px;
color: #6c7c93;
margin: 4px 0 0;
font-weight: 500;
}
.dash-stat__bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
}
.dash-stat__value {
font-size: 30px;
font-weight: 700;
color: #262f40;
margin: 0;
letter-spacing: -0.5px;
line-height: 1;
}
/* Optional one-line breakdown shown under the headline value
(e.g. "3 patients · 4 doctors" on the Total Users card). */
.dash-stat__sub {
margin: 8px 0 0;
font-size: 12px;
color: #6c7c93;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dash-sparkline {
display: flex;
align-items: flex-end;
gap: 3px;
height: 38px;
width: 80px;
}
.dash-sparkline__bar {
flex: 1;
border-radius: 3px;
opacity: 0.85;
transform-origin: bottom;
animation: dashGrow 0.7s ease both;
}
@keyframes dashGrow {
from { transform: scaleY(0); opacity: 0; }
to { transform: scaleY(1); opacity: 0.85; }
}
.dash-stat__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 500;
color: var(--accent);
text-decoration: none;
margin-top: 6px;
transition: gap 0.2s ease;
}
.dash-stat__link:hover { gap: 10px; color: var(--accent); }
/* ---------- BLOCK / CARD WRAPPERS ---------- */
.dash-block {
display: block !important;
align-items: stretch !important;
border-left: none !important;
padding: 22px 22px !important;
cursor: default;
}
.dash-block__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
flex-wrap: wrap;
gap: 8px;
}
.dash-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 500;
color: #49969c !important;
text-decoration: none;
transition: gap 0.2s ease;
}
.dash-link:hover { gap: 8px; color: #3A7E83 !important; }
/* ---------- TABLE ROW HOVER ---------- */
.dash-table {
font-size: 12.5px;
table-layout: auto;
width: 100%;
}
.dash-table thead th {
font-size: 11px;
font-weight: 600;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.4px;
padding: 10px 12px;
white-space: nowrap;
background: #f8fafc;
}
.dash-table tbody td {
font-size: 12.5px;
padding: 10px 12px;
vertical-align: middle;
color: #1a2233;
}
.dash-table tbody td .status {
font-size: 10.5px;
padding: 3px 9px;
}
.dash-table tbody tr {
transition: background 0.2s ease, transform 0.2s ease;
}
.dash-table tbody tr:hover {
background: #f7fbfb;
}
/* Make the date column tighter so the status pill never gets pushed off-screen */
.dash-table .dash-table__date {
font-size: 11.5px;
color: #6c7c93;
white-space: nowrap;
}
.dash-cell-name {
display: inline-flex;
align-items: center;
gap: 8px;
max-width: 100%;
min-width: 0;
}
.dash-cell-name > span {
font-size: 12.5px;
font-weight: 500;
color: #1a2233;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.dash-avatar {
width: 28px; height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, #49969C, #5BBAC2);
color: #fff;
font-size: 11px;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
letter-spacing: 0.3px;
flex: 0 0 28px;
}
/* ---------- QUICK ACTIONS ---------- */
.dash-quick__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.dash-quick__tile {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 14px 12px;
border-radius: 14px;
border: 1px solid #eef1f3;
background: #fff;
color: #262f40;
font-size: 13px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.dash-quick__tile:hover {
transform: translateY(-2px);
border-color: #49969c;
background: #f4fafa;
box-shadow: 0 8px 18px -10px rgba(73, 150, 156, 0.45);
}
.dash-quick__icon {
width: 36px; height: 36px;
border-radius: 10px;
background: #e8f4f5;
color: #49969c;
display: inline-flex;
align-items: center;
justify-content: center;
}
.dash-quick__tile:hover .dash-quick__icon {
background: #49969c;
color: #fff;
}
.dash-quick__label {
font-size: 13px;
color: #262f40;
}
/* ---------- ACTIVITY FEED ---------- */
.dash-live {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
color: #16a34a;
}
.dash-live .dash-pulse {
background: #16a34a;
box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.6);
}
/* Allow activity rows to span the full card width even though the parent
.activity-card sets align-items: start */
.activity-card.dash-block > div { width: 100%; }
.dash-activity-list {
display: flex;
flex-direction: column;
position: relative;
margin: 6px 0 14px;
}
/* Subtle vertical timeline behind the dots */
.dash-activity-list::before {
content: "";
position: absolute;
left: 14px;
top: 18px;
bottom: 18px;
width: 2px;
background: linear-gradient(
to bottom,
rgba(73, 150, 156, 0.18) 0%,
rgba(73, 150, 156, 0.08) 80%,
transparent 100%
);
border-radius: 2px;
}
.dash-activity {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 10px;
border-radius: 10px;
border: none;
position: relative;
z-index: 1;
transition: background 0.2s ease, transform 0.2s ease;
}
.dash-activity:hover {
background: #f4fafa;
transform: translateX(2px);
}
/* Dot — base (teal). Variants override the color below. */
.dash-activity__dot {
flex: 0 0 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #49969c;
box-shadow: 0 0 0 4px rgba(73, 150, 156, 0.15);
margin-left: 4px;
}
.dash-activity--doctor .dash-activity__dot { background: #49969c; box-shadow: 0 0 0 4px rgba(73, 150, 156, 0.18); }
.dash-activity--procedure .dash-activity__dot { background: #5BBAC2; box-shadow: 0 0 0 4px rgba(91, 186, 194, 0.20); }
.dash-activity--user .dash-activity__dot { background: #16a34a; box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.18); }
.dash-activity--subscription .dash-activity__dot { background: #F59E0B; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.20); }
.dash-activity__text {
flex: 1 1 auto;
margin: 0;
font-size: 14px;
font-weight: 500;
color: #262f40;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dash-activity__time {
flex: 0 0 auto;
font-size: 12px;
color: #6c7c93;
font-weight: 500;
white-space: nowrap;
}
.dash-activity__viewall {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 4px;
font-size: 13px;
font-weight: 500;
}
/* =====================================================================
Themed CSS tooltip — applies to any element with [data-tooltip="…"].
Brand teal pill, white text, arrow underneath, fades in on hover/focus.
No JS, no extra dependency. Safe to use on