diff --git a/assets/hanan/fisik-2.html b/assets/hanan/fisik-2.html
index dec401e..37a992f 100644
--- a/assets/hanan/fisik-2.html
+++ b/assets/hanan/fisik-2.html
@@ -300,159 +300,158 @@
 
       <!-- tanda vital -->
       <div
-        class="d-flex"
-        style="
-          flex-direction: column;
-          align-items: flex-start;
-          gap: 20px;
-          align-self: stretch;
-        "
+        class="accordion accordion-light accordion-light-borderless accordion-svg-toggle"
+        id="accordionExample7"
       >
-        <div class="row d-flex" style="width: 554px; gap: 12px">
-          <i class="ki ki-minus"></i>TANDA VITAL
-        </div>
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="col">Denyut Nadi</div>
-            <div class="col-md-auto d-flex align-items-center">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                style="margin: 0 auto"
-              />
-            </div>
-            <div class="col col-md-2">x/menit</div>
-          </div>
-          <div
-            class="d-flex col-md-6"
-            style="
-              height: 36px;
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="col-md-4">Ritme denyut nadi</div>
-            <div class="d-flex align-items-center col-md-4">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Reguler
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-4">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Irreguler
-              </label>
+        <div class="card">
+          <div class="card-header" id="headingOne7">
+            <div
+              class="card-title"
+              data-toggle="collapse"
+              data-target="#collapseOne7"
+            >
+              <span class="svg-icon svg-icon-primary">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                  width="24px"
+                  height="24px"
+                  viewBox="0 0 24 24"
+                  version="1.1"
+                >
+                  <g
+                    stroke="none"
+                    stroke-width="1"
+                    fill="none"
+                    fill-rule="evenodd"
+                  >
+                    <polygon points="0 0 24 0 24 24 0 24"></polygon>
+                    <path
+                      d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z"
+                      fill="#000000"
+                      fill-rule="nonzero"
+                    ></path>
+                    <!-- <path
+                      d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z"
+                      fill="#000000"
+                      fill-rule="nonzero"
+                      opacity="0.3"
+                      transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "
+                    ></path> -->
+                  </g>
+                </svg>
+              </span>
+              <div class="card-label pl-4">TANDA VITAL</div>
             </div>
           </div>
-        </div>
+          <div
+            id="collapseOne7"
+            class="collapse show"
+            data-parent="#accordionExample7"
+          >
+            <div class="card-body px-12">
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <label class="col-6 col-form-label">Denyut Nadi</label>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        type="text"
+                      />
+                    </div>
+                    <div class="col-2 d-flex align-items-center">x/menit</div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <label class="col-4 col-form-label"
+                      >Ritme denyut nadi</label
+                    >
+                    <div class="col-4 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Reguler
+                      </label>
+                    </div>
+                    <div class="col-4 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Irreguler
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
 
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="col">Laju pernafasan</div>
-            <div class="col-md-auto d-flex align-items-center">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                style="margin: 0 auto"
-              />
-            </div>
-            <div class="col col-md-2">x/menit</div>
-          </div>
-          <div
-            class="d-flex col-md-6"
-            style="
-              height: 36px;
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="col-md-4">Pola Nafas</div>
-            <div class="d-flex align-items-center col-md-4">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Normal
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-4">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Tidak Normal
-              </label>
-            </div>
-          </div>
-        </div>
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <label class="col-6 col-form-label">Laju pernafasan</label>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        type="text"
+                      />
+                    </div>
+                    <div class="col-2 d-flex align-items-center">x/menit</div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <label class="col-4 col-form-label">Pola Nafas</label>
+                    <div class="col-4 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Normal
+                      </label>
+                    </div>
+                    <div class="col-4 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Tidak Normal
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
 
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="col">Tekanan Darah</div>
-            <div class="col-md-auto d-flex align-items-center">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                style="margin: 0 auto"
-              />
-            </div>
-            <div class="col col-md-2">mmHg</div>
-          </div>
-          <div
-            class="d-flex col-md-6"
-            style="
-              height: 36px;
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="col-md-4">Suhu</div>
-            <div class="d-flex align-items-center col-md-4">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Demam
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-4">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                style="margin: 0 auto"
-              />
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <label class="col-6 col-form-label">Tekanan Darah</label>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        type="text"
+                      />
+                    </div>
+                    <div class="col-2 d-flex align-items-center">mmHg</div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <label class="col-4 col-form-label">Suhu</label>
+                    <div class="col-4 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Demam
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -461,146 +460,139 @@
 
       <!-- status gizi -->
       <div
