@font-face {
    font-family: Mitr;
    src: url(../font/Mitr-Regular.ttf);
}

body {
    font-family: Mitr;
}


/* ===Home Screen=== */

.head-box {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 0px 0px 34px 34px;
    height: auto;
}

.logo-text {
    color: #4CB69A;
    float: left;
    padding-left: 5px;
    font-size: 32px;
}

.menu-profile {
    color: #2165b9;
    font-size: 18px;
    float: right;
    padding-right: 5px;
    margin-top: 16%;
}

.avatar-content {
    margin: 2% auto;
    width: 97%;
    height: auto;
    background: #FFFFFF;
    border-radius: 18px;
    padding: 3%;
}

.img-avatar {
    width: 100%;
    margin: 0 auto;
}

.bg-avatar {
    background: #FCFBE7;
    border-radius: 18px;
    padding: 1%;
}

.bmi-content {
    margin: 4% auto;
    width: 97%;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 3px 16px #00000014;
    border: 1px solid #EBEBEB;
    border-radius: 18px;
    padding: 4% 4% 4% 1%;
}

.bmi-display {
    font-size: 18px;
    letter-spacing: 0.8px;
    color: #EC6C17;
    font-weight: 600;
    margin-bottom: 1%;
}

.bmi-par {
    font-size: 12px;
    color: #EC6C17;
    padding-bottom: 5px;
    border-bottom: 1px solid #cccccc;
    margin-bottom: 2%;
}

.status {
    font-size: 12px;
    font-weight: 600;
    color: #EC6C17;
    padding-bottom: 3px;
    margin-bottom: 0%;
}

.point {
    font-size: 11px;
    color: #04A856;
    padding-bottom: 3px;
    margin-bottom: 0%;
}

.btn-report-point {
    float: right;
    margin-top: 2%;
    font-size: 10px;
    letter-spacing: 0.1px;
    color: #ffffff;
    background-color: #04A856;
    padding: 2px;
    border-radius: 30px;
    width: 60%;
}

.progress {
    background-color: #F8E3A0;
    border-radius: 10px;
}

