@import url(https://pro.fontawesome.com/releases/v5.10.0/css/all.css);
:root {
        --red-500: #EF4444;
}
.cursor-pointer {
        cursor: pointer;
}
.mr-2 {
        margin-right: 0.5rem;
}
.mb-2 {
        margin-bottom: 0.5rem;
}
.ml-2 {
        margin-left: 0.5rem;
}
.py-2 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
}
.px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
}
.p-2 {
        padding: 0.5rem;
}
.p-4 {
        padding: 1rem;
}
.bg-red-500 {
        background-color: var(--red-500);
}
.text-white {
        color: white;
}
.text-red-500 {
        color: var(--red-500);
}
.object-fit-cover {
        object-fit: cover;
}
.object-fit-contain {
        object-fit: contain;
}
.flex {
        display: flex;
}
.justify-center {
        justify-content: center;
}
.justify-between {
        justify-content: space-between;
}
.flex-grow {
        flex-grow: 1;
}
.doctors .btn-location {
        background-color: #F0F2F1;
        padding: 0.5rem 1rem;
        box-shadow: 0 1px 2px #ccc!important;
        text-transform: uppercase;
        margin-right: 0.5rem;
        text-decoration: none;
        border-radius: 0.25rem;
        border: none;
        /* font-family: 'Merriweather'; */
        font-size: 15px;
        margin-bottom: 10px;
}
.doctors .btn-location:hover {
        background-color: #1691e2;
        color: #fff;
}
.doctors .location {
        margin-bottom: 1rem;
}
.doctors .btn-location.active {
        background-color: #1691e2;
        color: #fff;
}
.doctors .header {
        text-align: center;
        color: #1691E2;
        margin-bottom: 12px;
        font-size: 24px;
        /* font-family: 'Merriweather'; */
}
.doctors .divide {
        height: 5px;
        background-color: #5D5D5D;
        width: 70px;
        margin-bottom: 24px;
}
.doctors .avatar {
        width: 220px;
        height: 270px;
        box-shadow: 0 1px 3px #ccc;
}
.doctors .condition {
        margin-bottom: 30px;
}
.doctors .item {
        margin-bottom: 30px;
        flex-wrap: wrap;
}
.doctors .info {
        padding-left: 1rem;
        width: calc(100% - 270px);
}
.doctors .info-name {
        margin-bottom: 10px;
        color: #0067b2;
        font-size: 22px;
        text-transform: uppercase;
        font-weight: 600;
        /* font-family: 'Merriweather'; */
}
.doctors .sub-item {
        font-style: italic;
        color: #686868;
        /* font-family: 'Merriweather'; */
        font-size: 15px;
        margin-bottom: 5px;
}
.doctors .avatar-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
}
.doctors .pagination {
        margin: 20px 0;
        justify-content: center;
}
.doctors .pagination li {
        padding: 2px 10px;
        border: 1px solid #ddd;
        color: #337ab7;
        background: #e4e4e4;
        margin: 5px;
        width: 30px;
        height: 30px;
        border-radius: 5px;
}
.doctors .pagination li.active {
        background-color: #1690E1;
}
.doctors .pagination li.active a {
        color: #fff;
}
.doctors .pagination>li:last-child {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
}
.doctors .pagination>li:first-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
}
.doctors .advance-search {
        gap: 1rem;
}
.doctors .advance-search select {
        width: 33.33333%;
        padding: 5px 10px;
        border: 1px solid #ccc;
        border-radius: 0.25rem;
        color: #686868;
}
.doctors .search-input {
        justify-content: center;
        margin-bottom: 20px;
}
.doctors .navbar-menu {
        background-color: #58cf08;
        color: #fff;
        text-transform: uppercase;
        margin-bottom: 15px;
        border-radius: 5px 5px 0 0;
        border-bottom: 4px solid #0067b2;
}
.doctors .navbar-menu ul {
        list-style: none;
        display: flex;
        padding: 0;
        margin: 0;
}
.doctors .navbar-menu ul li {
        padding: 15px 10px 10px 10px;
        cursor: pointer;
        border-bottom: 5px solid #58cf08;
}
.doctors .btn-details {
        background-color: #1691E2;
        text-transform: uppercase;
        color: #fff;
        padding: 6px 12px;
        border: none;
        border-radius: 0.25rem;
        float: right;
        /* font-family: 'Merriweather'; */
        font-size: 15px;
}
.doctors .navbar-menu ul li.active {
        font-family: 'Merriweather';
        background: #0067b2;
        border-radius: 5px 5px 0 0;
        margin-top: 5px;
        padding-bottom: 0 !important;
        border-bottom: 0;
}
.doctors .navbar-menu ul li:hover {
        border-bottom: 5px solid #36ad05;
}
.doctors .btn-quick-search {
        border-left: none;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-top: 1px solid #ccc;
        color: #1691E2;
        background-color: #fff;
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
}
.doctors .profile {
        display: block;
        padding: 2rem 0;
        align-items: center;
        width: 100%;
        justify-content: center;
        text-align: center;
}
.doctors .profile .profile-info, .doctors  .profile .info-wrapper {
        width: 100%;
        padding: 10px;
        display: block;
        text-align: center !important;
}
.doctors .navigate-menu li {
        color: #1691E2;
        cursor: pointer;
        text-transform: uppercase;
        font-size: 16px;
        margin-top: 5px;
        font-family: 'Merriweather';
}
.doctors .profile .name {
        font-weight: bold;
        font-size: 22px;
        color: #102E9E;
        margin-bottom: 10px;
        text-transform: uppercase;
        font-family: 'Merriweather';
}
.doctors .profile .avatar {
        box-shadow: none;
        width: 220px;
        height: auto;
        margin: 0 auto;
}
.doctors .profile .sub-item {
        font-style: normal;
        text-align: center;
        display: block;
        font-size: 15px;
        font-family: 'Merriweather';
}
.doctors  .navigate-menu{
        margin-top: 10px;
}
.doctors .navigate-menu ul{
        padding-left: 20px;
}
.doctors .details .title {
        color: #1691E2;
        text-transform: uppercase;
        border-bottom: 1px solid #1691E2;
        padding-bottom: 4px;
        margin-bottom: 1rem;
        font-family: 'Merriweather';
}
.doctors .details .content {
        margin-bottom: 1rem;
        padding: 0.25rem;
        font-family: 'Merriweather';
}
.doctors .details .title .icon_left {
        width: 30px;
        height: 30px;
        margin-right: 0.5rem;
}
.doctors .search-box {
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        border: 1px solid #ccc;
        padding: 5px 15px;
        border-right: none;
}
.doctors .bio {
        color: #686868;
        margin-top: 10px;
        font-size: 15px;
        /* font-family: 'Merriweather'; */
}
.doctors .btn-back {
        padding: 4px 12px;
        border: none;
        color: #fff;
        background-color: #1691E2;
        border-radius: 0.25rem;
        float: right;
        font-family: 'Merriweather';
}
@media only screen and (max-width: 768px) {
        .MainStructure .fixed {
                position: unset !important;
                height: 0;
        }
        .doctors .item {
                flex-direction: row;
                flex-wrap: nowrap;
        }
        .doctors .avatar {
                width: 100%;
                height: 250px;
                box-shadow: none;
                margin-bottom: 1rem;
        }
        .UIMedicalSpecialistSearching .avatar img {
                height: 250px !important;
        }
        .doctors .info {
                width: 100%;
                text-align: left;
        }
        .doctors .location {
                flex-wrap: wrap;
        }
        .doctors .location button {
                margin: 0;
        }
        .doctors .profile {
                flex-direction: column;
        }
        .doctors .profile .profile-info {
                width: 100%;
        }
        .doctors .sub-item {
                flex-direction: column;
                margin-bottom: 10px;
        }
        .doctors .btn-details {
                font-size: 13px;
                margin-top: 10px;
        }
        .UIMedicalSpecialistSearching .condition>div.location {
                margin-bottom: 20px;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                gap: 10px;
        }
        .UIMedicalSpecialistSearching .condition>div.location button {
                font-size: 13px;
                padding: 5px 10px;
        }
        .UIMedicalSpecialistSearching {
                margin-bottom: 20px;
        }
}