html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
    background-color: #ffffff;
    color: #000000;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 30px;
    background: #01124A;
    color: #ffffff;
    height: 60px;
}

.logo img {
    height: 76px;
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-links li {
    margin-left: 20px;
    position: relative;
}

.nav-links li a {
    text-decoration: none;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 200;
    transition: color 0.3s ease;
}

.nav-links li a.active {
    font-weight: 500; 
}

.nav-links li a.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 1px;
    background-color: #ffffff;
}

.user-account-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #ffffff;
}

.user-account-icon {
    width: 32px;
    height: 32px;
    background-color: #D9D9D9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #01124A;
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
}

.user-account-text {
    display: none; /* Hidden by default */
    margin-left: 0;
}

.menu-toggle {
    display: none; /* Hidden by default on larger screens */
    font-size: 24px;
    background-color: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
}

.home-container {
    text-align: center;
    padding: 20px;
    background-color: #ffffff; 
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
}

.main-title {
    font-size: 24px;
    font-weight: 500;
    color: #000000;
    margin-bottom: 5px;
    box-sizing: border-box;
    word-wrap: break-word;
}

.sub-title {
    font-size: 20px;
    font-weight: 500;
    color: #00124F; 
    margin-bottom: 60px;
    box-sizing: border-box;
    word-wrap: break-word;
}

.cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
    gap: 10px; /* Adds space between the cards */
}

.card {
    width: 225px;
    height: 225px;
    margin: 5px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    background-color: #d8e1f0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.card span {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    padding: 10px;
    background: linear-gradient(180deg, rgba(0, 18, 79, 0) 0%, rgba(0, 18, 79, 0.8) 65%);
    font-size: 25px;
    font-weight: 400;
    text-align: left;
    text-underline-position: from-font;
}

.card:hover span {
    background: linear-gradient(180deg, rgba(0, 18, 79, 0) 0%, rgba(0, 18, 79, 0.9) 65%);
}

.card a {
    display: block;
    width: 100%;
    padding: 10px 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}

.card:hover a {
    background-color: rgba(0, 0, 0, 0.9);
}

.search-and-notification {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.search-and-notification input[type="text"] {
    padding: 5px 10px;
    border-radius: 20px;
    border: none;
    outline: none;
    margin-right: 10px;
}

.notification-bell {
    background-color: transparent;
    border: none;
    font-size: 20px;
    color: #ffffff;
    cursor: pointer;
}

.auth-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
}

.auth-box {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 10px;
    width: 350px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    margin-bottom: 30px;
    color: #3D3D3D;
}

.auth-box .form-group {
    gap: 15px;
    margin-bottom: 15px;
}


.auth-box h2 {
    color: #3D3D3D;
    text-align: center;
    margin-bottom: 15px;
}

.form-group {
    display: flex;
    flex-wrap: wrap;
    gap: 40px; 
    margin-bottom: 20px;
}

.form-field {
    flex: 0 0 calc(50% - 20px);
    min-width: 200px;
    max-width: calc(50% - 20px); 
}

/* Ensure the last field doesn't stretch full width when alone */
.form-field:last-child:nth-child(odd) {
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px);
}

.form-group-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    color: #3D3D3D;
}

.form-group-checkbox input[type="checkbox"] {
    margin-right: 10px;
}

.form-group-checkbox label {
    font-size: 0.9rem;
    line-height: 1.2;
}

.form-group-checkbox label a {
    display: inline;  /* Ensure the anchor is inline */
    color: #418FDE;
    text-decoration: none;
    margin-left: 5px;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    vertical-align: baseline;
}

.form-group-checkbox label a:hover {
    text-decoration: underline;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #3D3D3D;
    font-size: 14px;
}

.form-group label::after {
    color: #1A73E8;
    margin-left: 2px;
    font-size: 0.5em;
    vertical-align: super;
}

.required-asterisk {
    color: #1A73E8;
    margin-left: 2px;
}

.form-group-inline {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 15px;
}

.form-group-inline label {
    order: 2;
    margin-left: 10px;
    font-weight: normal;
    color: #000000;
}
.form-group label span {
    margin-right: 10px;
    font-size: 1.2rem;
}

.form-group-inline input[type="checkbox"] {
    order: 1;
    margin: 0;
    width: 16px;
    height: 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid #CACACA;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    position: relative;
}

.form-group-inline input[type="checkbox"]:checked {
    background-color: #CACACA;
}

.form-group-inline input[type="checkbox"]:checked::after {
    content: '\2714';
    font-size: 14px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.form-group-inline input[type="checkbox"]:hover {
    border-color: #CACACA;
}

.form-group input,
.form-group textarea {
    padding: 8px 12px;
    border: 1px solid #CDCDCD;
    border-radius: 5px;
    font-size: 14px;
    background-color: #ffffff;
    color: #3D3D3D;
    width: 100%;
    box-sizing: border-box;
}

.form-group select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #CDCDCD;
    border-radius: 5px;
    font-size: 14px;
    background-color: #ffffff;
    color: #3D3D3D;
    appearance: none; /* Removes the default browser styling for select elements */
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%204%205%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M2%200L0%202h4zm0%205L0%203h4z%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    background-size: 12px auto;
    width: 100%;
    box-sizing: border-box;
}

.form-group select option {
    background-color: #ffffff;
    color: #000000;
}

.form-group select option:checked {
    background-color: #1A73E8;
    color: #ffffff;
}

/* Update Select2 Autocomplete Styling */
.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    height: 38px !important;
    padding: 4px 12px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #000000 !important;
    font-size: 14px !important;
    line-height: 2 !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #505050 !important;
    font-size: 14px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    right: 6px !important;
}

.select2-dropdown {
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
}

.select2-search--dropdown {
    padding: 8px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    padding: 8px 12px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    color: #000000 !important;
}