-        class="d-flex pt-10"
-        style="
-          flex-direction: column;
-          align-items: flex-start;
-          gap: 20px;
-          align-self: stretch;
-        "
+        class="accordion accordion-light accordion-light-borderless accordion-svg-toggle"
+        id="accordionStatusGizi"
       >
-        <div class="row d-flex" style="width: 554px; gap: 12px">
-          <i class="ki ki-minus"></i>STATUS GIZI
-        </div>
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="col">Berat badan</div>
-            <div class="col-md-auto d-flex align-items-center">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                style="margin: 0 auto"
-              />
+        <div class="card">
+          <div class="card-header" id="headingStatusGizi">
+            <div
+              class="card-title"
+              data-toggle="collapse"
+              data-target="#collapseStatusGizi"
+            >
+              <span class="svg-icon svg-icon-primary">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                  width="24px"
+                  height="24px"
+                  viewBox="0 0 24 24"
+                  version="1.1"
+                >
+                  <g
+                    stroke="none"
+                    stroke-width="1"
+                    fill="none"
+                    fill-rule="evenodd"
+                  >
+                    <polygon points="0 0 24 0 24 24 0 24"></polygon>
+                    <path
+                      d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z"
+                      fill="#000000"
+                      fill-rule="nonzero"
+                    ></path>
+                    <!-- <path
+                      d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z"
+                      fill="#000000"
+                      fill-rule="nonzero"
+                      opacity="0.3"
+                      transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "
+                    ></path> -->
+                  </g>
+                </svg>
+              </span>
+              <div class="card-label pl-4">STATUS GIZI</div>
             </div>
-            <div class="col col-md-2">kg</div>
           </div>
           <div
-            class="d-flex col-md-6"
-            style="
-              height: 36px;
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
+            id="collapseStatusGizi"
+            class="collapse show"
+            data-parent="#accordionStatusGizi"
           >
-            <div class="col-md-6">Tinggi badan</div>
-            <div class="d-flex align-items-center col-md-4">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                style="margin: 0 auto"
-              />
-            </div>
-            <div class="col col-md-2">cm</div>
-          </div>
-        </div>
+            <div class="card-body px-12">
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <label class="col-6 col-form-label">Berat badan</label>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        type="text"
+                      />
+                    </div>
+                    <div class="col-2 d-flex align-items-center">kg</div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <label class="col-6 col-form-label">Tinggi badan</label>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        type="text"
+                      />
+                    </div>
+                    <div class="col-2 d-flex align-items-center">cm</div>
+                  </div>
+                </div>
+              </div>
 
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="col">Lingkar Perut</div>
-            <div class="col-md-auto d-flex align-items-center">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                style="margin: 0 auto"
-              />
-            </div>
-            <div class="col col-md-2">cm</div>
-          </div>
-          <div
-            class="d-flex col-md-6"
-            style="
-              height: 36px;
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="col-md-6">BMI</div>
-            <div class="d-flex align-items-center col-md-4">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                style="margin: 0 auto"
-              />
-            </div>
-            <div class="col col-md-2"></div>
-          </div>
-        </div>
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <label class="col-6 col-form-label">Lingkar perut</label>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        type="text"
+                      />
+                    </div>
+                    <div class="col-2 d-flex align-items-center">cm</div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <label class="col-6 col-form-label">BMI</label>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        type="text"
+                      />
+                    </div>
+                    <div class="col-2 d-flex align-items-center"></div>
+                  </div>
+                </div>
+              </div>
 
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="col">Lingkar pinggang/panggul</div>
-            <div class="col-md-auto d-flex align-items-center">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                style="margin: 0 auto"
-              />
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <label class="col-6 col-form-label"
+                      >Lingkar pinggang/panggul</label
+                    >
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        type="text"
+                      />
+                    </div>
+                    <div class="col-2 d-flex align-items-center">cm</div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <label class="col-6 col-form-label">Klasifikasi</label>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        type="text"
+                      />
+                    </div>
+                    <div class="col-2 d-flex align-items-center"></div>
+                  </div>
+                </div>
+              </div>
             </div>
