@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



#health_tracker_wrap {
    display: flex;
    align-items: stretch;
    border-radius: 10px;
    box-shadow: 0 2px 34px -6px rgba(0,0,0,.1);
    font-family: "Barlow", sans-serif;
}

.health_tracker_wrap_left {
    flex: 0 0 30%;
    width: 30%;
    padding: 15px;
    border-right: 1px solid #ececec;
}

.health_tracker_wrap_left .text-center {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e852881a;
    border-radius: 99px;
}

.health_tracker_wrap_right {
    flex: 1;
    padding: 15px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 15px;
}

.health_tracker_wrap_left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #000;
}

.health_tracker_title {
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    font-family: "Barlow", sans-serif;
    font-weight: 600;
}

#health_tracker_form {
    margin-bottom: 0px;
}

#health_tracker_form label{
    text-transform: uppercase;
}

#health_tracker_form input, #health_tracker_form select {
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-shadow: none;
}

.button-main{
    width: 100%;
    background: #e85388;
    color: #fff !important;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding: 0 10px;
    border-radius: 4px;
    font-weight: 700;
    border: 1px solid transparent;
    text-decoration: none;
    -webkit-appearance: none;
    margin-bottom: 0px;
    margin-right: 0px;
}

.button-main:hover {
    border-color: #e85388;
    background-color: #ffff;
    color: #e85388 !important;
}

#health-tab {
    margin-bottom: 25px;
}

#health-tab li a img {
    width: auto;
    height: 32px;
}

#health-tab li a {
    flex-direction: column;
    gap: 10px;
    display: flex;
    font-size: 14px;
    font-family: "Barlow", sans-serif;
    border: 0px;
}

#health-tab li a span{
    font-family: "Barlow", sans-serif;
}

#health-tab li {
    flex: 1;
}

#health-tab li.active a {
    background-color: #e85288;
    color: #fff;
    border-top-color: #e85288;
}

#health-tab li.active a img{
    filter: brightness(10);
}

.lds-ripple-wrap{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff99;
    backdrop-filter: blur(1px);
    z-index: 999;
}

.lds-ripple {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ripple div {
    position: absolute;
    border: 4px solid #000;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes lds-ripple {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }
    4.9% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }
    5% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}

#health_tracker_wrap .lds-ripple-wrap {
    display: none;
}

.image-input {
    box-sizing: border-box;
    display: inline-block;
    width: 100px;
    height: 100px;
    background: #f5f5f5;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.15);
    margin: 0 12px 12px 0;
    cursor: pointer;
}
.image-input:before {
    content: "";
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 419.2 419.2"><circle cx="158" cy="144.4" r="28.8"/><path d="M394.4 250.4c-13.6-12.8-30.8-21.2-49.6-23.6V80.4c0-15.6-6.4-29.6-16.4-40C318 30 304 24 288.4 24h-232c-15.6 0-29.6 6.4-40 16.4C6 50.8 0 64.8 0 80.4v238.8c0 15.6 6.4 29.6 16.4 40 10.4 10.4 24.4 16.4 40 16.4h224.4c14.8 12 33.2 19.6 53.6 19.6 23.6 0 44.8-9.6 60-24.8 15.2-15.2 24.8-36.4 24.8-60s-9.6-44.8-24.8-60zM21.2 80.4c0-9.6 4-18.4 10.4-24.4 6.4-6.4 15.2-10.4 24.8-10.4h232c9.6 0 18.4 4 24.8 10.4 6.4 6.4 10.4 15.2 10.4 24.8v124.8l-59.2-59.2c-4-4-10.8-4.4-15.2 0L160 236l-60.4-60.8c-4-4-10.8-4.4-15.2 0l-63.2 64V80.4zM56 355.2v-.8c-9.6 0-18.4-4-24.8-10.4-6-6.4-10-15.2-10-24.8v-49.6L92 198.4l60.4 60.4c4 4 10.8 4 15.2 0l89.2-89.6 58.4 58.8-3.6 1.2c-1.6.4-3.2.8-5.2 1.6-1.6.4-3.2 1.2-4.8 1.6-1.2.4-2 .8-3.2 1.6-1.6.8-2.8 1.2-4 2l-6 3.6c-1.2.8-2 1.2-3.2 2-.8.4-1.2.8-2 1.2-3.6 2.4-6.8 5.2-9.6 8.4-15.2 15.2-24.8 36.4-24.8 60 0 6 .8 11.6 2 17.6.4 1.6.8 2.8 1.2 4.4 1.2 4 2.4 8 4 12v.4c1.6 3.2 3.2 6.8 5.2 9.6H56zm322.8 0c-11.6 11.6-27.2 18.4-44.8 18.4-16.8 0-32.4-6.8-43.6-17.6-1.6-1.6-3.2-3.6-4.8-5.2-1.2-1.2-2.4-2.8-3.6-4-1.6-2-2.8-4.4-4-6.8-.8-1.6-1.6-2.8-2.4-4.4-.8-2-1.6-4.4-2-6.8-.4-1.6-1.2-3.6-1.6-5.2-.8-4-1.2-8.4-1.2-12.8 0-17.6 7.2-33.2 18.4-44.8 11.2-11.6 27.2-18.4 44.8-18.4s33.2 7.2 44.8 18.4c11.6 11.6 18.4 27.2 18.4 44.8 0 17.2-7.2 32.8-18.4 44.4z"/><path d="M341.6 267.6c-.8-.8-2-1.6-3.6-2.4-1.2-.4-2.4-.8-3.6-.8h-.8c-1.2 0-2.4.4-3.6.8-1.2.4-2.4 1.2-3.6 2.4l-24.8 24.8c-4 4-4 10.8 0 15.2 4 4 10.8 4 15.2 0l6.4-6.4v44c0 6 4.8 10.8 10.8 10.8s10.8-4.8 10.8-10.8v-44l6.4 6.4c4 4 10.8 4 15.2 0 4-4 4-10.8 0-15.2l-24.8-24.8z"/></svg>');
    display: inline-block;
    position: absolute;
    width: 40px;
    height: 40px;
    left: 52%;
    top: 52%;
    opacity: 0.3;
    transition: opacity 200ms;
    transform: translate(-50%, -50%);
}
.image-input.isUploading::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 30px;
    height: 30px;
    left: 32px;
    top: 32px;
    opacity: 0.3;
    border-radius: 50%;
    border: 2px solid;
    border-color: transparent currentColor currentColor currentColor;
    animation: spin 600ms linear infinite;
}
.image-input.isUploading::before {
    display: none;
}
.image-input input[type=file] {
    opacity: 0;
    display: block;
    height: 100px;
    cursor: pointer;
}
.image-input img {
    position: absolute;
    display: block;
    border-radius: 4px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: opacity 200ms;
    opacity: 1;
    object-fit: cover;
    object-position: center;
    background: white;
    z-index: 1;
}
.image-input img[src=""] {
    opacity: 0;
    pointer-events: none;
}