.select2-results__option {
    padding: 8px 12px !important;
    font-size: 14px !important;
    color: #000000 !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #1A73E8 !important;
    color: #ffffff !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #e8f0fe !important;
    color: #000000 !important;
}

/* Remove conflicting styles */
.form-group .select2-container--default .select2-selection--single {
    background-image: none !important;
}

/* Remove dropdown arrow for anesthesiologist select across all browsers */
#id_anestesistas_responsaveis {
    /* Remove default arrow */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* Remove background image (if any) */
    background-image: none !important;
    
    /* Adjust padding and add a custom background color */
    padding-right: 10px;
    background-color: #ffffff;
    
    /* Other styles */
    color: #000000;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
}

/* Hide arrow in IE10 and IE11 */
#id_anestesistas_responsaveis::-ms-expand {
    display: none;
}

/* Hide arrow in Firefox */
#id_anestesistas_responsaveis {
    text-indent: 0.01px;
    text-overflow: '';
}

/* Hide arrow in Chrome and Safari */
#id_anestesistas_responsaveis::-webkit-select-placeholder {
    color: transparent;
}

/* Ensure no dropdown arrow for anesthesiologist select */
#id_anestesistas_responsaveis {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    padding-right: 10px; /* Adjust padding as needed */
}

/* Style for dropdown options */
#id_anestesistas_responsaveis option {
    background-color: #ffffff;
    color: #000000;
}

#id_anestesistas_responsaveis option:checked {
    background-color: #418FDE;
    color: #ffffff;
}

#id_anestesistas_responsaveis option:hover {
    background-color: #f0f0f0;
}

#add-anesthesiologist {
    background-color: #1A73E8;
    color: #ffffff;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s;
    align-self: flex-start;
    width: auto;
}

#add-anesthesiologist:hover {
    background-color: #2c659e;
}

/* Style for the selected anesthesiologist container */
.selected-anesthesiologist {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    font-size: 12px; /* Smaller font size for the name */
}

/* Style for the remove button */
.remove-anesthesiologist {
    background-color: #dc3545;
    color: #ffffff;
    border: none;
    padding: 2px 3px;
    border-radius: 3px;
    font-size: 10px; /* Smaller font size for the button */
    cursor: pointer;
    margin-left: 5px;
    transition: background-color 0.3s;
}

.remove-anesthesiologist:hover {
    background-color: #c82333;
}

.auth-box a {
    color: #418FDE;
    text-align: right;
    display: block;
    margin-bottom: 10px;
    font-size: 0.9rem;
    text-decoration: none;
}

.auth-box .form-group > a {
    color: #418FDE;
    text-align: right;
    display: block;
    margin-bottom: 10px;
    font-size: 0.9rem;
    text-decoration: none;
}

.auth-button {
    width: 100%;
    background-color: #418FDE;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    padding: 10px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
}

.auth-button:hover {
    background-color: #2c659e;
}

hr {
    border: none;
    border-top: 1px solid #333;
    width: 80%;
    margin: 20px 0;
}

.error-message {
    color: #ff4d4d;
    font-size: 0.9rem;
    margin-top: 5px;
    text-align: left;
}

.footer {
    text-align: center;
    padding: 10px;
    background-color: #101820;
    color: #ffffff;
    width: 100%;
    margin-top: auto; /* This pushes the footer to the bottom */
}



.profile-container {
    margin-left: 30px;
    margin-right: 30px;
    max-width: 600px;
}

.profile-container h1 {
    color: #418FDE;
    margin-bottom: 20px;
}

.profile-container p {
    margin-bottom: 15px;
}

.validation-status {
    font-weight: bold;
    padding: 10px;
    border-radius: 5px;
}

.validation-status.validated {
    background-color: #33B679;
    color: white;
}

.validation-status.not-validated {
    background-color: #f44336;
    color: white;
}

.logout-button {
    background-color: #418FDE;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-top: 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.logout-button:hover {
    background-color: #2c659e;
}



.not-validated-container {
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    background-color: #222;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    color: #ffffff;
}

.not-validated-container h1 {
    color: #418FDE;
    margin-bottom: 20px;
}

.not-validated-container p {
    margin-bottom: 15px;
    line-height: 1.6;
}

.redirect-message {
    font-style: italic;
    color: #888;
}

.loader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #418FDE;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}


/* Add this to your existing style.css file */

.cadastro-container {
    padding: 20px 30px;
    max-width: 100%;
    margin: 0;
}

.tab-container {
    display: inline-flex; 
    max-width: 600px;
    align-items: center;
    width: auto;
    max-width: 100%;
    height: 36px;
    background-color: #ECEFF5;
    border-radius: 5px;
    overflow: hidden;
    padding: 2px;
    margin-bottom: 20px;
    margin-left: 0;
}

.tab-button {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    color: #505050;
    transition: background-color 0.3s, color 0.3s;
    border-radius: 3px;
    border: none;
    background-color: transparent;
    font-size: 16px;
    padding: 0 10px;
    white-space: nowrap;
}

.tab-button:hover,
.tab-button.active {
    background-color: #FFFFFF;
    color: #1A73E8;
    box-shadow: 0 0 0 2px #ECEFF5;
}

.tab-button:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.3);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.members-container {
    padding: 20px 30px;
    max-width: 100%;
    margin: 0;
    position: relative;
    padding-bottom: 80px;
}

.member-list {
    list-style-type: none;
    padding: 0;
}

.member-list li {
    background-color: #222;
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.member-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 20px;
    background-color: #ffffff;
    color: #3D3D3D;
    border-radius: 12.96px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    padding-bottom: 80px;
    font-size: 14px;
}