-            <div class="col col-md-2">cm</div>
-          </div>
-          <div
-            class="d-flex col-md-6"
-            style="
-              height: 36px;
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="col-md-6">Klasifikasi</div>
-            <div class="d-flex align-items-center col-md-4">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                style="margin: 0 auto"
-              />
-            </div>
-            <div class="col col-md-2"></div>
           </div>
         </div>
       </div>
@@ -608,151 +600,155 @@
 
       <!-- keadaan umum -->
       <div
-        class="d-flex pt-10"
-        style="
-          flex-direction: column;
-          align-items: flex-start;
-          gap: 20px;
-          align-self: stretch;
-        "
+        class="accordion accordion-light accordion-light-borderless accordion-svg-toggle"
+        id="accordionKeadaanUmum"
       >
-        <div class="row d-flex" style="width: 554px; gap: 12px">
-          <i class="ki ki-minus"></i>KEADAAN UMUM
-        </div>
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="col-md-6">Kesadaran</div>
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Normal
-              </label>
+        <div class="card">
+          <div class="card-header" id="headingKU">
+            <div
+              class="card-title"
+              data-toggle="collapse"
+              data-target="#collapseKeadaanUmum"
+            >
+              <span class="svg-icon svg-icon-primary">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                  width="24px"
+                  height="24px"
+                  viewBox="0 0 24 24"
+                  version="1.1"
+                >
+                  <g
+                    stroke="none"
+                    stroke-width="1"
+                    fill="none"
+                    fill-rule="evenodd"
+                  >
+                    <polygon points="0 0 24 0 24 24 0 24"></polygon>
+                    <path
+                      d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z"
+                      fill="#000000"
+                      fill-rule="nonzero"
+                    ></path>
+                    <!-- <path
+                      d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z"
+                      fill="#000000"
+                      fill-rule="nonzero"
+                      opacity="0.3"
+                      transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "
+                    ></path> -->
+                  </g>
+                </svg>
+              </span>
+              <div class="card-label pl-4">KEADAAN UMUM</div>
             </div>
           </div>
           <div
-            class="d-flex col-md-6"
-            style="
-              height: 36px;
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
+            id="collapseKeadaanUmum"
+            class="collapse show"
+            data-parent="#accordionKeadaanUmum"
           >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Tidak Normal
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                style="margin: 0 auto"
-              />
-            </div>
-          </div>
-        </div>
+            <div class="card-body px-12">
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <label class="col-6 col-form-label">Kesadaran</label>
+                    <div class="col-6 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Normal
+                      </label>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Tidak Normal
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
 
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="col-md-6">Sikap dan tingkah laku</div>
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Normal
-              </label>
-            </div>
-          </div>
-          <div
-            class="d-flex col-md-6"
-            style="
-              height: 36px;
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Tidak Normal
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                style="margin: 0 auto"
-              />
-            </div>
-          </div>
-        </div>
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <label class="col-6 col-form-label"
+                      >Sikap dan tingkah laku</label
+                    >
+                    <div class="col-6 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Normal
+                      </label>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Tidak Normal
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
 
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="col-md-6">Kontak psikis / perhatian</div>
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Normal
-              </label>
-            </div>
-          </div>
-          <div
-            class="d-flex col-md-6"
-            style="
-              height: 36px;
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Tidak Normal
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                style="margin: 0 auto"
-              />
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <label class="col-6 col-form-label"
+                      >Kontak psikis / perhatians</label
+                    >
+                    <div class="col-6 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Normal
+                      </label>
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Tidak Normal
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -761,178 +757,172 @@
 
       <!-- kepala wajah -->
       <div
-        class="d-flex pt-10"
-        style="
-          flex-direction: column;
-          align-items: flex-start;
-          gap: 20px;
-          align-self: stretch;
-        "
+        class="accordion accordion-light accordion-light-borderless accordion-svg-toggle"
+        id="accordionKepalaWajah"
       >
