@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");

:root {
    --mkono-blue: #4D88D2;
    --mkono-blue-2: #396294;
    --color-yellow: #fde9a2;
}

body {
    font-family: 'Roboto', sans-serif;
    max-width: 100%;
}

main {
    min-height: 100vh; /* Full viewport height */
    display: flex;
    flex-direction: column;
    background-color: #EFF6FF;
}


.nav-link.active {
    color: #fff !important;
    background-color: var(--mkono-blue) !important;
}

.table-responsive {
    overflow-x: auto !important;
}

table.dt th, table.dt td {
    max-width: 200px !important; /* Adjust as needed */
    word-wrap: break-word;
}

.custom-pills .nav-link {
    font-weight: bold;
    color: #6c757d; /* Muted color */
    border-radius: 0; /* Remove rounded corners */
    border-bottom: none;
}

.custom-pills .nav-link.active {
    background-color: transparent;
    font-weight: bold;
    color: black;
    border-radius: 0; /* Remove rounded corners */
    border-bottom: 2px solid black; /* Black underline for active pill */
}

.custom-pills .nav-link:hover {
    color: black; /* Darker color on hover for both inactive and active pills */
}

.custom-btn{
    background-color: var(--mkono-blue);
    color: white;
}

.custom-btn:hover{
    background-color: #2980b9 !important;
    color: white;
}

.custom-btn-edit{
    background-color: rgb(240, 173, 78);
    color: white;
    width: 100%;
}

.custom-link{
    color: rgb(77, 136, 210);
    text-decoration: none;
}

.custom-width {
    flex-grow: 1;
    width: auto;
}


.content-wrapper {
    overflow-x: auto; /* Prevents content from pushing the layout */
}

.card-title-color{
    font-weight: 500;
    color: rgb(77, 136, 210);
}

/* Adjusting select2 height to match form-control */
.select2-container .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px); /* Match Bootstrap form-control height */
    padding: 0.375rem 0.75rem;            /* Match Bootstrap padding */
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    border: 1px solid #ced4da;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5rem; /* Vertically align text */
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.75rem + 2px); /* Match height of the select */
    top: 50%;                            /* Vertically align the arrow */
    transform: translateY(-50%);
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border-color: #ced4da;
}

/* Remove the default focus outline */
.select2-container--default .select2-selection--single:focus {
    outline: none;
    box-shadow: none;
    border-color: #80bdff; /* Match Bootstrap's focus border */
}

.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
    color: white;
    background-color: #3498db;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin: 5px 0 0 6px;
    padding: 0 6px;
  }

/* Change background color of selected options in select2 */
/* Change the background color of the selected options */
.select2-selection__choice {
    background-color: #3498db !important; /* Forces the background color */
    color: white !important;              /* Forces the text color for contrast */
    border: none !important;              /* Removes border if needed */
}

/* Optionally, change the background color when hovering over selected options */
.select2-selection__choice:hover {
    background-color: #2980b9 !important; /* A darker shade for hover */
}

.select2-selection__choice__remove {
    background-color: #3498db !important; /* Forces the background color */
    color: white !important;              /* Forces the text color for contrast */
    border: none !important;              /* Removes border if needed */
}

.select2-selection__choice__remove:hover {
    background-color: #2980b9 !important; /* A darker shade for hover */
}

.input-group > .intl-tel-input.allow-dropdown {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
}
  
.input-group > .intl-tel-input.allow-dropdown > .flag-container {
    z-index: 4;
}
  
.iti-flag {
    background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.6/img/flags.png");
}
  
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .iti-flag {
    background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.6/img/flags@2x.png");
    }
}

.intl-tel-input {
    display: block; /* Ensure the input takes up full width */
    width: 100%; /* Ensure the input respects form control width */
}

.intl-tel-input .form-control {
    width: 100%; /* Ensure the input remains responsive */
}

.menu-button {
    background-color: #e3f2fd;
    color: #000;
    border: none;
    border-radius: 30px;
    padding: 10px 20px;
    margin: 10px 0;
    font-size: 18px;
    width: 100%;
    text-align: center;
    text-decoration: none; /* Removes underline */
}
.menu-button:hover {
    background-color: #bbdefb;
}

.welcome-btn {
    color: #000;
    border: none;
    border-radius: 0.75rem;
    padding: 10px 20px;
    margin: 10px 0;
    font-size: 18px;
    width: 100%;
    text-align: center;
    text-decoration: none;
}

.button-sky-blue {
    background-color: #e3f2fd;
}

.button-blue {
    background-color: var(--mkono-blue);
}

.button-yellow {
    background-color: var(--color-yellow);
}

.hover-opacity:hover {
    opacity: 0.8;
}

.intl-tel-input .country-list {
    z-index: 3 !important; /* Ensure the dropdown appears above other elements */
}

.bottom-nav-container {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    height: 60px;
    width: 100%;
    border-top: 1px solid whitesmoke;
    z-index: 5;
    box-shadow: 0px -3px 14px -12px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px -3px 14px -12px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px -3px 14px -12px rgba(0,0,0,0.1);
}

.bottom-nav-container nav, .bottom-nav-container nav ul li {
    height: 100%;
}

.bottom-nav-container nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    height: 100%;
    width: 100%;
}

.bottom-nav-container ul li a {
    display: grid;
    grid-template-rows: auto;
    place-items: center;
    place-content: center;
    gap: 0.75rem;
    padding-top: 1rem;
    text-decoration: none;
    color: var(--mkono-blue);
    height: 100%;
}

@media screen and (min-width: 768px) {
    .bottom-nav-container {
        display: none; /* Hide on larger screens */
    }
}

.badge {
    font-size: 0.875rem !important;
    color: #fff !important;
}

.badge.color-blue {
    background-color: var(--mkono-blue-2);
}

.badge.bg-warning {
    background-color: #a87f03 !important;
}
.badge.bg-secondary {
    background-color: #474e53 !important;
}

.nav-item a {
    display: grid !important;
    grid-template-columns: 1fr 4fr !important;
    grid-template-rows: auto !important;
}
.med-status {
    font-weight: bold;
    font-size: 0.875rem;
    background-color: #a87f03;
}