.member-table .header-row {
    background-color: #ECEFF5;
    height: 40px; /* Adjust this value to control the height of the header background */
}

.member-table thead {
    background-color: transparent;
}

.member-table th {
    padding: 10px 15px;
    text-align: left;
    color: #3D3D3D;
    position: relative;
    background-color: transparent;
}

.member-table th::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 10px;
    background-color: #ECEFF5;
    z-index: -1;
}

.member-table th:first-child {
    border-top-left-radius: 12.96px;
}

.member-table th:last-child {
    border-top-right-radius: 12.96px;
}

.member-table th:first-child::before {
    border-top-left-radius: 12.96px;
    border-bottom-left-radius: 12.96px;
}

.member-table th:last-child::before {
    border-top-right-radius: 12.96px;
    border-bottom-right-radius: 12.96px;
}

.member-table td {
    padding: 15px;
    text-align: left;
    vertical-align: middle;
    border-bottom: none;
}

/* Remove bottom border from the last tbody row's cells */
.member-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Remove top border from the tfoot row's cells */
.member-table tfoot td {
    border-top: none !important;
}

/* Optional: Ensure no borders on the tfoot row */
.member-table tfoot tr {
    border-top: none !important;
    border-bottom: none !important;
}

.member-table {
    border-bottom: none !important;
}

.member-table tbody tr:hover {
    background-color: #f5f5f5;
}

/* Style for the "Ações" dropdown */
.actions-dropdown {
    position: relative;
    display: inline-block;
}

.actions-button {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.actions-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 5px;
}

.actions-content a {
    color: #3D3D3D;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.actions-content a:hover {
    background-color: #f1f1f1;
}

.actions-dropdown:hover .actions-content {
    display: block;
}

.new-registration-button {
    background-color: #1A73E8;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    position: absolute;
    bottom: 20px;
    right: 20px;
    transition: background-color 0.3s;
}

.new-registration-button:hover {
    background-color: #1557b0;
}

.edit-button {
    background-color: #418FDE;
    color: #ffffff;
    text-decoration: none;
    padding: 20px 25px; /* Increased padding for the edit button */
    border-radius: 3px;
    transition: background-color 0.3s;
}

.edit-button:hover {
    background-color: #2c659e;
}


.edit-button, .delete-button {
    padding: 10px 15px; /* Padding adjusted for better fit */
    border-radius: 3px;
    transition: background-color 0.3s;
    white-space: nowrap; /* Ensures button text does not wrap */
}

.edit-button {
    background-color: #418FDE;
    color: #ffffff;
    text-decoration: none;
}

.edit-button:hover {
    background-color: #2c659e;
}


.delete-button {
    background-color: #dc3545;
    color: #ffffff;
    text-decoration: none;
}

.delete-button:hover {
    background-color: #c82333;
}

.form-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.form-row input,
.form-row select {
    flex-grow: 1;
    margin-right: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #1c2630;
    color: #ffffff;
}

.form-row input:last-child,
.form-row select:last-child {
    margin-right: 0;
}

.form-row input::placeholder,
.form-row select::placeholder {
    color: #a0a0a0;
}

.cadastrar-btn {
    background-color: #1A73E8;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
    float: right;
    margin-top: 20px;
}

.cadastrar-btn:hover {
    background-color: #1557b0;
}

/* Styling for select dropdowns */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    background-size: 20px auto;
    padding-right: 30px;
}

.button-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.button-group .cadastrar-btn {
    width: 100%;
    text-align: center;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    box-sizing: border-box; /* This ensures padding is included in the width */
}

.save-btn {
    background-color: #418FDE;
    color: #ffffff;
}

.save-btn:hover {
    background-color: #2c659e;
}

.cancel-btn {
    background-color: #dc3545;
    color: #ffffff;
    text-decoration: none;
    display: block; /* Changed from inline-block to block */
}

.cancel-btn:hover {
    background-color: #c82333;
}


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



