.dashboard-overview {
width: 100%;
min-height: 100dvh;
}
.dashboard-overview > section {
margin-bottom: 0.75rem;
}
.dashboard-overview > .title-container {
display: flex;
align-items: center;
gap: 1rem;
}
.dashboard-overview > .title-container > span {
font-size: 1rem;
}
.stats-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
gap: 1rem;
}
.stats-container > div,
.stats-container > .stats-item {
box-shadow: 0px 0px 18px 0px rgb(0 0 0 / 0.1),
0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.stats-item#wallet-total-box:hover {
cursor: pointer;
}
.stats-container > .stats-item {
background-color: white;
padding: 1rem;
border-radius: 4px;
}
.stats-container > .stats-item > h4 {
font-size: 1rem;
margin-bottom: 8px;
}
.stats-container > .stats-item > span {
font-size: 2rem;
}
.stats-container > button {
background-color: var(--themecolor);
font-size: 2.75rem;
font-weight: 600;
color: white;
padding-inline: 5rem;
}
.stats-container > .dc-tooltip {
grid-column: 1 / 4;
text-align: start;
background-color: #fff3cd;
}
.stats-container > .dc-tooltip > i,
.stats-container > .dc-tooltip > strong {
color: #664d03;
}
@media (max-width: 480px) {
.dashboard-overview {
padding-inline: 30px;
}
.dashboard-overview > .title-container {
flex-direction: column;
align-items: start;
gap: 0;
}
.stats-container {
grid-template-columns: 1fr 1.5fr 1.5fr;
}
.stats-container > .stats-item {
padding: 1rem 0.8rem;
text-align: center;
}
.stats-container > .stats-item > h4 {
font-size: 0.9rem;
margin-bottom: 8px;
}
.stats-container > button {
font-size: 1.5rem;
grid-column: 1 / 4;
padding-block: 6px;
}
.stats-container > .stats-item > span {
font-size: 1.45rem;
}
} .appointments-container {
display: grid;
grid-template-columns: 3fr 2fr;
gap: 1.2rem;
margin-top: 2.5rem;
height: 450px;
}
.appointments-container .title-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.appointments-container .title-container > div:first-child {
display: flex;
align-items: center;
gap: 0.5rem;
}
.appointments-container .title-container > button {
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.appointments-container .listing {
margin-top: 0.75rem;
padding: 1rem 0.5rem;
background: white;
overflow-y: auto;
max-height: 450px;
}
.appointments-container .listing > .telemedicine-item,
.appointments-container .listing > .appointment-item {
display: grid;
grid-template-columns: 1fr 5fr;
align-items: center;
border: 1px solid #eee;
border-radius: 4px;
margin-bottom: 0.5rem;
}
.appointments-container .listing > .telemedicine-item > div,
.appointments-container .listing > .appointment-item > div {
min-height: 100%;
padding: 0.5rem;
display: flex;
align-items: center;
}
.appointments-container .listing > .telemedicine-item > div:first-child,
.appointments-container .listing > .appointment-item > div:first-child {
border-right: 1px solid #eee;
justify-content: center;
color: #767676;
text-align: center;
text-wrap: nowrap;
}
.appointments-container .listing > .telemedicine-item > div:last-child,
.appointments-container .listing > .appointment-item > div:last-child {
justify-content: space-between;
font-size: 1rem;
}
.fc .fc-daygrid-day-top {
justify-content: right;
align-items: center;
padding-left: 6px;
gap: .2rem;
}
.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
display: none;
}
span.booking-count-badge {
background-color: #22c55e;
color: white;
font-weight: bold;
border-radius: 50%;
font-size: 11px;
line-height: 20px;
width: 20px;
}
.appointments-container .listing .badge {
border-radius: 50rem;
max-width: 6.5rem;
text-wrap: auto;
font-weight: 500;
display: inline-flex;
align-items: center;
}
.appointments-container .listing .badge.paciente-citamedica {
background-color: var(--themecolor);
}
.appointment-item > div:last-child > span {
display: inline-flex;
align-items: center;
margin-right: 4px;
justify-content: space-between;
width: 100%;
}
#appointment-detail-modal .dc-modalcontent > .modal-body,
#new-appointment-dashboard-modal .dc-modalcontent > .modal-body {
padding: 1rem;
}
#appointment-detail-modal .detail-sub {
display: flex;
flex-direction: column;
}
#appointment-detail-modal .detail-row {
display: grid;
grid-template-columns: 1.5fr 2fr;
gap: 4rem;
margin-bottom: 6px;
}
.appointment-item > div:last-child > span > span.badge {
font-weight: normal;
margin-left: 0.75rem;
}
#appointment-detail-modal .detail-btns {
display: flex;
flex-direction: column;
gap: 1rem;
padding-top: 0.75rem;
}
div#mob-date-container {
display: none;
}
#mob-date-select {
text-align: center;
color: #767676;
font-size: 1rem;
display: none;
}
.dashboard-appointments {
width: 100%;
}
.appointment-history > .title-container > .search-container > input {
width: 300px;
}
.appointment-history > .title-container > .search-container > button > i {
display: none;
}
.appointment-item .badge-container {
display: flex;
gap: 8px;
margin-right: 8px;
}
.tooltip-inner, .tooltip-arrow {
background-color: rgba(0, 0, 0, 0.75);
}
@media (max-width: 480px) {
.dashboard-overview .modal-dialog {
margin-right: 1.45rem;
}
.appointments-container {
display: flex;
flex-direction: column;
}
.appointments-container .title-container {
display: flex;
flex-direction: column;
align-items: start;
gap: 10px;
}
.appointments-container .title-container h3 {
font-size: 1.6rem;
}
.appointments-container .title-container > button {
min-width: 100%;
}
.appointments-container .listing > .appointment-item {
grid-template-columns: 1fr 3fr;
}
.appointments-container .listing > .appointment-item > div:last-child {
flex-direction: column;
gap: 10px;
padding-block: 12px;
align-items: start;
}
.appointments-container
.listing
> .appointment-item
> div:last-child
> span {
display: flex;
flex-direction: column;
align-items: start;
}
.appointments-container
.listing
> .appointment-item
> div:last-child
> span.free-slot {
display: none;
}
.appointments-container
.listing
> .appointment-item
> div:last-child
> span.used-slot {
margin-left: 6px;
gap: 6px;
}
.appointments-container
.listing
> .appointment-item
> div:last-child
> span
> span.badge {
margin: 0;
}
#appointments-date {
display: none;
}
.appointments-container .title-container div:first-child {
width: 100%;
}
#mob-date-select {
display: block;
background: transparent;
text-align: start;
}
.appointment-item button {
min-width: 100%;
align-self: center;
}
div#mob-date-container {
display: flex;
flex-direction: column;
width: 100%;
align-items: start;
gap: 0;
}
.dashboard-appointments {
padding-inline: 40px 30px;
}
.dashboard-appointments
> .appointments-container
.title-container
> div:first-child {
flex-direction: column;
gap: 0;
}
.appointment-history > .title-container {
flex-direction: column;
align-items: start;
}
.appointment-history > .title-container > .search-container {
width: 100%;
display: grid;
grid-template-columns: 5fr 1fr;
gap: 0.2rem;
}
.appointment-history > .title-container > .search-container > input {
width: auto;
}
.appointment-history > .title-container > .search-container > button {
min-width: fit-content;
}
#doctor-create-appointment {
background-color: var(--themecolor);
color: white;
}
#appointment-calendar-modal .dc-modalcontent.modal-content {
height: 70vh;
}
#appointment-calendar-modal #appointments-calendar {
height: 100%;
}
#appointment-calendar-modal .modal-body {
padding-inline: 0;
}
.appointment-item span[data-available="true"] {
display: none !important;
}
.appointment-item .badge-container {
flex-direction: row;
gap: 4px;
margin-right: 0;
}
} .card-list-container {
display: grid;
grid-template-columns: 3fr 2fr;
gap: 1.2rem;
margin-top: 2.5rem;
height: 450px;
}
.card-list-container .title-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.card-list-container .title-container > .filter-container,
.card-list-container .title-container > .search-container {
display: flex;
gap: 1rem;
}
.card-list-container .title-container > .search-container > input {
width: 300px;
}
.card-list-container .title-container > .search-container > button > i {
display: none;
}
.dashboard-clear.dc-btn[type="submit"], 
.dashboard-search.dc-btn[type="submit"] {
background: white;
}
.dashboard-clear.dc-btn[type="submit"]:hover,
.dashboard-search.dc-btn[type="submit"]:hover {
border-color: var(--themecolor);
background-color: var(--themecolor);
-webkit-box-shadow: 0 9px 20px 0 var(--shadowcolor);
box-shadow: 0 9px 20px 0 var(--shadowcolor);
}
.card-list-container .listing {
margin-top: 0.75rem;
padding: 1rem 0.5rem;
background: white;
overflow-y: auto;
max-height: 650px;
}
.card-list-container .listing > .item {
display: grid;
grid-template-columns: 1fr 5fr;
align-items: center;
border: 1px solid #eee;
border-radius: 4px;
margin-bottom: 0.5rem;
}
.card-list-container .listing > .item > div {
min-height: 100%;
padding: 0.5rem;
display: flex;
align-items: center;
}
.card-list-container .listing > .item > div:first-child {
border-right: 1px solid #eee;
justify-content: center;
color: #767676;
text-align: center;
text-wrap: nowrap;
}
.card-list-container .listing > .item > div:last-child {
justify-content: space-between;
font-size: 1rem;
}
.card-list-container .listing > .item .badge-container {
display: inline-flex;
gap: 8px;
margin-right: 8px;
}
.tooltip-inner, .tooltip-arrow {
background-color: rgba(0, 0, 0, 0.75);
}
.filter-form {
background: white;
padding: 1rem;
border-radius: 4px;
border: 1px solid #eee;
margin-top: 0.75rem;
margin-bottom: 2rem;
}
.filter-form .filter-item {
width: 100%;
max-width: 400px;
margin: 0 auto;
margin-bottom: 1rem;
}
.filter-form .filter-item label {
display: block;
margin-bottom: 0;
color: var(--terthemecolor);
font-weight: bold;
} .filter-form input, .filter-form select {
width: 100%;
}
.filter-form button {
width: 100%;
max-width: 400px;
margin: 0 auto;
display: block;
margin-top: 1.2rem;
}
#medical-test-request-detail-modal .dc-modalcontent > .modal-body {
padding: 1rem;
}
#medical-test-request-detail-modal .detail-sub {
display: flex;
flex-direction: column;
}
#medical-test-request-detail-modal .detail-row {
display: grid;
grid-template-columns: 1.5fr 2fr;
gap: 4rem;
margin-bottom: 6px;
}
@media (max-width: 480px) {
.dashboard-overview .modal-dialog {
margin-right: 1.45rem;
}
.card-list-container {
display: flex;
flex-direction: column;
}
.card-list-container .title-container {
display: flex;
flex-direction: column;
align-items: start;
gap: 10px;
}
.card-list-container .title-container h3 {
font-size: 1.6rem;
}
.card-list-container .title-container > button {
min-width: 100%;
}
.dc-btn.dashboard-search {
min-width: 70px;
}
.card-list-container .title-container > .search-container > input {
width: 100%;
}
.card-list-container .listing > .item {
grid-template-columns: 1fr 3fr;
}
.card-list-container .listing > .item > div:last-child {
flex-direction: column;
gap: 10px;
padding-block: 12px;
align-items: start;
}
.card-list-container
.listing
> .item
> div:last-child
> span {
display: flex;
flex-direction: column;
align-items: start;
}
.card-list-container
.listing
> .item
> div:last-child
> span.free-slot {
display: none;
}
.card-list-container
.listing
> .item
> div:last-child
> span.used-slot {
margin-left: 6px;
gap: 6px;
}
.card-list-container
.listing
> .item
> div:last-child
> span
> span.badge {
margin: 0;
}
.card-list-container .title-container div:first-child {
width: 100%;
}
.item button {
min-width: 100%;
align-self: center;
}
.dashboard-appointments {
padding-inline: 40px 30px;
}
.dashboard-appointments
> .appointments-container
.title-container
> div:first-child {
flex-direction: column;
gap: 0;
}
.medical-test-request-list > .title-container {
flex-direction: column;
align-items: start;
}
.medical-test-request-list > .title-container > .search-container {
width: 100%;
display: grid;
grid-template-columns: 5fr 1fr;
gap: 0.2rem;
}
.medical-test-request-list > .title-container > .search-container > input {
width: auto;
}
.medical-test-request-list > .title-container > .search-container > button {
min-width: fit-content;
}
.item .badge-container {
flex-direction: row;
gap: 4px;
margin-right: 0;
}
#advanced-search-request button.dashboard-search > i,
#advanced-search-request button.dashboard-search > span {
display: inline-block !important;
}
.card-list-container .title-container > .search-container {
width: 100%;
}
}