.progress-bar-point {
    background: transparent linear-gradient(92deg, #FFD700 0%, #FD6100 100%) 0% 0% no-repeat padding-box;
    border-radius: 10px;
}

.note-bmi {
    letter-spacing: 0.05px;
    color: #727272;
    font-size: 9px;
    margin: 5% 1% 1% 2%;
}

.note-member {
    letter-spacing: 0.05px;
    color: #727272;
    font-size: 9px;
    margin: 7% 1% 1% 2%;
}

.img-bmi {
    width: 90%;
    margin: 0 auto;
}

.title-bmi {
    letter-spacing: 0.08px;
    color: #686868;
    margin: 0 auto;
    font-size: 12px;
}

.num-weight {
    font-size: 20px;
    color: #04A856;
    padding: 8% 0;
    margin: 0 auto;
}

.num-bmi {
    font-size: 20px;
    color: #EC6C17;
    padding: 8% 0;
    margin: 0 auto;
}

.btn-bmi {
    margin: 2% auto;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.1px;
    color: #ffffff;
    background-color: #205072;
    padding: 2px;
    border-radius: 25px;
    width: 70px;
}

.type-box {
    width: 100%;
    height: auto;
    background: #ffffff;
    box-shadow: 0px 3px 16px #00000014;
    border-radius: 18px;
    padding: 12% 10%;
    text-align: center;
}

.img-type {
    width: 65%;
    margin: 5% auto;
}

.title-type {
    margin: 0 auto;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #205072;
}

.img-menu {
    width: 55%;
    margin: 5% auto;
}

.title-menu {
    margin: 0 auto;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #205072;
}

.head-health-baby {
    font-size: 16px;
    color: #007b48;
    background-color: #d0e8d5;
    padding: 8px 20px;
    width: fit-content;
    border-radius: 50px;
    margin: 3% auto;
}

.pd-1 {
    padding: 1% !important;
}

.pd-2 {
    padding: 2% !important;
}

.pd-0 {
    padding: 0 !important;
}

.pd-1-2 {
    padding: 1% 2% !important;
}

.pd-1-3 {
    padding: 1% 3% !important;
}

.m-0-auto {
    margin: 0 auto;
}

.mt-15 {
    margin-top: 15% !important;
}

.mt-17 {
    margin-top: 17%;
}

.mt-20 {
    margin-top: 20%;
}

.mt-27 {
    margin-top: 27%;
}

.mt-30 {
    margin-top: 30% !important;
}

.mt-32 {
    margin-top: 32% !important;
}

.f-blue {
    color: #205072;
}

.f-blue2 {
    color: #2165b9 !important;
}

.f-black {
    color: #000000;
}

.f-orange {
    color: #EC6C17 !important;
}

.f-red {
    color: #dc3545 !important;
}

.f-green {
    color: #41c2a1 !important;
}

.f-green2 {
    color: #04a856 !important;
}

.font-22 {
    font-size: 22px !important;
}

.font-18 {
    font-size: 18px !important;
}

.font-17 {
    font-size: 17px !important;
}


/* === Health Info=== */

.head-health-num {
    font-size: 13px;
    color: #205072;
    background-color: #d0e4f1;
    padding: 4px 20px;
    width: fit-content;
    border-radius: 50px;
    margin-bottom: 2%;
}

.done_ques {
    border: 3px solid #56c596 !important;
}

.health-cate {
    margin: 0 auto;
    margin-top: 20%;
    width: 97%;
    height: auto;
    padding: 0;
}

.img-cate {
    width: 55%;
    margin: 5% auto;
}

.cate-h {
    height: auto;
    padding: 10% 4%;
    border-radius: 18px;
    background-color: #ffffff;
    box-shadow: 0px 3px 16px #00000014;
}

.display-number {
    margin: 0 auto;
    margin-top: 2%;
    width: 97%;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 3px 16px #00000014;
    border: 1px solid #EBEBEB;
    border-radius: 18px;
    padding: 4% 4% 4% 1%;
}

.num-sys {
    font-size: 20px;
    color: #205072;
    padding: 6% 0;
    margin: 0 auto;
}

.num-dia {
    font-size: 20px;
    color: #D43D21;
    padding: 6% 0;
    margin: 0 auto;
}


/* ===Search Doctor=== */

.search-box {
    padding: 6% 5% 0% 5%;
}

.input-search {
    width: 100%;
    padding: 5px 10px 5px 15px;
    font-size: 16px;
    color: #2ab993;
    outline: none;
    border: none;
    border-radius: 6px 0px 0px 6px;
}

.icon-search {
    padding: 10px 15px 10px 10px;
    background: white;
    border-radius: 0px 6px 6px 0px;
    color: #51bb99;
    font-size: 26px;
    text-align: center;
}

.btn-search {
    background-image: linear-gradient(to right bottom, #7be495, #5bd39d, #41c2a1, #32b0a1, #329d9c);
    box-shadow: 15px 15px 40px #329D9C36;
    border-radius: 6px;
    padding: 6px;
    font-size: 16px;
    letter-spacing: 0.5px;
    width: 100%;
    margin: auto;
}

.btn-select-type {
    box-shadow: 0px 3px 16px #00000014;
    background-color: #ffffff;
    color: #2aa77f !important;
    border-radius: 6px;
}

.list-doctor-type {
    border: 1px solid #d6d6d6;
    border-radius: 6px 6px 15px 15px;
    width: 94%;
}

.list-doctor-type .dropdown-item {
    color: #2aa77f !important;
}

.doctor-list {
    margin: 0 auto;
    width: 97%;
    height: auto;
    padding: 20% 2% 2% 2%;
}

.img-doctor {
    display: inline-block;
    border-radius: 100px;
    height: 100px;
    width: 100px;
    overflow: hidden;
    box-shadow: 0px 6px 16px #20507221;
    border: 3px solid #FFFFFF;
}

.name-doctoc {
    margin: 0 auto;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: #205072;
    white-space: nowrap;
    width: 99%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bio-doctor {
    margin: 2% auto;
    font-size: 10px;
    color: #04a856;
    background-color: #e5f9dc;
    padding: 2% 10%;
    width: fit-content;
    border-radius: 50px;
}

.btn-select {
    background-image: linear-gradient(to right bottom, #63bcc9, #4ca0b5, #3a84a0, #2b6a8a, #205072);
    box-shadow: 15px 15px 40px #329D9C36;
    border-radius: 50px;
    padding: 5px;
    font-size: 12px;
    letter-spacing: 0.1px;
    width: 80% !important;
    margin: 2% auto;
}

.rating-doctor {
    font-size: 10px;
    color: #cccccc;
    margin: 2% auto;
}

.point-color {
    color: #FFD700;
}


/* ===Medical History=== */

.btn-add-lab {
    background-image: linear-gradient(to right bottom, #7be495, #5bd39d, #41c2a1, #32b0a1, #329d9c);
    box-shadow: 15px 15px 40px #329d9c36;
    border-radius: 30px;
    padding: 5px;
    font-size: 12px;
    letter-spacing: 0;
    margin-bottom: 3%;
    width: 50% !important;
}

.icon-history {
    background: #DEF0FE 0% 0% no-repeat padding-box;
    border-radius: 8px;
    padding: 2%;
}

.box-history {
    margin: 1% auto;
    margin-bottom: 2.7%;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 3px 16px #00000014;
    border: 1px solid #EBEBEB;
    border-radius: 10px;
    padding: 3% 1% 3% 3%;
}

.title-history {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #205072;
    margin: 0 auto;
}

.desc-history {
    letter-spacing: 0.1px;
    color: #888888;
    margin: 0 auto;
    margin-top: 2%;
    font-size: 14px;
}

.btn-count-history {
    margin: 2% auto;
    color: #ffffff;
    font-size: 10px;
    font-weight: 400;
    text-align: center;
    letter-spacing: 0.1px;
    background-color: #56C596;
    padding: 4px;
    border-radius: 25px;
}


/* ===History Mode=== */

.head-record {
    border-bottom: 1px solid #dedede;
    width: 100%;
    margin: 0 auto;
    margin-top: 2%;
}

.title-record {
    color: #205072;
    font-weight: 600;
    margin-bottom: 2%;
}

.box-record {
    margin: 1% auto;
    margin-top: 20%;
    margin-bottom: 1.7%;
    height: auto;
    min-height: 585px;
    background: #FFFFFF;
    box-shadow: 0px 3px 16px #00000014;
    border: 1px solid #EBEBEB;
    border-radius: 10px;
    padding: 3% 1% 6% 1%;
}

.list-record {
    margin: 0 auto;
    padding: 3% 3% 2% 3%;
    border-bottom: 1px solid #dedede;
}

.title-list-record {
    font-size: 16px;
    color: #205072;
    margin: 0 1%;
    width: 100%;
}

.desc-list-record {
    margin: 0;
    width: 100%;
}

.desc-record {
    letter-spacing: 0.1px;
    color: #1C1C1C;
    margin: 0 auto;
    font-size: 12px;
}

.date-record {
    font-size: 10px;
    color: #888888;
    float: right;
    margin: 2%;
}


/* ===Health Point=== */

.point-content {
    margin: 4% auto;
    width: 91%;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 3px 16px #00000014;
    border: 1px solid #EBEBEB;
    border-radius: 18px;
    padding: 3%;
    margin-top: 22%;
}

.point-content2 {
    margin: 4% auto;
    width: 91%;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 3px 16px #00000014;
    border: 1px solid #EBEBEB;
    border-radius: 18px;
    padding: 3%;
}

.point-status {
    font-size: 22px;
    font-weight: 600;
    color: #EC6C17;
    padding-bottom: 3px;
    margin: 2% 0% 0% 0%;
}

.point-desc {
    font-size: 16px;
    color: #04A856;
    padding-bottom: 3px;
    margin-bottom: 0%;
}

.point-progress {
    background-color: #F8E3A0;
    border-radius: 10px;
    height: 20px;
    margin-top: 2%;
}

.point-note {
    letter-spacing: 0.05px;
    color: #727272;
    font-size: 12px;
    margin: 3% 1% 1% 1%;
}

.point-member {
    letter-spacing: 0.05px;
    color: #727272;
    font-size: 10px;
    margin: 4% 1% 1% 1%;
}

.box-point {
    margin: 0% 1% 2.5% 1%;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 3px 16px #00000014;
    border: 1px solid #EBEBEB;
    border-radius: 10px;
    padding: 2%;
}

.note-point {
    letter-spacing: 0.05px;
    color: #727272;
    font-size: 10px;
    margin: 4% 0% 0% 0%;
}

.display-point {
    border-left: 1px solid#cacaca;
    padding: 0 2%;
}

.num-point {
    margin: 0 auto;
    text-align: center;
    font-size: 18px;
    color: #04A856;
}

.unit-point {
    color: #747474;
    margin: 0;
    font-size: 10px;
    text-align: right;
}

.btn-point {
    margin: 2% auto;
    font-size: 9px;
    font-weight: 400;
    text-align: center;
    letter-spacing: 0.4px;
    padding: 2px;
    background-image: linear-gradient(to right bottom, #64CB7E, #49d294, #41c2a1, #32b0a1, #2a8c8b);
    border-radius: 50px;
}


/* ===Health Check=== */

.head-topic {
    color: #205072;
    font-weight: 600;
    font-size: 17px;
    border-bottom: 1px solid #dedede;
    padding: 1% 2% 2% 2%;
    width: 100%;
    margin: 0 auto;
}

.title-mix-point {
    font-size: 13px;
    text-align: center;
    color: #205072;
    padding: 2%;
    margin: 0 auto;
}

.num-mix-point {
    margin: 0 auto;
    text-align: center;
    font-size: 28px;
    color: #04A856;
}

.content-p {
    font-size: 13px;
    text-indent: 20px;
    color: #205072;
    line-height: 1.7;
    padding: 2%;
    margin: 0 auto;
}

.mix-point {
    background: #FFF1E4 0% 0% no-repeat padding-box;
    border-radius: 12px;
    padding: 8%;
}

.content-div {
    width: 100%;
    margin: 0;
}

.btn-mix-point {
    margin: 2% auto;
    font-size: 10px;
    font-weight: 400;
    text-align: center;
    letter-spacing: 0.4px;
    padding: 5px;
    background-image: linear-gradient(to right bottom, #64CB7E, #49d294, #41c2a1, #32b0a1, #2a8c8b);
    border-radius: 50px;
}


/* ===Upload File=== */

.form-content {
    margin: 4% auto;
    margin-top: 23%;
    width: 91%;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 3px 16px #00000014;
    border: 1px solid #EBEBEB;
    border-radius: 18px;
    padding: 4%;
}

.label-form {
    color: #205072;
    font-weight: 600;
    font-size: 18px;
    padding: 1% 2% 2% 2%;
    width: 100%;
    margin: 0;
}

.input-form {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 13px 34px #329D9C21;
    border: 1px solid #7CC4A4;
    border-radius: 7px;
    margin: 0;
    margin-bottom: 3% !important;
}

.input-form-field {
    width: 100%;
    padding: 5px 10px 5px 15px;
    font-size: 14px;
    color: #2ab993;
    outline: none;
    border: none;
    border-radius: 6px 0px 0px 6px;
}

.input-form-date {
    width: 100%;
    padding: 9px 10px 9px 15px;
    font-size: 14px;
    color: #2ab993;
    outline: none;
    border: none;
    border-radius: 6px;
}

.icon-form {
    padding: 10px;
    background: white;
    border-radius: 0px 6px 6px 0px;
    color: #a5a5a5;
    font-size: 20px;
    text-align: center;
}

.btn-next-form {
    background-image: linear-gradient(to right bottom, #7be495, #5bd39d, #41c2a1, #32b0a1, #329d9c);
    box-shadow: 15px 15px 40px #329D9C36;
    border-radius: 20px;
    padding: 6px;
    font-size: 14px;
    letter-spacing: 0.5px;
    margin: auto;
    width: 97% !important;
}


/* ===Doctor Detail=== */

.profile-h {
    height: auto;
    min-height: 580px;
    padding: 7% 4%;
    border-radius: 18px;
    background-color: #ffffff;
    box-shadow: 0px 3px 16px #00000014;
}

.doctor-detail {
    margin: 0 auto;
    margin-top: 22%;
    width: 92%;
    height: auto;
    min-height: 588px;
    padding: 7% 4%;
    border-radius: 18px;
    background-color: #ffffff;
    box-shadow: 0px 3px 16px #00000014;
}

.img-profile {
    display: inline-block;
    border-radius: 100px;
    height: 135px;
    width: 135px;
    overflow: hidden;
    box-shadow: 0px 6px 16px #20507221;
    border: 5px solid #FFFFFF;
}

.name-profile {
    margin: 0 auto;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #205072;
}

.bio-profile {
    margin: 1% auto;
    font-size: 12px;
    letter-spacing: 0.1px;
    color: #205072;
    background-color: #dbf2f9;
    padding: 5px 15px;
    width: fit-content;
    border-radius: 5px;
}

.rating-profile {
    font-size: 14px;
    color: #cccccc;
    margin: 2% auto;
}

.count-rating {
    font-size: 14px;
    color: #205072;
    letter-spacing: 0.5px;
}

.note-profile {
    color: #757575;
    font-size: 12px;
    margin: 0 auto;
    letter-spacing: 0.3px;
}

.icon-action {
    color: #ffffff !important;
    background-image: linear-gradient(to right bottom, #44dc98, #41c2a1, #32b0a1, #329d9c);
    box-shadow: 15px 15px 40px #329D9C36;
    font-size: 18px;
    padding: 8px;
    border-radius: 7px;
    width: 100% !important;
}

.m-action {
    margin: 2% 12%;
}

.btn-booking {
    background-image: linear-gradient(to right bottom, #63bcc9, #4ca0b5, #3a84a0, #2b6a8a, #205072);
    box-shadow: 15px 15px 40px #329D9C36;
    border-radius: 8px;
    padding: 10px;
    font-size: 16px;
    letter-spacing: 0.1px;
    width: 100% !important;
    margin: 2% auto;
    margin-top: 5%;
}

.detail-collapse {
    color: #255c7d !important;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-align: left;
    padding: 10px;
}

.head-collapse {
    padding: 2px !important;
    border-left: 5px solid #255c7d;
}

.content-doc {
    color: #f0f4f8;
    font-size: 14px;
    text-indent: 20px;
    margin-bottom: 4%;
    padding-bottom: 4%;
    border-bottom: 1px solid #80808075;
}

.ul-doc {
    color: #343a40;
    font-size: 14px;
    margin-bottom: 0%;
}

.ul-doc li {
    margin-bottom: 2%;
}

.img-booking-doc {
    display: inline-block;
    border-radius: 100px;
    height: 90px;
    width: 90px;
    overflow: hidden;
    box-shadow: 0px 6px 16px #20507221;
    border: 3px solid #FFFFFF;
    margin: 6% auto;
}

.name-booking-doc {
    font-size: 18px;
    font-weight: 500;
    color: #205072;
    text-align: left;
    margin-bottom: 5px;
}

.bio-booking-doc {
    font-size: 12px;
    letter-spacing: 0.1px;
    color: #495057;
    background-color: #f1f1f1;
    padding: 3px 10px;
    width: fit-content;
    border-radius: 5px;
    margin-bottom: 5px;
}

.note-booking-doc {
    color: #757575;
    font-size: 12px;
    letter-spacing: 0.3px;
    text-align: left;
    margin-bottom: 1%;
}


/* ===BMI Form=== */

.input-number {
    width: 100%;
    padding: 8px;
    font-size: 16px;
    color: #2ab993;
    outline: none;
    border: none;
    border-radius: 6px;
}

.label-form-in {
    color: #205072;
    font-weight: 600;
    font-size: 16px;
    padding-top: 6%;
    width: 100%;
    float: right;
}

.collapse-input {
    color: #205072 !important;
    font-weight: 600;
    font-size: 16px;
    text-align: left;
    border-left: 5px solid #205072 !important;
}


/* ===More Page=== */

.head-more {
    height: 327px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border-radius: 0px 0px 34px 34px;
}

.qr-code-profile {
    width: 91%;
    height: auto;
    margin: 0 auto;
    margin-top: 91%;
    padding: 2% 12% 2% 12%;
    background-color: #ffffff;
    border-radius: 13px;
}

.accept-true {
    margin: 62% 1% 2% 1%;
    padding: 2%;
    width: 90% !important;
    position: absolute;
    border: 4px solid #a0c7a0;
    border-radius: 12px;
}

.btn-cancel-data {
    background-image: linear-gradient(to right bottom, #7be495, #5bd39d, #41c2a1, #32b0a1, #329d9c);
    box-shadow: 15px 15px 40px #329d9c36;
    border-radius: 50px;
    padding: 7px;
    font-size: 13px;
    letter-spacing: 0;
    margin: 1%;
    width: 98% !important;
}

.qr-text {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #205072;
    margin-bottom: 2px;
}

.qr-desc {
    text-align: center;
    color: #6c757d;
    font-size: 14px;
}

.btn-add-user {
    background-image: linear-gradient(to right bottom, #7be495, #5bd39d, #41c2a1, #32b0a1, #329d9c);
    box-shadow: 15px 15px 40px #329d9c36;
    border-radius: 10px;
    padding: 10px;
    font-size: 14px;
    letter-spacing: 0;
    margin: 64% 1% 2% 1%;
    width: 90% !important;
    position: absolute;
}

.btn-edit-user {
    box-shadow: 15px 15px 40px #329d9c36;
    border-radius: 10px;
    padding: 10px;
    font-size: 14px;
    letter-spacing: 0;
    background: linear-gradient(to right, #f5af19, #ef6d30);
}

.waiting-accept {
    margin: 63% 1% 2% 1%;
    width: 90% !important;
    position: absolute;
}

.status-accept {
    text-align: center;
    margin-bottom: 0;
    font-size: 14px;
    color: #828282;
}


/* ====Pregnant Record=== */

#pregnant-history {
    padding: 3.2% 3.5%;
}

.pregnant-content {
    margin: 0 auto;
    width: 91%;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 3px 16px #00000014;
    border: 1px solid #EBEBEB;
    border-radius: 18px;
    padding: 3%;
    margin-top: 22%;
}

.pregnant-content-baby {
    margin: 0 auto;
    width: 91%;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 3px 16px #00000014;
    border: 1px solid #EBEBEB;
    border-radius: 18px;
    padding: 3%;
    margin-top: 2%;
}

.icon-pregnant {
    margin: 10% auto;
}

.now-status {
    font-size: 20px;
    font-weight: 600;
    color: #205072;
    margin: 2% 0% 0% 0%;
}

.pregnant-desc {
    font-size: 14px;
    color: #205072;
    padding-bottom: 3px;
    margin-bottom: 0%;
}

.info-date {
    letter-spacing: 0.05px;
    color: #727272;
    font-size: 11px;
    margin: 1% 0;
}

.chart-pregnant {
    border-top: 1px solid #D8D8D8;
    margin-top: 2%;
}

.title-week {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #205072;
    margin: 0 auto;
    margin-top: 1.5%;
}

.status-pregnant {
    margin: 2px auto;
    text-align: center;
    font-size: 20px;
    color: #04A856;
}

.btn-read-info {
    margin: 2% auto;
    font-size: 10px;
    font-weight: 400;
    text-align: center;
    letter-spacing: 0.4px;
    padding: 3px;
    background-image: linear-gradient(to right bottom, #64CB7E, #49d294, #41c2a1, #32b0a1, #2a8c8b);
    border-radius: 50px;
}


/* ===pregnant_detail=== */

.pregnant-history-card {
    margin: 5% auto;
    margin-top: 22%;
    width: 92%;
    height: auto;
    min-height: 588px;
    padding: 4% 4%;
    border-radius: 18px;
    background-color: #ffffff;
    box-shadow: 0px 3px 16px #00000014;
}

.content_info_mom {
    color: #205072;
    border: 1px solid #adb5bd4d;
    border-radius: 15px;
    box-shadow: 0px 6px 16px #20507221;
    margin: 3% auto;
    padding: 5%;
    text-align: left;
}

.ul-info {
    color: #44474a;
    font-size: 14px;
    margin-bottom: 0%;
    padding-left: 10%;
}

.img-baby {
    border-radius: 10px;
}

.title-baby {
    letter-spacing: 0.05px;
    color: #727272;
    font-size: 12px;
    margin: 3% 0% 0% 0%;
    text-align: left;
}

.desc-pregnant-alt {
    background-color: rgb(241, 241, 241);
    padding: 1% 3% 3% 4%;
    border-radius: 10px;
    margin: 2% auto;
    width: 98%;
}


/* ===pregnant_record_detail=== */

.record_detail {
    background-color: #f1ebe3;
    height: auto;
    border-radius: 15px;
    padding: 3%;
    margin-bottom: 3%;
}

.record_detail2 {
    background-color: #ffffff;
    border: 5px solid #badcc1;
    height: auto;
    border-radius: 15px;
    padding: 3%;
    margin-bottom: 3%;
}

.record_detail3 {
    background-color: #f1ebe3;
    height: auto;
    border-radius: 15px;
    padding: 1%;
    margin-bottom: 3%;
}

.label-record {
    margin: 4px auto;
    color: #495057;
    font-size: 13px;
    border-bottom: 1px solid #d0d0d0;
    padding: 4px;
}

.label-record2 {
    margin: 4px auto;
    color: #495057;
    font-size: 12px;
    border-bottom: 1px solid #d0d0d0;
    padding: 4px;
}

.result-record {
    font-size: 20px;
    color: #343a40;
}

.note_record {
    font-size: 14px;
    letter-spacing: 0.1px;
    margin: 0;
    padding: 2px 5px;
}

.r-normal {
    font-size: 18px;
    color: #04a856;
}

.r-abnormal {
    font-size: 18px;
    color: #495057;
}

.r-abnormal2 {
    font-size: 18px;
    color: #bb0012;
}

.r-abnormal3 {
    font-size: 14px;
    color: #495057;
}

.pd-8 {
    padding: 8px;
}


/* ===vaccine_history_baby=== */

.title-vaccine {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #205072;
    margin: 0 auto;
    margin-top: 1%;
}

.title-vaccine-num {
    letter-spacing: 0.05px;
    color: #727272;
    font-size: 12px;
    margin: 2% 0% 0% 0%;
    text-align: left;
}

.title-vaccine-complete {
    letter-spacing: 0.05px;
    color: #04a856;
    font-size: 12px;
    margin: 2% 0% 0% 0%;
    text-align: left;
}

.title-vaccine-false {
    letter-spacing: 0.05px;
    color: #bb0012;
    font-size: 12px;
    margin: 2% 0% 0% 0%;
    text-align: left;
}

.box-vaccine {
    margin: 0% 1% 2.5% 1%;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 3px 16px #00000014;
    border: 1px solid #EBEBEB;
    border-radius: 10px;
    padding: 0;
}

.img-vaccine {
    border-radius: 10px 0px 0px 10px;
    background-color: #9b9b9b;
}

.img-lab-false {
    border-radius: 10px 0px 0px 10px;
    background-color: #b73131;
}

.img-lab-true {
    border-radius: 10px 0px 0px 10px;
    background-color: #1f8f5c;
}

.bd-bottom-gray {
    border-bottom: 1px solid #dedede;
}

.vaccine_true {
    background-color: #ffffff;
    border: 5px solid #badcc1;
    height: auto;
    border-radius: 15px;
    padding: 2%;
    margin: 3% 4%;
}

.vaccine_false {
    background-color: #ffffff;
    border: 5px solid #bfc3c7;
    height: auto;
    border-radius: 15px;
    padding: 2%;
    margin: 3% 4%;
}

.vaccine_false2 {
    background-color: #ffffff;
    border: 5px solid #deaaaa;
    height: auto;
    border-radius: 15px;
    padding: 2%;
    margin: 3% 4%;
}

.name-profile-baby {
    margin: 0 auto;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #205072;
}

.note-profile-baby {
    color: #757575;
    font-size: 12px;
    margin: 0 auto;
    margin-bottom: 2%;
    letter-spacing: 0.3px;
}

.title-baby2 {
    letter-spacing: 0.05px;
    color: #727272;
    font-size: 13px;
    margin: 2% 0% 0% 0%;
    text-align: left;
}

.title-week2 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #205072;
    margin: 0 auto;
}

.result-quiz {
    color: #6E6E6E;
    font-size: 18px;
    padding: 15px;
    background-color: #FFEFCF;
    border-radius: 15px;
    width: 92%;
    margin: 2% auto;
}

.point-quiz {
    font-size: 28px;
}

.note-point-quiz {
    color: #205072;
    font-size: 16px;
    width: 100%;
}

.result-status-quiz {
    color: #04A856;
    font-size: 18px;
    font-weight: 600;
}

.bmi-content-profile {
    margin: 4% auto;
    width: 93%;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 3px 16px #00000014;
    border: 1px solid #EBEBEB;
    border-radius: 18px;
    padding: 4% 4% 4% 1%;
    margin-top: 84%;
}


/* Medical History */

.result-lab-abnormal {
    background-color: #bb0012;
    color: #ffffff;
    font-size: 16px;
    padding: 2px 10px;
    border-radius: 30px;
}

.result-lab-normal {
    background-color: #04a856;
    color: #ffffff;
    font-size: 16px;
    padding: 2px 10px;
    border-radius: 30px;
}

.result-old {
    background-color: #f1ebe3;
    height: auto;
    border-radius: 15px;
    padding: 1% 2% 2% 2%;
    margin: 2% 0;
}

.f-26 {
    font-size: 26px;
}


/* ===Tab vaccine mother=== */

.head-blood {
    margin: 0 auto;
    margin-bottom: 2%;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #205072;
}

.status-w {
    margin: 0 auto;
    padding: 10% 10%;
    border-radius: 10px;
    line-height: 1.5;
    text-align: center;
    font-size: 14px;
    color: #ffffff;
    background-color: #04A856;
}

.btn-select-activity {
    box-shadow: 0px 3px 16px #00000014;
    background-color: #ffffff;
    color: #2aa77f !important;
    border-radius: 10px;
    padding: 10px 10px 10px 20px;
    text-align: left;
}

.list-activity {
    border: 1px solid #d6d6d6;
    border-radius: 15px;
    width: 93%;
}


/* Maketplace page */

.btn-give-reword {
    background-image: linear-gradient(to right bottom, #7be495, #5bd39d, #41c2a1, #32b0a1, #329d9c);
    box-shadow: 15px 15px 40px #329d9c36;
    border-radius: 6px;
    padding: 6px;
    font-size: 14px;
    margin: auto;
    width: 97% !important;
}

.desc-discount {
    font-size: 13px;
    margin: 8px auto;
}

.discount-box {
    margin: 1% auto;
    font-size: 12px;
    color: #e05900;
    background-color: #ffe8d3;
    padding: 5px 15px;
    width: fit-content;
    border-radius: 5px;
}

.point-content-m {
    margin: 1% auto;
    width: 91%;
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 3px 16px #00000014;
    border: 1px solid #EBEBEB;
    border-radius: 15px;
    padding: 2%;
    margin-top: 22%;
}

.point-status-m {
    font-size: 16px;
    font-weight: 600;
    color: #EC6C17;
    margin: 2% 0% 0% 0%;
}

.point-desc-m {
    font-size: 16px;
    color: #04A856;
    margin-bottom: 0%;
}

.point-expire {
    letter-spacing: 0.05px;
    color: #727272;
    font-size: 12px;
    margin: 0;
}

.reword-gift {
    height: 160px;
    background-image: url(../img/gift2.jpg);
    background-position: left;
    background-size: cover;
    box-shadow: 0px 3px 16px #00000014;
    border-radius: 18px;
    padding: 32% 0;
    text-align: center;
}

.reword-food {
    height: 160px;
    background-image: url(../img/marketplace/food3.jpg);
    background-position: center;
    background-size: cover;
    box-shadow: 0px 3px 16px #00000014;
    border-radius: 18px;
    padding: 32% 0;
    text-align: center;
}

.reword-type {
    margin: 0 auto;
    font-size: 16px;
    color: #ffffff;
    padding: 5%;
    background-color: #31282378;
}

.btn-reword {
    width: 60% !important;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
    letter-spacing: 0.1px;
    background-color: #f16000;
    padding: 5px;
    border-radius: 25px;
    margin-top: 2%;
}


/* ===Shop Detail=== */

.desc_shop {
    list-style: none;
    font-size: 12px;
    padding: 0 5%;
    line-height: 1.8;
    color: #495057;
}

.point-reword {
    width: 60% !important;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    letter-spacing: 0.1px;
    background-color: #f16000;
    color: #ffffff;
    padding: 5px;
    border-radius: 25px;
    margin: 0 auto;
    margin-bottom: 4%;
}


/* ===Register Patient=== */

.address_patient {
    border: 2px solid #2ab993;
    border-radius: 15px;
    padding: 4%;
    margin-bottom: 5px;
}


/* ===Mother Kid=== */

.radi-15-0 {
    border-radius: 15px 15px 0 0;
}

.blog-content {
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0px 3px 16px #00000014;
    padding-bottom: 5%;
}

.blog-writer {
    color: #757575;
    font-size: 11px;
    margin: 0 auto;
}

.blog-title {
    margin: 4px auto;
    font-size: 16px;
    font-weight: 600;
    color: #205072;
}

.blog-p-content {
    font-size: 12px;
    line-height: 1.8;
    color: #495057;
    padding: 2%;
    text-indent: 24px;
    margin-bottom: 1%;
}

.mother-km {
    background-color: #ffffff;
    padding: 4%;
    border-radius: 10px;
    box-shadow: 0px 3px 16px #00000014;
}

.head-km-box {
    font-size: 15px;
    font-weight: 600;
    color: #205072;
    margin: 0;
    padding: 3px 2px 0 6px;
}

.head-baby-box {
    font-size: 16px;
    font-weight: 600;
    color: #205072;
    margin: 0;
    padding: 3px 3px 7px 7px;
}

.mother-mood {
    background-color: #ffffff;
    padding: 2%;
    border-radius: 15px;
    box-shadow: 0px 3px 16px #00000014;
    margin-top: 2%;
}

.title-board {
    font-size: 12px;
    font-weight: 600;
    color: #205072;
    margin: 3% 0 0 0;
    white-space: nowrap;
    width: 99%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.title-c {
    font-size: 10px;
    color: #727272;
    margin: 0;
}

.desc-c {
    letter-spacing: 0.1px;
    color: #888888;
    margin: 0 auto;
    margin-top: 2%;
    font-size: 10px;
}

.title-list-a {
    font-size: 14px;
    font-weight: 600;
    color: #205072;
    margin: 0 auto;
    margin-top: 1.5%;
}

.title-clinic-a {
    letter-spacing: 0.05px;
    color: #727272;
    font-size: 13px;
    margin: 2% 0% 0% 0%;
    text-align: left;
}

.desc-list-a {
    font-size: 12px;
    text-indent: 20px;
    margin: 0;
}

.booking-list-a {
    background-color: #ffffff;
    padding: 5% 3%;
    border-radius: 0 0 15px 15px;
}

.btn-add-baby {
    background-image: linear-gradient(to right bottom, #7be495, #5bd39d, #41c2a1, #32b0a1, #329d9c);
    box-shadow: 15px 15px 40px #329d9c36;
    border-radius: 10px;
    padding: 10px;
    font-size: 14px;
    letter-spacing: 0;
    margin: 1.5% auto;
}