/* Media Query for Mobile Devices */
@media (max-width: 768px) {

    .home-container {
        overflow-x: hidden;
        padding: 20px 10px;
        box-sizing: border-box;
    }

    .logo img {
        height: 100px; /* Reduce logo size on mobile */
    }

    .nav-links {
        display: none; /* Hide the links by default */
        flex-direction: column; /* Stack the links vertically */
        position: absolute;
        top: 100px;
        left: 0;
        width: 100%;
        background-color: #01124A;
        z-index: 1001;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        margin: 0;
        width: 100%;
    }

    .nav-links li a {
        display: block;
        padding: 15px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-links li:last-child a {
        border-bottom: none;
    }

    .user-account-icon {
        display: none;
    }

    .user-account-text {
        display: block;
    }

    .menu-toggle {
        display: block; /* Show the hamburger icon on small screens */
    }

    .cards {
        justify-content: flex-start; 
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 20px 0; 
        padding-left: 0;
        padding-right: 0;
        -webkit-overflow-scrolling: touch; 
        scrollbar-width: none;
        -ms-overflow-style: none;
        box-sizing: border-box;
    }

    /* Hide scrollbar for Webkit browsers */
    .cards::-webkit-scrollbar {
        display: none;
    }

    .card {
        flex: 0 0 auto;
        margin-right: 10px;
        width: 180px;
        height: 180px;
    }

    /* Remove right margin from the last card */
    .card:last-child {
        margin-right: 20px; /* This creates some space after the last card */
    }

    .form-group {
        flex-direction: column;
        gap: 15px;
    }

    .form-field {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 100%;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .form-row {
        flex-direction: column;
    }

    .form-row input,
    .form-row select {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .tab-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius: 0;
        overflow: visible;
        padding: 0;
        margin-bottom: 20px;
    }

    .tab-button {
        flex: none;
        width: 100%;
        height: 36px;
        margin-bottom: 10px;
        border-radius: 5px;
        background-color: #ECEFF5;
    }

    .tab-button:last-child {
        margin-bottom: 0;
    }

    .tab-button:hover,
    .tab-button.active {
        background-color: #FFFFFF;
        color: #1A73E8;
        box-shadow: 0 0 0 2px #ECEFF5;
    }

    .member-list li {
        flex-direction: column;
        align-items: flex-start;
    }

    .edit-button {
        margin-top: 10px;
    }

    /* Hide the mini-calendar and sidebar */
    .calendar-sidebar {
        display: none;
    }

    .calendar-main {
        width: 100%;
        overflow-x: auto; /* Allow horizontal scrolling for the main calendar */
    }

    /* Set fixed width for week view columns and allow horizontal scrolling */
    .calendar-grid.week-view {
        grid-template-columns: auto repeat(7, 120px); /* Adjust the width as needed */
        overflow-x: auto;
    }

    /* Set fixed width for month view columns */
    .calendar-grid.month-view {
        grid-template-columns: repeat(7, 120px); /* Adjust the width as needed */
        overflow-x: auto;
    }

    /* Adjust calendar days headers */
    .calendar-days {
        grid-template-columns: repeat(7, 120px); /* Match the column widths */
    }

    /* Prevent event cards from expanding columns */
    .procedure-card {
        max-width: 100%;
        overflow: hidden;
    }

    .procedure-card span {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Stack sub-controls vertically */
    .sub-controls {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .view-switcher, .view-type-switcher {
        flex: 0 0 auto;
        width: auto;
        margin-bottom: 10px;
    }

    .view-switcher {
        flex-grow: 1;
        margin-right: 10px;
    }

    .view-type-switcher {
        flex-shrink: 0;
    }

    /* Adjust the search bar */
    .search-bar {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .search-bar .input-group {
        flex: 1 1 100%;
    }

    /* Adjust font sizes */
    .left-controls {
        font-size: 24px;
    }

    /* Set fixed widths for escala grid columns */
    .escala-grid {
        grid-template-columns: auto repeat(7, 120px); /* Adjust the width as needed */
        overflow-x: auto; /* Enable horizontal scrolling */
    }

    /* Adjust the escala days header to align with columns */
    .escala-days {
        grid-template-columns: repeat(7, 120px); /* Match the column widths */
    }

    .escala-days span {
        width: 120px; /* Match the column width */
        flex-shrink: 0;
    }

    /* Ensure escala week dates column is fixed */
    .escala-week-dates {
        width: 120px; /* Match the width of other columns */
        flex-shrink: 0; /* Prevent shrinking */
        text-align: center;
    }

    /* Adjust escala day cells */
    .escala-day-cell {
        min-width: 120px; /* Ensure cells don't shrink too much */
        overflow: hidden; /* Hide overflow content */
    }

    /* Adjust escala items inside cells */
    .escala-item {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* For screens larger than 768px, show the nav-links */
@media (min-width: 769px) {
    .nav-links {
        display: flex !important; /* Ensure nav-links are displayed */
    }

    .menu-toggle {
        display: none; /* Hide the hamburger icon on large screens */
    }
}

.agenda-container {
    padding: 20px;
    background-color: #ffffff;
    color: #000000;
}

.agenda-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 5px; 
    border-bottom: 1px solid #e0e0e0;
}

.left-controls {
    font-family: 'Inter', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 39px;
    letter-spacing: 0em;
    text-align: left;
    color: #000000;
}

.center-controls {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center; /* Vertically centers the elements */
    justify-content: center; /* Horizontally centers the elements */
    gap: 20px; /* Adds space between elements */
    width: 100%;
    max-width: 600px; 
}

#prev-btn, #next-btn {
    flex-shrink: 0; /* Prevent buttons from shrinking */
}

.right-controls {
    display: flex;
    align-items: center;
    justify-content: center; /* If you want to center the right controls horizontally */
    gap: 15px; /* Adds space between elements */
}


.view-type-switcher {
    display: inline-block;
    position: relative;
}

.view-type-switcher select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #ffffff;
    border: none;
    font-size: 0.7rem;
    color: #000000;
    cursor: pointer;
    padding: 5px 20px 5px 5px;
    text-align: left;
    text-indent: 0px;
}

.view-type-switcher::after {
    content: "\25BC";
    font-size: 0.7rem;
    color: #000000;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.view-type-switcher select:focus {
    outline: none;
    border-color: #464747;
}

/* Remove default styling for IE */
.view-type-switcher select::-ms-expand {
    display: none;
}

/* Ensure the dropdown options have a white background */
.view-type-switcher select option {
    background-color: #ffffff;
    font-size: 0.8rem;
}

.view-type-switcher select.btn {
    background-color: #ffffff; /* Sets background to white */
}

.view-type-switcher .btn {
    background-color: #ffffff;
    color: #000000;
    border: 2px solid #ccc;
    border-radius: 5px;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 5px 20px 5px 5px;
    text-align: left;
    text-indent: 0px;
    transition: background-color 0.3s, border-color 0.3s;
}

.view-type-switcher select::-webkit-calendar-picker-indicator {
    display: none;
}

.calendar-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

#prev-btn, #next-btn {
    background: none;
    border: none;
    color: #626262;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 1;
    text-decoration: none;
}


#prev-btn:hover, #next-btn:hover {
    color: #2c659e;
}

.view-switcher {
    display: flex;
    align-items: center;
    gap: 5px;
}

#current-date-range {
    margin: 0 10px;
    font-size: 20px;
    flex-grow: 1; 
    text-align: center; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-search {
    display: flex;
    align-items: center;
    gap: 10px;
}

.calendar-search input[type="radio"] {
    display: none;
}

.calendar-search label {
    cursor: pointer;
    padding: 5px 10px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #000000;
}

.calendar-search input[type="radio"]:checked + label {
    background-color: #418FDE;
    color: #ffffff;
}

.calendar-search input[type="text"] {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.agenda-scale {
    display: flex;
    align-items: center;
    width: 175px;
    height: 36px;
    background-color: #ECEFF5;
    border-radius: 5px;
    overflow: hidden;
    padding: 2px;
}

.agenda-scale input[type="radio"] {
    display: none;
}

.agenda-scale label {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    color: #505050;
    transition: background-color 0.3s, color 0.3s;
    border-radius: 3px;
}

.agenda-scale input[type="radio"]:checked + label {
    background-color: #FFFFFF;
    color:  #1A73E8;
    box-shadow: 0 0 0 2px #ECEFF5;
}

.calendar-container {
    display: flex;
    gap: 20px;
    margin-top: 5px;
}

.calendar-sidebar {
    width: 200px;
    padding-right: 10px; /* Add some padding to the right */
    position: relative;
}

.calendar-sidebar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1px;
    background-color: #e0e0e0; /* Same color as the horizontal line */
}

.mini-calendar {
    background-color: #f0f0f0;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.event-types {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.event-types-container {
    margin-bottom: 15px;
}

.event-types-legend {
    font-size: 12px;
    color: #737373;
    margin-bottom: 10px;
    padding-left: 10px;
}

.event-types li {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.event-types button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 4px 8px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    color: #0D0D0D;
    background-color: transparent;
    text-align: left;
}

.event-types button::before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    min-width: 13px;
    border-radius: 50%;
    margin-right: 8px;
}


.btn-consultas::before { background-color: #33B679; }
.btn-procedimentos::before { background-color: #F4511E; }

.btn-plantonista::before { background-color: #7986CB; }
.btn-substituto::before { background-color: #C440EB; }
.btn-ferias::before { background-color: #FD5151; }

.calendar-main {
    flex-grow: 1;
}

.sub-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    width: 100%;
}

.calendar-grid {
    display: grid;
    gap: 1px;
    background-color: #ffffff
}

.month-view {
    /* grid-template-columns: repeat(7, 1fr); */
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.week-view {
    /* grid-template-columns: auto repeat(7, 1fr); */
    grid-template-columns: auto repeat(7, minmax(0, 1fr));
    background-color: #ffffff;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    padding: 10px 0;
    background-color: #ffffff;
    font-size: 8px;
    color: #505050;
}

.month-view .calendar-days {
    grid-column: 1 / -1;
}

.week-view .calendar-days {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
    height: 50px;
    position: relative;
}

.week-view .calendar-days span {
    grid-column: span 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-left: none !important; /* Ensure left border is removed */
    border-right: none !important;
    font-size: 8px;
    color: #505050;
}

.week-view .calendar-days span:first-child {
    grid-column: 2;
    border-left: none;
}

.week-view .calendar-days span:last-child {
    border-right: none; /* Remove right border for the last element */
}

.week-view .calendar-days .time-column {
    display: none;
}

.week-view .calendar-days .day-column {
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
}

.week-view .day-column {
    display: grid;
    grid-template-rows: repeat(15, 1fr);
    background-color: #ffffff;
    border-left: 1px solid #e0e0e0; /* Ensure border is applied */
    min-width: 0; /* Allow column to shrink */
    overflow: hidden; /* Prevent overflow */
}

.time-slots {
    grid-column: 1 / 2;
    display: grid;
    grid-template-rows: repeat(15, 1fr);
    text-align: right;
    padding-right: 8px;
    background-color: #ffffff;
    font-size: 12px;
    color: #505050;
}

.time-slot {
    padding: 5px 0;
    color: #505050;
    font-size: 8px;
}

.day-column {
    display: grid;
    grid-template-rows: repeat(15, 1fr);
    background-color: #ffffff;
}

.hour-slot {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: flex-start;
    align-items: stretch; /* Make sure items stretch to the width */
    min-height: 60px;
    height: auto; /* Adjust height to fit content */
    padding: 5px;
    border-bottom: 1px solid #e0e0e0;
    overflow: hidden; /* Prevent overflow */
}

.day {
    background-color: #ffffff;
    min-height: 100px;
    padding: 5px;
    border: 1px solid #e0e0e0;
    font-size: 8px;
    color: #505050; 
    position: relative;
    display: flex;
    flex-direction: column;
}

.day > span:first-child {
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 8px;
    color: #505050; 
    margin-bottom: 5px; 
}

.other-month {
    opacity: 0.5;
}

.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
}

.modal-content {
    background-color: #101820;
    color: #ffffff;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
}

#procedimento-form-modal .modal-content {
    background-color: #ffffff;
    color: #000000;
    margin: 15% auto;
    padding: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    width: 80%;
    max-width: 500px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    padding-bottom: 60px;
}

/* Import modal should match the same white style as procedimento modal */
#import-modal .modal-content {
    background-color: #ffffff;
    color: #000000;
    margin: 15% auto;
    padding: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    width: 80%;
    max-width: 600px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    padding-bottom: 60px;
}

#procedimento-form-modal .modal-content h2 {
    font-size: 16px;
    font-weight: 600;
    color: #1A73E8;
    margin-bottom: 5px;
}

#import-modal .modal-content h2 {
    font-size: 16px;
    font-weight: 600;
    color: #1A73E8;
    margin-bottom: 5px;
}

#procedimento-form-modal .required-field-text {
    font-size: 10px;
    color: #3D3D3D;
    margin-bottom: 30px;
}

