@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
*{ padding: 0; margin: 0; box-sizing: border-box;}
body{padding:0px 0 0 0; margin: 0; font-family: "Inter", sans-serif;font-size: 16px; font-weight: normal; background: #fff;overflow: hidden !important; overflow-y:scroll!important; min-height: 100vh; color: var(--text-color);overflow:hidden; }
img{max-width: 100%;}
a,a:hover,a.active,a:active,a:focus{outline: none; text-decoration: none;}
a, a:hover, a:focus, a:active, a.active {outline: 0;-webkit-transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;-ms-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;transition: all .5s ease-in-out;text-decoration: none; cursor: pointer;}
.splash-screns {position: relative;min-height: 100vh;width: 100%;}
.splash-screns img.splash {object-fit: cover;width: 100%;height: 100%;position: absolute;z-index: 1;}
.splash-screns .container{position:relative; z-index: 2;  text-align:center}
.btn{max-width: fit-content;}
.btn-success{background: #7FB541; border-color: #7FB541}
.btn-primary{background: #1A2B68; border-color: #1A2B68}
.btn-primary:hover,.btn-primary:focus{background: #111E4D; border-color: #111E4D}
.login-text a{color: #7FB541}
.splash-screns h1{font-size: 50px; color: #fff; font-weight: 700;}
.brand img {width: auto !important;height: auto !important;position: relative;}
.max-w-100{max-width: 100%!important; text-align: center;}
.login-screns {min-height: 100vh;/*! overflow: scroll; */padding: 0;}
.login-bg {position: fixed;left: 0;top: 0;width: 50%;height: 100vh;max-width: 50%;min-width: 50%;}
.login-bg img {width: 100%;position: relative;height: 100%;object-fit:cover ;object-position: top;}
.login-forms {margin-left: 50%;width: 50%; padding: 4rem;}
.view-password {position: absolute;right: 1rem;top: 1rem;z-index: 1;}
.main-img {overflow: hidden;height: 100px;width: 100px;margin: 0 auto;border-radius: 50%;}
.main-img im g{width: 100%; height: 100%; object-fit: cover;}
.pro-images button {position: absolute;right: 15px;bottom: 10px;width: 24px;height: 24px;overflow: hidden;border: none;border-radius: 50%;display: flex;justify-content: center;align-items: center;}
.pro-images button input[type="file"] {opacity: 0;width: 100%;height: 100%;position: absolute;left: 0;top: 0;cursor: pointer;}
.pro-images {position: relative;width: 140px;margin: 0 auto;}
@media screen and (max-width: 992px) {
.splash-screns h1{font-size: 30px;}.splash-screns h1 br{display: none;}
.login-bg{display: flex;min-width: 100%; width: 100%; position: relative; height: 520px;order: 2}
.login-forms {margin-left: 0%;width: 100%}}
@media screen and (max-width: 680px) {
.login-forms{padding: 3rem 1.5rem}}
.sidebar {width: 300px;height: 100vh;background: #F0F2F9!important;position: fixed;top: 0;left: 0;padding-top: 0px;z-index: 1049;border-radius: 0 20px 20px 0; display: flex;flex-direction: column;overflow: hidden;}
.sidebar .offcanvas-body{height: 100vh;}
.sidebar a.nav-link {padding: 15px 20px;display: block;color: #333;text-decoration: none;}
.sidebar a.nav-link:hover,.sidebar a.nav-link:focus,.sidebar a.nav-link.active{background-color: #1a2b68;color: #fff;}
.dashboard-header {height: 60px;background: #0d6efd;color: white;display: flex;align-items: center;justify-content: space-between;padding: 0 20px;position: fixed;top: 0;left: 0;width: 100%;z-index: 1050;}
.main-content {margin-top: 0px;padding:0 20px 20px;}
@media (min-width: 992px) {.main-content {  margin-left: 300px;}.sidebar {  transform: none !important;  visibility: visible !important;}.offcanvas-backdrop {  display: none !important;}}
@media screen and (max-width: 992px) {.main-content{padding: 0 0 2rem 0;}.sidebar{width: 300px!important}}
.inside-header {padding: 1rem;border: 1px solid #bebeda;border-radius: 0 0px 20px 20px;border-top: none;background: #fff;}
.inside-header h4{color: #1A2B68; font-weight: 700; text-transform: uppercase;}  .profile-pic {    width: 40px;    height: 40px;    object-fit: cover;    border-radius: 50%;  }
@media screen and (max-width: 680px) {.fc-header-toolbar.fc-toolbar.fc-toolbar-ltr {flex-direction: column;gap: 1rem;}}
.login-forms h4 { font-weight: 700;}

.modal-backdrop.show{background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(20px);opacity: 1}

.inside-navs {list-style: none;margin: 0;padding: 0;display: flex;flex-direction: column;gap: 1rem;}
.inside-navs li{display: flex;width: 100%}
.inside-navs li a {color: #000;width: 100%; display: flex;padding: 15px 35px;border-radius: 70px;border:1px solid transparent;white-space: nowrap;}
.inside-navs li.active a,.inside-navs li a:hover {border: 1px solid #bebeda;color: #1a2b68;}
.border {border-color: #bebeda !important;}
@media screen and (max-width: 992px) {
.select-menus{border: none!important}
}
/* .pro-imgs {width: 180px;height: 180px;overflow: hidden;box-shadow: 0 10px 15px rgba(0,0,0,0.15);border-radius: 100%;padding: 15px;min-width: 180px;}
.pro-imgs div {border-radius: 100%;overflow: hidden;width: 150px;height: 150px;}
.pro-imgs div img {width: 100%;height: 100%;object-fit: cover;} */
.pro-imgs {
    width: 210px;
    height: 210px;
    overflow: hidden;
    box-shadow: 0 10px 15px rgba(0,0,0,0.15);
    border-radius: 50%;
    padding: 5px; /* reduced from 15px */
    min-width: 210px;
}

.pro-imgs div {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
}

.pro-imgs div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.btn-upload {position: relative;}
.btn-upload input {position: absolute;left: 0;top: 0;opacity: 0;cursor: pointer;width: 100%; height: 100%;}
.btns-width .btn {max-width: 190px;}
.select-menus.sticky-top {top: 123px;z-index: 1;}
.form-control{padding: .75rem; border-color:#bebeda}.form-select{padding-top: .75rem;padding-bottom: .75rem; border-color:#bebeda}
@media screen and (max-width: 1080px) {.container{max-width: 100%}}
@media screen and (max-width: 680px) {
.pro-imgs{margin: 0 auto;}
.btns-width .btn {max-width: 100%;}
}
.titles {color: #7FB541;font-size: 18px;font-weight: 600;}
.roles {list-style: square;margin: 0;/* padding: 0; */display: flex;gap: 1rem;flex-wrap: wrap;padding-left: 1rem;column-gap: 6rem;}
.time-slots {margin: 0;padding: 0;list-style: none;display: flex;gap: 1.5rem;}
.time-slots li:first-child {color: #BA1717;}
.time-slots li:last-child {color: #7FB541;}
.time-slots li {display: flex;gap: 10px;align-items: center;}
.red-tick-circle {display: flex;width: 7px;height: 7px;border-radius: 50%;background: #BA1717;}
.green-tick-circle{ display: flex;width: 7px;height: 7px;border-radius: 50%;background: #7FB541;}
.text-danger{color:#BA1717!important }
.text-success{color: #7FB541!important}
.text-primary{color: #1A2B68!important}
.times-slots1 li {float: none;flex: 0 0 50%;max-width: 50%;}
.roles.times-slots1 {gap: 0;}
.roles.times-slots1 li {margin-bottom: 1rem;}
body,body.modal-open {padding: 0 !important;}
.modal {padding-right: 0 !important;}
table thead th {background: #7FB541 !important;color: #fff;padding: .75rem !important;}

.grid-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 2 columns */
  gap: 1.5rem; /* spacing between items */
  list-style: none;
  padding: 0;
}


.grid-list li:nth-child(4n + 1) {
  background-color: #F0F8FF;border: 1px solid #C0E1FF;
}
.grid-list li:nth-child(4n + 2) {
  background-color: #FCFAF1;border: 1px solid #FFF1A9;
}
.grid-list li:nth-child(4n + 3) {
  background-color: #F0F9F2;border: 1px solid #D6FFB7;
}
.grid-list li:nth-child(4n + 4) {
  background-color: #F9F2F2;border: 1px solid #FFC3C3;
}

.grid-list li {
  padding: 20px;
  border-radius: 8px;
}
.grid-list1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 2 columns */
  gap: 1.5rem; /* spacing between items */
  list-style: none;
  padding: 0;
}

.grid-list1 li {
  padding: 20px;
  border-radius: 8px;border: 1px solid #D9D9D9; background: #F4F4F4;
}

@media screen and (max-width: 1080px) {
.grid-list,.grid-list1 {
grid-template-columns: repeat(2, 1fr); /* 2 columns */
}
}
@media screen and (max-width: 992px) {
.grid-list,.grid-list1 {
grid-template-columns: repeat(2, 1fr); /* 2 columns */
}
}
@media screen and (max-width: 680px) {
.grid-list,.grid-list1 {
grid-template-columns: repeat(1, 1fr); /* 2 columns */
}
}

.cards-times {
  line-height: normal;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cards-times li {
  padding: .25rem .75rem;
  border: none;
  color: #202020;
  font-size: 12px;
  border-radius: 36px;border: none!important;
}
.grid-list li:nth-child(4n + 1) .cards-times li {background: #C0E1FF;border: none!important;}
.grid-list li:nth-child(4n + 2) .cards-times li {background: #FFF1A9;}
.grid-list li:nth-child(4n + 3) .cards-times li {background: #D6FFB7;}
.grid-list li:nth-child(4n + 4) .cards-times li {background: #FFC3C3;}
.grid-list1 li .cards-times li {background: #D9D9D9;border: none!important;}
.grid-list1 li h5 a, .grid-list1 div,.grid-list1 .btn{opacity: 0.75;cursor: not-allowed;}
.bg-none{background: none!important}


button.nav-link {
  background: #E6E6E6;
  font-size: 18px;
  color: #000;
  padding: .75rem 1.5rem;
}
button.nav-link.active {
  background: #7FB541 !important;
}

.view-calendaricon {
  position: absolute;
  right: 1rem;
  top: 47px;
  z-index: 2;
}
.btn-secondary {
  background: #202020;
  border-color: #202020;
}
.gj-datepicker .btn{min-width: 2.5rem; display: flex; justify-content: center; align-items: center;}
.gj-datepicker-bootstrap button[role="right-icon"] .gj-icon, .gj-datepicker-bootstrap button[role="right-icon"] .material-icons{position: relative;top: 0; left: 0}
#g-calendar iframe {
  width: 100%;
  height: 100vh;
}
.squaresicons {
  width: 7px;
  height: 7px;
  background: #C5C5C5;
}
.dt-column-title {
	color: #fff;
}

.box-border {
	border: 1px solid #bebeda;
	padding: 1rem;
	border-radius: 20px;
}

.editFormrow{margin:0 -15px; display:flex; flex-wrap:wrap;}
.editFormcol{margin:0 0px;flex:0 0 50%; max-width:50%; padding:0 15px; margin-bottom:1.5rem;}

/* Make calendar container scrollable on small screens */
#calendar {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
}

/* Ensure inner table shrinks properly */
#calendar table {
  width: 100%;
  table-layout: fixed;   /* prevents table from stretching oddly */
  border-collapse: collapse;
}

/* Make cells adapt */
#calendar th,
#calendar td {
  font-size: 14px;
  padding: 8px 4px;
  text-align: center;
  word-wrap: break-word;
}

/* On very small screens stack day names vertically */
@media (max-width: 600px) {
  #calendar th,
  #calendar td {
    font-size: 12px;
    padding: 6px 2px;
  }
}

/* If using FullCalendar specifically */
.fc {
  max-width: 100%;
}
.fc-scroller {
  overflow-x: auto !important;
}

.fc .fc-col-header-cell{
  border: 0px solid #fff !important;
}

.dates {
	white-space: nowrap;
}

@media (max-width: 1440px) {
.grid-list {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width:992px) {
.grid-list {grid-template-columns: repeat(1, 1fr);}
}
@media (max-width: 680px) {
.grid-list {grid-template-columns: repeat(1, 1fr);}
}