-        <div class="row d-flex" style="width: 554px; gap: 12px">
-          <i class="ki ki-minus"></i>KEPALA WAJAH
-        </div>
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Normal
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
+        <div class="card">
+          <div class="card-header" id="headingKW">
+            <div
+              class="card-title"
+              data-toggle="collapse"
+              data-target="#collapseKepalaWajah"
+            >
+              <span class="svg-icon svg-icon-primary">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                  width="24px"
+                  height="24px"
+                  viewBox="0 0 24 24"
+                  version="1.1"
+                >
+                  <g
+                    stroke="none"
+                    stroke-width="1"
+                    fill="none"
+                    fill-rule="evenodd"
+                  >
+                    <polygon points="0 0 24 0 24 24 0 24"></polygon>
+                    <path
+                      d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z"
+                      fill="#000000"
+                      fill-rule="nonzero"
+                    ></path>
+                    <!-- <path
+                      d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z"
+                      fill="#000000"
+                      fill-rule="nonzero"
+                      opacity="0.3"
+                      transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "
+                    ></path> -->
+                  </g>
+                </svg>
+              </span>
+              <div class="card-label pl-4">KEPALA WAJAH</div>
             </div>
           </div>
           <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
+            id="collapseKepalaWajah"
+            class="collapse show"
+            data-parent="#accordionKepalaWajah"
           >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Deformitas
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
-            </div>
-          </div>
-        </div>
+            <div class="card-body px-12">
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Normal
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Deformitas
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
 
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Luka
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
-            </div>
-          </div>
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Tumor
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
-            </div>
-          </div>
-        </div>
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Luka
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Tumor
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
 
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Kepala benjol
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
-            </div>
-          </div>
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Lain-lain
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Kepala benjol
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Lain-lain
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -941,288 +931,250 @@
 
       <!-- mata -->
       <div
-        class="d-flex pt-10"
-        style="
-          flex-direction: column;
-          align-items: flex-start;
-          gap: 20px;
-          align-self: stretch;
-        "
+        class="accordion accordion-light accordion-light-borderless accordion-svg-toggle"
+        id="accordionMata"
       >
-        <div class="row d-flex" style="width: 554px; gap: 12px">
-          <i class="ki ki-minus"></i>KEPALA WAJAH
-        </div>
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Normal
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
+        <div class="card">
+          <div class="card-header" id="headingMata">
+            <div
+              class="card-title"
+              data-toggle="collapse"
+              data-target="#collapseMata"
+            >
+              <span class="svg-icon svg-icon-primary">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                  width="24px"
+                  height="24px"
+                  viewBox="0 0 24 24"
+                  version="1.1"
+                >
+                  <g
+                    stroke="none"
+                    stroke-width="1"
+                    fill="none"
+                    fill-rule="evenodd"
+                  >
+                    <polygon points="0 0 24 0 24 24 0 24"></polygon>
+                    <path
+                      d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z"
+                      fill="#000000"
+                      fill-rule="nonzero"
+                    ></path>
+                    <!-- <path
+                      d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z"
+                      fill="#000000"
+                      fill-rule="nonzero"
+                      opacity="0.3"
+                      transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "
+                    ></path> -->
+                  </g>
+                </svg>
+              </span>
+              <div class="card-label pl-4">MATA</div>
             </div>
           </div>
           <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
+            id="collapseMata"
+            class="collapse show"
+            data-parent="#accordionMata"
           >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Strabismus
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
-            </div>
-          </div>
-        </div>
+            <div class="card-body px-12">
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Normal
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Strabismus
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
 
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Hiperemis
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
-            </div>
-          </div>
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Ikterik
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
-            </div>
-          </div>
-        </div>
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Hiperemis
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Ikterik
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
 
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Sekret
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
-            </div>
-          </div>
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Pterigium
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
-            </div>
-          </div>
-        </div>
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Sekret
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Pterigium
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
 
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Lensa keruh
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
-            </div>
-          </div>
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Anemis
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
-            </div>
-          </div>
-        </div>
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Lensa keruh
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Anemis
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
 
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Merah
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
-            </div>
-          </div>
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Lain-lain
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Merah
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Lain-lain
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -1231,97 +1183,115 @@
 
       <!-- persepsi warna  -->
       <div