#import-modal .required-field-text {
    font-size: 10px;
    color: #3D3D3D;
    margin-bottom: 15px;
}

#procedimento-form-modal label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 2px;
    color: #3D3D3D;
}

#import-modal label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 6px;
    color: #3D3D3D;
}

#procedimento-form-modal .form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

#import-modal .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

#procedimento-form-modal input[type="text"],
#procedimento-form-modal input[type="email"],
#procedimento-form-modal input[type="date"],
#procedimento-form-modal input[type="time"],
#procedimento-form-modal textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    background-color: #ffffff;
    color: #000000;
    box-sizing: border-box;
}

#import-modal input[type="file"],
#import-modal input[type="text"],
#import-modal input[type="email"],
#import-modal input[type="date"],
#import-modal input[type="time"],
#import-modal textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    background-color: #ffffff;
    color: #000000;
    box-sizing: border-box;
}

#procedimento-form-modal select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z' fill='%23000000'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
}

#procedimento-form-modal .time-inputs {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

#procedimento-form-modal .time-inputs .form-group {
    flex: 1;
}

#procedimento-form-modal .cadastrar-btn {
    background-color: #1A73E8;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 15px;
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: auto;
    padding: 8px 16px;
    font-size: 14px;
}

#procedimento-form-modal .cadastrar-btn:hover {
    background-color: #1557b0;
}

