:root {
  --titles-blue: #298891;
  --titles-lightblue: #2f8bfe;
  --titles-lighterblue: #4e9bff;
}

.directory_image {
    position: relative;
}

.directory_image h1{
    position: absolute;
    top: 75%;
    width: 100%;
    text-align: center;
    color: white;
    text-transform: uppercase;
    font-size: xxx-large;
}

.directory_content {
    width: 100%;
    padding: 10vh 15vh;
}

.directory_contact_card{
    width: 100%;
    padding: 0vh 5vh 5vh 5vh;
    background-color: lightgrey;
    box-shadow: 5px 5px 20px grey, -5px -5px 20px grey;
}

.directory_contact_card h3 {
    width: max-content;
    background-color: var(--titles-blue);
    color: white;
    padding: 5vh 2vh 2vh 2vh;
}

.directory_contact_card h2 {
    margin-top: 4vh;
    color: var(--titles-blue);
}

.directory_contact_info {
    list-style: none;
    margin: 0px;
}

.directory_contact_info li {
    padding-bottom: 2vh;
}

.directory_search {
    padding-bottom: 15vh;
}

.directory_search h2 {
    margin-bottom: 5vh;
    color: var(--titles-blue);
}

.search_selects {
    display: flex;
    justify-content: space-around;
}

.search_selects div {
    width: 35%;
}

.search_field {
    display: block;
    width: 100%;
    height: 96% !important;
    border-radius: 15px !important;
    border-width: 2px !important;
    border-color: black !important;
    font-weight: 600 !important;
}

.search_field::-webkit-input-placeholder {
  color: black;
  opacity: 1;
}

.search_selects div{
    display: flex;
}

.search_selects div button{
    display: flex;
    justify-content: space-around;
    background-color: var(--titles-blue);
    color: white;
    padding: 0vh 3vh;
    border-radius: 15px;
    font-size: 20px;
    font-weight: 900;
    margin-left: 2vh;
    height: auto;
    align-items: center;
}

.doctors_list {
    padding: 0 7vw;
    margin: 0;
}

.doctor_elements {
    display: grid;
    grid-template-columns: 15% 50% 25%;
    gap: 20px;
    padding: 15px;
    margin-bottom: 10px;
    align-items: flex-start;
    height: max-content;
}

.doctor_img {
    flex: 0 0 120px;
    height: 150px;
    width: auto;
}

.doctor_img img {
    max-height: 150px;
}

.doctor_info {
    flex: 1;
    height: 100%;
}

.doctor_elements svg {
    color: var(--titles-lightblue);
}

.doctor_name {
    font-size: xx-large;
    color: #878787;
}

.doctor_description {
    font-size: 15px;
    color: #b6b6b6;
}

.doctor_page_dir {
    color: var(--titles-lightblue);
}

.doctor_location {
    font-size: 15px;
    color: #3e3e3e;
    margin: 0;
}

.doctor_info p.ubicacion {
    color: #777;
    font-style: italic;
    font-size: 0.85em;
}

.doctor_contact {
    flex: 0 0 200px;
    font-size: 0.9em;
}

.loader_container {
    display: none;
    top: 0;
    position: fixed;
    text-align: -webkit-center;
    z-index: 50;
    height: 100%;
    width: 100%;
    align-content: center;
    background-color: rgba(0, 0, 0, 0.5);
}

.loader_container p {
    color: white;
}

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

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

@media (max-width: 768px) {
    .directory_image h1 {
        top: 60%;
        font-size: xx-large;
    }

    .directory_content {
        padding: 8vh 5vh;
    }

    .search_selects {
        flex-direction: column;
        gap: 2vh;
    }

    .search_selects div{
        width: 100%;
    }

    .search_selects div button{
        padding: 0vh 2vh;
        font-weight: 600;
        margin-left: 1vh;
    }

    .search_field {
        width: 100%;
    }

    .directory_search {
        padding-bottom: 5vh;
    }

    .doctor_elements {
        grid-template-columns: none;
        grid-template-rows: auto;
    }

    .doctors_list {
        padding: 0;
    }
}