-        class="d-flex pt-10"
-        style="
-          flex-direction: column;
-          align-items: flex-start;
-          gap: 20px;
-          align-self: stretch;
-        "
+        class="accordion accordion-light accordion-light-borderless accordion-svg-toggle"
+        id="accordionPersepsiWarna"
       >
-        <div class="row d-flex" style="width: 554px; gap: 12px">
-          <i class="ki ki-minus"></i>PERSEPSIS WARNA
-        </div>
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Normal
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
+        <div class="card">
+          <div class="card-header" id="headingPW">
+            <div
+              class="card-title"
+              data-toggle="collapse"
+              data-target="#collapsePW"
+            >
+              <span class="svg-icon svg-icon-primary">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                  width="24px"
+                  height="24px"
+                  viewBox="0 0 24 24"
+                  version="1.1"
+                >
+                  <g
+                    stroke="none"
+                    stroke-width="1"
+                    fill="none"
+                    fill-rule="evenodd"
+                  >
+                    <polygon points="0 0 24 0 24 24 0 24"></polygon>
+                    <path
+                      d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z"
+                      fill="#000000"
+                      fill-rule="nonzero"
+                    ></path>
+                    <!-- <path
+                      d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z"
+                      fill="#000000"
+                      fill-rule="nonzero"
+                      opacity="0.3"
+                      transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "
+                    ></path> -->
+                  </g>
+                </svg>
+              </span>
+              <div class="card-label pl-4">PERSEPSIS WARNA</div>
             </div>
           </div>
           <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
+            id="collapsePW"
+            class="collapse show"
+            data-parent="#accordionPersepsiWarna"
           >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Buta warna parsial
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
-            </div>
-          </div>
-        </div>
+            <div class="card-body px-12">
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Normal
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Buta warna parsial
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
 
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Buta warna total
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Buta warna total
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -1330,151 +1300,140 @@
 
       <!-- visus jauh -->
       <div
-        class="pt-10"
-        style="
-          flex-direction: column;
-          align-items: flex-start;
-          gap: 20px;
-          align-self: stretch;
-        "
+        class="accordion accordion-light accordion-light-borderless accordion-svg-toggle"
+        id="accordionVisusJauh"
       >
-        <div class="row" style="justify-content: space-between">
-          <div><i class="ki ki-minus mr-3"></i>VISUS JAUH</div>
-          <div>
-            <a href="#" class="btn btn-secondary btn-sm">
-              <i class="ki ki-bold-close icon-md"></i> TIDAK ADA RIWAYAT
-              PENYAKIT
-            </a>
-          </div>
-        </div>
-
-        <div
-          class="d-flex mt-3"
-          style="
-            flex-direction: column;
-            align-items: flex-start;
-            gap: 20px;
-            align-self: stretch;
-          "
-        >
-          <div>Tanpa Kacamata</div>
-          <div class="d-flex row container">
+        <div class="card">
+          <div class="card-header" id="headingVJ">
             <div
-              class="d-flex col-md-6"
-              style="
-                justify-content: space-between;
-                align-items: center;
-                align-self: stretch;
-              "
+              class="card-title"
+              data-toggle="collapse"
+              data-target="#collapseVJ"
             >