#import-modal .cadastrar-btn {
    background-color: #1A73E8;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 15px;
    position: absolute;
    bottom: 20px;
    right: 20px;
}

#import-modal .cadastrar-btn:hover {
    background-color: #1557b0;
}

#procedimento-form-modal .close {
    color: #646464;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

#procedimento-form-modal .close:hover {
    color: #000000;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


.procedure-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    display: none;
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    max-width: 300px; 
    width: 90%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    border-radius: 10px;
}

.procedure-modal.right-aligned {
    right: 0;
}

.procedure-modal-content {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    position: relative;
    padding-top: 20px;
}

.procedure-modal-content p {
    margin: 5px 0;
}

.modal-patient-name {
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 5px;
}

.pdf-link {
    display: flex;
    align-items: center;
    color: #d32f2f;
    text-decoration: none;
    margin-top: 10px;
}

.pdf-link img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.procedure-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

.edit-btn {
    background-color: #1976d2;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.cancel-btn {
    background-color: #d32f2f;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.edit-btn:hover, .cancel-btn:hover {
    opacity: 0.9;
}

/* Default styles for procedure-card */
.procedure-card {
    color: #ffffff;
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 5px;
    margin-top: 11px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    min-height: 20px;
    position: relative;
    font-size: 10px;
}

.week-view-card {
    width: 100%; /* Force card to take full width of container */
    padding: 3px;
    box-sizing: border-box;
    margin-bottom: 3px;
    background-color: #f5f5f5;
    border-radius: 3px;
    overflow: hidden; /* Prevent any content from overflowing */
    word-wrap: break-word; /* Break long words */
    height: 48px; /* Fixed standard height for week view cards */
}

.procedure-card:hover {
    opacity: 0.9;
}

.procedure-card span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.procedure-first-row {
    display: block;
    width: 100%;
    overflow: hidden;
}

.procedure-first-row .procedure-time {
    display: inline;
    font-weight: bold;
    margin-right: 5px;
}

.procedure-first-row .procedure-patient {
    display: inline;
    font-weight: bold;
}

.procedure-card .procedure-name,
.procedure-card .procedure-anesthesiologist {
    display: block;
    font-size: 0.8em;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}



/* Specific colors based on procedimento_type */
.consulta {
    background-color: #33B679; /* Green for Consulta */
}

.cirurgia-ambulatorial {
    background-color: #F4511E; /* Orange for Cirurgia/Ambulatorial */
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: #888;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}

.close-modal:hover {
    color: #333;
}


.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 15px;
}

.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-primary {
    background-color: #1A73E8;
    color: #FFFFFF;
}

.btn-primary:hover {
    background-color: #2c659e;
}

.btn-danger {
    background-color: #FFFFFF;
    color: #FF0004;
    border: 1px solid #FF0004;
}

.btn-danger:hover {
    background-color: #FFEBEE;
}

#agendar-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #1A73E8;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 23.23px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

#agendar-btn::before {
    content: "+";
    font-size: 30px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#agendar-btn:hover {
    background-color: #2c659e;
}

.edit-procedure, .delete-procedure {
    font-size: 14px;
}

.is-invalid {
    border-color: #dc3545;
}
.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
    color: #dc3545;
}

.escala-header {
    margin-bottom: 20px;
}

.escala-grid {
    display: grid;
    grid-template-columns: auto repeat(7, 1fr);
    gap: 1px;
    background-color: #ffffff;
}

.escala-week-row, .escala-week-dates, .escala-day-cell {
    border-top: 1px solid #E6E6E6; /* Only top border */
    border-left: 1px solid #E6E6E6; /* Only left border */
    background-color: #ffffff;
}

/* Remove the border from the first column (week dates) */
.escala-week-dates {
    border-left: none; /* No left border for the first column */
}

/* Remove left border from first cell in each week row */
.escala-week-row .escala-day-cell:first-child {
    border-left: none; /* No left border for the first cell in each row */
}

/* No right or bottom border for any cell */
.escala-week-row .escala-day-cell,
.escala-week-dates {
    border-right: none; /* Remove right border */
    border-bottom: none; /* Remove bottom border */
}

.escala-days {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: bold;
    background-color: #f5f5f5;
}

.escala-days span {
    background-color: #ffffff; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #505050;
}

.escala-week-row {
    display: contents;
}

.escala-week-dates {
    padding: 10px;
    background-color: white;
    font-weight: bold;
    font-size: 14px;
    color: #505050;
}

.escala-day-cell {
    background-color: white;
    min-height: 90px;
    padding: 5px;
}

.escala-item {
    padding: 3px;
    margin: 1px 0;
    border-radius: 3px;
    font-size: 0.8em;
}