.health_tracker_wrap_search {
    width: 100%;
    flex: 0 0 100%;
    padding: 20px;
}

.health_tracker_wrap_search input,
.health_tracker_wrap_search select {
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-shadow: none;
}

.alert.alert-danger {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b20000;
    padding: 10px;
    border: 1px dashed #b20000;
    background-color: #fff;
}

.form-row-results{
    grid-template-columns: repeat(1,1fr);
}

.food_img_wrap_result {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}


.reslut-baby .avatar {
    width: 120px;
    margin: 0 auto;
    border: 1px solid #e85288;
    border-radius: 99%;
    overflow: hidden;
    padding: 0;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reslut-baby {
    text-align: center;
}

.reslut-baby .avatar img {
    object-fit: contain;
    width: 64px;
    height: 64px;
}

.reslut-baby .fullname {
    font-size: 20px;
    font-weight: 600;
    color: #000;
}

.reslut-baby .datetime {
    font-size: 16px;
    color: #e85288;
    font-weight: 500;
}

.reslut-baby .baby-info {
    margin-top: 10px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    color: #000;
    gap: 20px;
}

.reslut-baby .baby-info .baby-ifo-item .number {
    font-weight: 600;
    font-size: 24px;
    color: #000;
}

#result-container {
    margin-top: 20px;
}

.item-result .image img {
    width: 200px;
}

.item-result-container ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-bottom: 0px;
    column-gap: 20px;
}

.item-result-container ul li {
    margin-bottom: 0px;
    margin-left: 0px;
}

.item-result-container {
    border-bottom: 1px dashed;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

#result-container .item-result {
    border: 1px solid #e85288;
    padding: 10px;
    border-radius: 8px;
    color: #000;
    margin-bottom: 10px;
}

#result-container .item-result:last-child{
    margin-bottom: 0px;
}

#result-container .item-result .date {
    font-weight: 600;
    font-size: 20px;
    color: #34a953;
    font-style: italic;
    border-bottom: 1px dashed #000;
    margin-bottom: 8px;
}

.info-wight-height ul {
    margin-bottom: 0px;
}

#result-container .item-result .desc {
    margin: 10px 0px;
    font-size: 18px;
}

#result-container .item-result .info-cal ul {
    gap: 10px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

.img-food-review {
    width: 120px;
    display: block;
    margin: 10px 0px;
}

.chart-resluts{
    display: none;
    margin-top: 20px;
}

#search-results h3,
.chart-resluts h3{
    font-family: "Barlow", sans-serif;
}

.modal {
    display: none;
    position: fixed;
    min-width: 375px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-height: 375px;
    background-color: whitesmoke;
    border-radius: 10px;
    box-shadow: 0 2px 34px -6px rgba(0,0,0,.1);
    z-index: 99999;
}

.modal .modal-content {
    position: relative;
    padding: 40px 15px 15px 15px;
    overflow-y: hidden;
    max-height: 375px;
}

.modal .modal-content .close {
    font-size: 48px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 20px;
    position: absolute;
    right: 5px;
    top: 5px;
    color: #e85288;
    cursor: pointer;
}

.modal .modal-content #info_List {
    list-style: none;
    max-height: 250px;
    overflow-y: scroll;
}

.modal .modal-content #info_List li {
    margin-left: 0px !important;
    border: 1px solid;
    padding: 10px;
    border-radius: 8px;
    transition: .4s all;
}

.modal .modal-content #info_List li p {
    margin-bottom: 0px;
    color: #000;
}

.modal .modal-content #info_List li:hover {
    background-color: #e85288;
    color: #fff;
    cursor: pointer;
}

.modal-title{
    margin-bottom: 8px;
    display: block;
    color: #000;
}

@media screen and (max-width: 767px) {
    #health_tracker_wrap {
        flex-direction: column;
    }
    
    .health_tracker_wrap_left {
        flex: 1;
        width: 100%;
    }
    
    #health_tracker_form label {
        font-size: 12px;
    }
}