-              <div class="d-flex align-items-center col-md-6">
-                <label class="checkbox">
-                  <input type="checkbox" name="Checkboxes1" />
-                  <span class="mr-4"></span>
-                  -OD
-                </label>
-              </div>
-              <div class="d-flex align-items-center col-md-6">
-                <input
-                  class="form-control form-control-solid"
-                  type="text"
-                  value=""
-                  id="input1"
-                  placeholder="Keterangan"
-                  style="margin: 0 auto"
-                />
-              </div>
-            </div>
-            <div
-              class="d-flex col-md-6"
-              style="
-                justify-content: space-between;
-                align-items: center;
-                align-self: stretch;
-              "
-            >
-              <div class="d-flex align-items-center col-md-6">
-                <label class="checkbox">
-                  <input type="checkbox" name="Checkboxes1" />
-                  <span class="mr-4"></span>
-                  -OS
-                </label>
-              </div>
-              <div class="d-flex align-items-center col-md-6">
-                <input
-                  class="form-control form-control-solid"
-                  type="text"
-                  value=""
-                  id="input1"
-                  placeholder="Keterangan"
-                  style="margin: 0 auto"
-                />
+              <span class="svg-icon svg-icon-primary">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                  width="24px"
+                  height="24px"
+                  viewBox="0 0 24 24"
+                  version="1.1"
+                >
+                  <g
+                    stroke="none"
+                    stroke-width="1"
+                    fill="none"
+                    fill-rule="evenodd"
+                  >
+                    <polygon points="0 0 24 0 24 24 0 24"></polygon>
+                    <path
+                      d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z"
+                      fill="#000000"
+                      fill-rule="nonzero"
+                    ></path>
+                    <!-- <path
+                      d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z"
+                      fill="#000000"
+                      fill-rule="nonzero"
+                      opacity="0.3"
+                      transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "
+                    ></path> -->
+                  </g>
+                </svg>
+              </span>
+              <div class="card-label pl-4">VISUS JAUH</div>
+              <div>
+                <a href="#" class="btn btn-secondary btn-sm">
+                  <i class="ki ki-bold-close icon-md"></i> TIDAK ADA RIWAYAT
+                  PENYAKIT
+                </a>
               </div>
             </div>
           </div>
-        </div>
+          <div
+            id="collapseVJ"
+            class="collapse show"
+            data-parent="#accordionVisusJauh"
+          >
+            <div class="card-body px-12">
+              <div class="row pt-3">Tanpa Kacamata</div>
+              <div class="row pt-3">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        - OD
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        - OS
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
 
-        <div
-          class="d-flex mt-3"
-          style="
-            flex-direction: column;
-            align-items: flex-start;
-            gap: 20px;
-            align-self: stretch;
-          "
-        >
-          <div>Dengan Kacamata</div>
-          <div class="d-flex row container">
-            <div
-              class="d-flex col-md-6"
-              style="
-                justify-content: space-between;
-                align-items: center;
-                align-self: stretch;
-              "
-            >
-              <div class="d-flex align-items-center col-md-6">
-                <label class="checkbox">
-                  <input type="checkbox" name="Checkboxes1" />
-                  <span class="mr-4"></span>
-                  -OD
-                </label>
-              </div>
-              <div class="d-flex align-items-center col-md-6">
-                <input
-                  class="form-control form-control-solid"
-                  type="text"
-                  value=""
-                  id="input1"
-                  placeholder="Keterangan"
-                  style="margin: 0 auto"
-                />
-              </div>
-            </div>
-            <div
-              class="d-flex col-md-6"
-              style="
-                justify-content: space-between;
-                align-items: center;
-                align-self: stretch;
-              "
-            >
-              <div class="d-flex align-items-center col-md-6">
-                <label class="checkbox">
-                  <input type="checkbox" name="Checkboxes1" />
-                  <span class="mr-4"></span>
-                  -OS
-                </label>
-              </div>
-              <div class="d-flex align-items-center col-md-6">
-                <input
-                  class="form-control form-control-solid"
-                  type="text"
-                  value=""
-                  id="input1"
-                  placeholder="Keterangan"
-                  style="margin: 0 auto"
-                />
+              <div class="row">Dengan Kacamata</div>
+              <div class="row pt-3">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        - OD
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        - OS
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -1484,152 +1443,154 @@
 
       <!-- telinga -->
       <div
-        class="d-flex pt-10"
-        style="
-          flex-direction: column;
-          align-items: flex-start;
-          gap: 20px;
-          align-self: stretch;
-        "
+        class="accordion accordion-light accordion-light-borderless accordion-svg-toggle"
+        id="accordionTelinga"
       >
-        <div class="row d-flex" style="width: 554px; gap: 12px">
-          <i class="ki ki-minus"></i>TELINGA
-        </div>
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Normal
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
+        <div class="card">
+          <div class="card-header" id="headingKW">
+            <div
+              class="card-title"
+              data-toggle="collapse"
+              data-target="#collapseKepalaWajah"
+            >
+              <span class="svg-icon svg-icon-primary">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                  width="24px"
+                  height="24px"
+                  viewBox="0 0 24 24"
+                  version="1.1"
+                >
+                  <g
+                    stroke="none"
+                    stroke-width="1"
+                    fill="none"
+                    fill-rule="evenodd"
+                  >
+                    <polygon points="0 0 24 0 24 24 0 24"></polygon>
+                    <path
+                      d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z"
+                      fill="#000000"
+                      fill-rule="nonzero"
+                    ></path>
+                    <!-- <path
+                      d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z"
+                      fill="#000000"
+                      fill-rule="nonzero"
+                      opacity="0.3"
+                      transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "
+                    ></path> -->
+                  </g>
+                </svg>
+              </span>
+              <div class="card-label pl-4">TELINGA</div>
             </div>
           </div>
           <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