.escala-item p {
    margin: 0.1em; /* Remove default paragraph margins */
}

.escala-item.plantonista { background-color: #7986CB; }
.escala-item.substituto { background-color: #C440EB; }
.escala-item.ferias { background-color: #FD5151; }

.escala-legend {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.escala-legend li {
    margin-right: 15px;
    display: flex;
    align-items: center;
}

.escala-color-indicator {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.escala-color-indicator.plantonista { background-color: #7986CB; }
.escala-color-indicator.substituto { background-color: #C440EB; }
.escala-color-indicator.ferias { background-color: #FD5151; }


.escala-types {
    display: flex;
    gap: 10px; /* Space between the buttons */
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.escala-types li {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px; /* Adjust padding for button-like appearance */
    border-radius: 10px; /* Rounded corners */
    font-weight: bold;
    color: #ffffff;
    cursor: default; /* Not clickable */
}

.escala-types .plantonista {
    background-color: #7986CB; /* Green */
}

.escala-types .substituto {
    background-color: #C440EB; /* Plum */
}

.escala-types .ferias {
    background-color: #FD5151; /* Red */
}



   .escala-view .view-switcher {
    display: flex;
    align-items: center; /* Ensures alignment of arrows and date */
    gap: 5px; /* Reduce space between arrows and date */
}

.escala-view .view-switcher .btn-link {
    padding: 0; /* Remove padding from the buttons */
    margin: 0; /* Remove margin from the buttons */
}

.escala-view .view-switcher .escala-date-range {
    margin: 0; /* Remove margin from the date range */
}

.escala-view .escala-date-range {
    font-size: 1.4rem !important; /* Adjust the value as needed */
}
.mini-calendar {
    padding: 10px;
    width: 100%; /* Ensure it fits within the container */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    background-color: transparent; /* Remove background color */
    border: none; /* Remove border */
}

.mini-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 5px; /* Reduce the space between elements */
}

.mini-calendar-header .btn-link {
    background: none;
    border: none;
    color: #418FDE;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}

.mini-calendar-header .btn-link:hover {
    color: #2c659e;
}

.mini-calendar-header #mini-current-month {
    font-size: 0.8em;
    font-weight: bold;
    color: #505050;
    flex-grow: 1;
    text-align: center;
}

.mini-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 0.7rem; 
    color: #505050;
}

.mini-calendar-dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.mini-calendar-date {
    text-align: center;
    padding: 5px 0; /* Adjust padding to ensure alignment */
    cursor: pointer;
    font-size: 0.7rem; /* Adjust font size */
    color: #000; /* Set color to black */
}

.mini-calendar-date:hover {
    background-color: #ddd;
}

.mini-calendar-date.empty {
    background-color: transparent;
    cursor: default;
}

.mini-calendar-date.other-month {
    color: #aaa; /* Lighter color for days of other months */
}

.mini-calendar-date.current-day {
    background-color: #1A73E8; 
    color: #fff; 
    border-radius: 50%; 
}

.mini-calendar-header .btn-link {
    background: none;
    border: none;
    color: #505050;
    font-size: 1.0rem;
    cursor: pointer;
    padding: 5px; /* Add padding for better click area */
}

.mini-calendar-header .btn-link:hover {
    color: #2c659e;
}

.mini-calendar-header .btn-link:disabled {
    color: #ccc; /* Disabled state color */
    cursor: not-allowed;
}


.search-bar {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.search-bar .input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.search-bar .input-group input[type="text"] {
    width: 157px;
    padding: 8px 30px 8px 10px;
    border: 1px solid #CDCDCD;
    border-radius: 5px;
    font-size: 14px;
}

.search-bar .input-group input[type="text"]::placeholder {
    font-size: 14px;
    color: #505050;
}

.search-bar .input-group button {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: #505050;
    cursor: pointer;
    padding: 0;
}

.search-bar .input-group button i {
    font-size: 15px;
}

/* Hide the default button styles */
.search-bar .input-group button:focus {
    outline: none;
}


/* Styles to highlight the search results */
.calendar-grid .day.highlight,
.calendar-grid .day-column.highlight {
    border: 2px solid #232376;
}

.procedure-card.highlight {
    border: 2px solid #232376;
}


/* ... (existing styles) ... */

/* Styles for the "Nova Escala" button */
#criar-escala-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #1A73E8;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 23.23px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

#criar-escala-btn::before {
    content: "+";
    font-size: 30px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#criar-escala-btn:hover {
    background-color: #2c659e;
}

/* Styles for the Escala form modal */
#escala-form-modal .modal-content,
#edit-escala-modal .modal-content {
    background-color: #ffffff;
    color: #000000;
    margin: 15% auto;
    padding: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    width: 80%;
    max-width: 500px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    padding-bottom: 60px;
}

#escala-form-modal .modal-content h2 {
    font-size: 16px;
    font-weight: 600;
    color: #1A73E8;
    margin-bottom: 5px;
}

#edit-escala-modal .modal-content h2{
    font-size: 16px;
    font-weight: 600;
    color: #1A73E8;
    margin-bottom: 5px;
}

#escala-form-modal .required-field-text {
    font-size: 10px;
    color: #3D3D3D;
    margin-bottom: 30px;
}

#escala-form-modal label,
#edit-escala-modal label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
    color: #3D3D3D;
}

#escala-form-modal .form-group,
#edit-escala-modal .form-group {
    margin-bottom: 20px;
    gap: 0;
}



#escala-form-modal input[type="text"],
#escala-form-modal input[type="email"],
#escala-form-modal input[type="date"],
#escala-form-modal input[type="time"],
#escala-form-modal textarea,
#escala-form-modal select,
#edit-escala-modal input[type="text"],
#edit-escala-modal input[type="email"],
#edit-escala-modal input[type="date"],
#edit-escala-modal input[type="time"],
#edit-escala-modal select,
#edit-escala-modal textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 14px;
    background-color: #ffffff;
    color: #000000;
    box-sizing: border-box;
}
#escala-form-modal select,
#edit-escala-modal select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z' fill='%23000000'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

#escala-form-modal .cadastrar-btn,
#edit-escala-modal .cadastrar-btn {
    background-color: #1A73E8;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 15px;
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: auto;
}

#escala-form-modal .cadastrar-btn:hover,
#edit-escala-modal .cadastrar-btn:hover {
    background-color: #1557b0;
}

#escala-form-modal .close,
#edit-escala-modal .close {
    color: #646464;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

#escala-form-modal .close:hover,
#edit-escala-modal .close:hover {
    color: #000000;
}


#escala-details-modal .modal-content {
    background-color: #ffffff;
    color: #000000;
    margin: 15% auto;
    padding: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    width: 80%;
    max-width: 200px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
}

#escala-details-modal h2 {
    font-size: 16px;
    font-weight: 600;
    color: #1A73E8;
    margin-bottom: 20px;
}

#escala-details-modal p {
    margin-bottom: 10px;
    font-size: 14px;
    color: #3D3D3D;
}

#escala-details-modal #modal-anestesiologista {
    font-size: 23px;
    font-weight: bold;
    color: #000000;
    display: block;
    margin-bottom: 15px;
}

#escala-details-modal #modal-escala-type {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    color: #ffffff;
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 14px;
}

#escala-details-modal #modal-escala-type.plantonista {
    background-color: #7986CB;
}

#escala-details-modal #modal-escala-type.substituto {
    background-color: #C440EB;
}

#escala-details-modal #modal-escala-type.ferias {
    background-color: #FD5151;
}

#escala-details-modal strong {
    font-weight: 500;
    color: #000000;
}

#escala-details-modal .modal-actions {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

#escala-details-modal .edit-escala,
#escala-details-modal .delete-escala {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

#escala-details-modal .edit-escala {
    background-color: #1A73E8;
    color: #ffffff;
    border: none;
}

#escala-details-modal .edit-escala:hover {
    background-color: #1557b0;
}

#escala-details-modal .delete-escala {
    background-color: #ffffff;
    color: #d32f2f;
    border: 1px solid #d32f2f;
}

#escala-details-modal .delete-escala:hover {
    background-color: #ffebee;
}

#escala-details-modal .close {
    color: #646464;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

#escala-details-modal .close:hover {
    color: #000000;
}

/* Styles for the checkbox container in the Escala form */
#dias-da-semana-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#dias-da-semana-container .checkbox {
    display: flex;
    align-items: center;
}

#dias-da-semana-container .checkbox label {
    margin-left: 5px;
    font-size: 14px;
}

.spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.custom-alert {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 20px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    z-index: 1000;
    display: none;
}

.custom-alert.success {
    background-color: #D7FFDF;
    color: #328234;
}

.custom-alert.error {
    background-color: #FFDCDB;
    color: #A92626;
}

.btn-finalizar,
.btn-ver-finalizacao {
    width: 150px;
    height: 28px;
    border: 1px solid #1A73E8;
    border-radius: 5px;
    background: #FFFFFF;
    color: #1A73E8;
    font-size: 12px;
    font-weight: 500;
    line-height: 14.52px;
    padding: 0 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-avaliar {
    width: 120px;
    height: 28px;
    background: #1A73E8;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 500;
    line-height: 14.52px;
    padding: 0 10px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-finalizar:hover,
.btn-ver-finalizacao:hover {
    background: #F8FBFF;
}

.btn-avaliar:hover {
    background: #1557b0;
}

/* ... existing styles ... */

/* Hide the original multi-select widget */
#id_anestesistas_responsaveis {
    display: none !important;
}

/* Style for the container holding the selected anesthesiologists */
#selected-anesthesiologists-container {
    margin-top: 10px;
    padding-top: 5px;
    /* border-top: 1px solid #e0e0e0; /* Optional separator */
}

/* Style for each selected anesthesiologist item */
.selected-anesthesiologist {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa; /* Light background */
    padding: 5px 8px;
    border-radius: 4px;
    margin-bottom: 5px;
    font-size: 14px;
    color: #3D3D3D;
}

/* Style for the remove button */
.selected-anesthesiologist .remove-anesthesiologist {
    background-color: transparent;
    border: none;
    color: #dc3545; /* Red color for removal */
    font-size: 12px; /* Make button smaller */
    cursor: pointer;
    padding: 2px 5px;
    line-height: 1;
    margin-left: 8px;
}

.selected-anesthesiologist .remove-anesthesiologist:hover {
    color: #a71d2a; /* Darker red on hover */
}


/* Adjust Add Anesthesiologist button style */
#add-anesthesiologist {
    background-color: #6c757d; /* Secondary color */
    color: #ffffff;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 5px; /* Space above the button */
    width: auto; /* Don't force full width */
}

#add-anesthesiologist:hover {
    background-color: #5a6268;
}

/* Autocomplete results styling */
#autocomplete-results {
    position: absolute;
    z-index: 1001; /* Ensure it's above other elements */
    background-color: white;
    border: 1px solid #ced4da;
    border-top: none; /* Avoid double border with input */
    max-height: 150px;
    overflow-y: auto;
    width: 100%; /* Match input width */
    box-sizing: border-box;
     box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Add shadow */
     border-radius: 0 0 4px 4px; /* Round bottom corners */
}

#autocomplete-results div {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    color: #3D3D3D;
}

#autocomplete-results div:hover {
    background-color: #e9ecef;
}

/* ... rest of css ... */