+            id="collapseKepalaWajah"
+            class="collapse show"
+            data-parent="#accordionTelinga"
           >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Tanda Infeksi
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
-            </div>
-          </div>
-        </div>
+            <div class="card-body px-12">
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Normal
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Tanda Infeksi
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
 
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Serumen
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
-            </div>
-          </div>
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Perforasi MT
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
-            </div>
-          </div>
-        </div>
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Serumen
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Perforasi MT
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
 
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Lain-lain
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Lain-lain
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -1638,152 +1599,154 @@
 
       <!-- hidung -->
       <div
-        class="d-flex pt-10"
-        style="
-          flex-direction: column;
-          align-items: flex-start;
-          gap: 20px;
-          align-self: stretch;
-        "
+        class="accordion accordion-light accordion-light-borderless accordion-svg-toggle"
+        id="accordionHidung"
       >
-        <div class="row d-flex" style="width: 554px; gap: 12px">
-          <i class="ki ki-minus"></i>HIDUNG
-        </div>
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Normal
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
+        <div class="card">
+          <div class="card-header" id="headingHidung">
+            <div
+              class="card-title"
+              data-toggle="collapse"
+              data-target="#collapseHidung"
+            >
+              <span class="svg-icon svg-icon-primary">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                  width="24px"
+                  height="24px"
+                  viewBox="0 0 24 24"
+                  version="1.1"
+                >
+                  <g
+                    stroke="none"
+                    stroke-width="1"
+                    fill="none"
+                    fill-rule="evenodd"
+                  >
+                    <polygon points="0 0 24 0 24 24 0 24"></polygon>
+                    <path
+                      d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z"
+                      fill="#000000"
+                      fill-rule="nonzero"
+                    ></path>
+                    <!-- <path
+                    d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z"
+                    fill="#000000"
+                    fill-rule="nonzero"
+                    opacity="0.3"
+                    transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "
+                  ></path> -->
+                  </g>
+                </svg>
+              </span>
+              <div class="card-label pl-4">HIDUNG</div>
             </div>
           </div>
           <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
+            id="collapseHidung"
+            class="collapse show"
+            data-parent="#accordionHidung"
           >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Hiperemis
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
-            </div>
-          </div>
-        </div>
+            <div class="card-body px-12">
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Normal
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Hiperemis
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
 
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Oedem
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
-            </div>
-          </div>
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Deviasi Septum
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
-            </div>
-          </div>
-        </div>
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Oedem
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Deviasi Septum
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
 
-        <div class="d-flex row container">
-          <div
-            class="d-flex col-md-6"
-            style="
-              justify-content: space-between;
-              align-items: center;
-              align-self: stretch;
-            "
-          >
-            <div class="d-flex align-items-center col-md-6">
-              <label class="checkbox">
-                <input type="checkbox" name="Checkboxes1" />
-                <span class="mr-4"></span>
-                Lain-lain
-              </label>
-            </div>
-            <div class="d-flex align-items-center col-md-6">
-              <input
-                class="form-control form-control-solid"
-                type="text"
-                value=""
-                id="input1"
-                placeholder="Keterangan"
-                style="margin: 0 auto"
-              />
+              <div class="row">
+                <div class="col-6">
+                  <div class="form-group row">
+                    <div class="col-8 col-form-label">
+                      <label class="checkbox">
+                        <input type="checkbox" name="Checkboxes1" />
+                        <span class="mr-4"></span>
+                        Lain-lain
+                      </label>
+                    </div>
+                    <div class="col-4">
+                      <input
+                        class="form-control form-control-solid"
+                        placeholder="Keterangan"
+                        type="text"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>