:root {
  --text: #474747;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
  border-radius: 7px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #555;
}

html {
  font-size: 16px;
  font-family: Mukta;
  overflow: hidden;
}

a {
  color: #18abea;
  transition: .2s all;
}

a:hover {
  color: #126b91;
}

#log {
  position: fixed;
  bottom: -100px;
  right: 1rem;
  padding: .5rem 2rem;
  transition: .2s all;
  z-index: 99;
  border-radius: .3rem;
  box-shadow: 0 0 10px 4px #0000002b;
}

#log.show {
  bottom: 1rem;
}

#log.error {
  background-color: #ffbdc2;
  border: 1px solid #ff919c;
}

#log.warn {
  background-color: #ffe284;
  border: 1px solid #ddbc5b;
}

#log.log {
  background-color: #8cd9e7;
  border: 1px solid #6babb6;
}

table {
  width: 100%;
  border-collapse: collapse;
  max-width: 100dvw;
  overflow: auto;
  line-height: 1.2;
}

table:focus-visible {
  outline: none;
}

th,
td {
  background: #eee;
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
  overflow: auto;
}

th {
  background: linear-gradient(45deg, #266bac 0%, #266bac8a 100%);
  color: white;
}

body.cell,
body.cell #table-container th {
  cursor: cell;
}

.hide {
  display: none !important;
}

.hider {
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important
}

img {
  max-width: 100%;
  height: auto;
}

body {
  background: #e7e9eb;
  color: var(--text);
}

#container {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
}

.sec-title {
  font-size: 1.7rem !important;
  font-weight: 500;
  padding: 0 !important;
  background: unset !important;
  text-align: left !important;
}

/* === HEADER === */

header {
  padding: 1.5rem;
  background: #fff;
  position: relative;
  user-select: none;
}

header .wrap {
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: calc(100dvh - 3rem);
}

header .menu,
header .help {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  gap: 1rem;
}

header .icon {
  cursor: pointer;
  margin: 0.8rem;
  font-size: 0;
  transition: .2s all;
  position: relative;
}

header .icon img {
  transition: .2s all;
}

header .icon:hover img {
  scale: 1.2;
}

header .icon:after {
  content: '';
  position: absolute;
  top: -.5rem;
  right: -2.3rem;
  width: 0px;
  height: calc(100% + 1rem);
  background: #18abea;
  border-radius: 1rem;
  transition: .2s all;
}

header .icon.active:after {
  width: .4rem;
}

/* --- xHOME --- */

section {
  padding: 2rem;
  height: 100dvh;
  overflow: auto;
}

section#home {
  display: flex;
  flex-direction: column;
}

section#home h2 {
  margin: 2rem 0;
}

#greet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}

#greet a {
  float: right;
  background: #fff;
  color: white;
  text-decoration: none;
  padding: 0.5rem 1.3rem;
  border-radius: 0.5rem;
  position: relative;
  transition: .2s all;
  overflow: hidden;
}

#greet a:before {
  content: '';
  background: linear-gradient(45deg, #266bac 0%, #266bac8a 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: .2s all;
}

#greet a:hover:before {
  opacity: 0;
}

#greet .center {
  flex-grow: 1;
  position: relative;
}

#greet .center input {
  font-family: Mukta;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: .3rem;
  box-shadow: 0 4px 4px 0px #0000001c;
  transition: .2s all;
}

#greet .center input:focus-visible {
  outline: none;
  box-shadow: 0 4px 6px 3px #0000001f;
}

#greet .center .search-icon {
  cursor: pointer;
  transition: .2s all;
  position: absolute;
  top: 7px;
  right: 10px;
  width: 25px;
  height: 25px;
}

#greet .center .search-icon:hover {
  transform: scale(1.3);
}

#greet span {
  color: white;
  position: relative;
}

#greet a:hover span {
  color: var(--text)
}

#greet p.title {
  font-size: 1.75rem;
  font-weight: 600;
}

#greet p.title span {
  font-size: 1rem;
  color: var(--text)
}

.type {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2rem;
}

.type>div {
  user-select: none;
  background: white;
  color: white;
  padding: 2rem 1.5rem 6rem;
  border-radius: .3rem;
  position: relative;
  overflow: hidden;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: .2s all;
  cursor: pointer;
  box-shadow: 0 38px 30px -40px #00000073;
}

.type>div[data-status], .type>div[data-minus] {
  position: relative;
}

.type>div[data-status]:after {
  content: attr(data-status);
  background: #00000040;
}

.type>div[data-minus]:after {
  content: "(-) " attr(data-minus);
  background: #ff000070;
}

.type>div[data-status]:after, .type>div[data-minus]:after {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  opacity: .8;
  font-size: .8rem;
  padding: .3rem .7rem;
  border-radius: .3rem;
}

.type>div h3 {
  z-index: 1;
}

.type>div sub {
  position: relative;
  opacity: .6;
}

.type>div p {
  opacity: .8;
  font-size: .9rem;
  line-height: 1.5;
}

.type>div img {
  position: absolute;
  bottom: 1rem;
  width: 70px;
  right: 1rem;
  opacity: 0.8;
  filter: drop-shadow(2px 4px 6px #00000075);
}

.type>div:hover {
  color: var(--text);
}

.type>div:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: .3s all;
  opacity: 1;
}

.type>div:hover:before {
  opacity: 0;
}

/* .type>div.avs:before {
  background-image: linear-gradient(45deg, #266bac 0%, #266bac8a 100%);
} */

.type>[data-type="ral"]:before {
  background-image: linear-gradient(45deg, #1b3b7b 0%, #1b3b7b80 100%);
}
.type>[data-type="rak"]:before {
  background-image: linear-gradient(45deg, #727411 0%, #727411b8 100%);
}
.type>[data-type="rakl"]:before {
  background-image: linear-gradient(45deg, #232a31 0%, #232a3180 100%);
}
.type>[data-type="rbsl"]:before {
  background-image: linear-gradient(45deg, #512682 0%, #51268280 100%);
}
.type>[data-type="rba"]:before {
  background-image: linear-gradient(45deg, #80254f 0%, #80254faa 100%);
}

.type>div.hml:before {
  background-image: linear-gradient(45deg, #434343 0%, #9f9f9f 100%);
}

.type>div.ujt:before {
  background-image: linear-gradient(45deg, #8b2727 0%, #c05353c0 100%);
}

.type>div.isat:before {
  background-image: linear-gradient(45deg, #234d96 0%, #234d9685 100%);
}

.type>div.ipb:before {
  background-image: linear-gradient(45deg, #23965e 0%, #23964f85 100%);
}

.type>div.ild:before,
.type>div.ldg:before,
.type>div.ldp:before,
.type>div.ldc:before,
.type>div.lds:before,
.type>div.nld:before,
.type>div.nbd:before,
.type>div.dld:before {
  background-image: linear-gradient(45deg, #187f72 0%, #187f71a8 100%);
}

/* .type>div.lab:before {
  background-image: linear-gradient(45deg, #6138a8 0%, #683ab7aa 100%);
} */

.type>div.lpt:before,
.type>div.lpn:before,
.type>div.lab:before {
  background-image: linear-gradient(45deg, #338036 0%, #33803696 100%);
}

.type>div.npa:before {
  background-image: linear-gradient(45deg, #8f8c0d 0%, #8f8c0dbd 100%);
}

.type>div.nba:before {
  background-image: linear-gradient(45deg, #8f0d52 0%, #8f0d4c96 100%);
}

.type>div.inp:before {
  background-image: linear-gradient(45deg, #964423 0%, #964423a3 100%);
}

/* === INPUT === */

#input {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1.5fr 1fr;
  position: relative;
}

#input .left {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  overflow: auto;
}

#input .left #file {
  background: white;
  padding: 2rem;
  border-radius: .5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#input.chosen .left #file {
  display: none;
}

#input .left #file img {
  width: 6.5rem;
}

#input .left #file .text {
  display: grid;
  gap: 0.2rem;
}

#input .left #file .text p {
  font-weight: 600;
  font-size: 1.3rem;
}

#input .left #file .text span {
  opacity: .8;
}

#input .left #file label {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 2rem;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%2379A9CEFF' stroke-width='4' stroke-dasharray='11' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
  border-radius: 1rem;
  transition: .3s all;
}

#input .left #file label:hover {
  background: #79a9ce;
  color: white;
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23FFFFFF' stroke-width='4' stroke-dasharray='11' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}

#input .left #file label input {
  display: none;
}

#input .left #file label span {
  opacity: .8;
}

#input .left .select-sheet {
  display: none;
}

#input.chosen .left .select-sheet {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#input .left .select-sheet .btn {
  user-select: none;
  background: white;
  padding: 0.2rem 1.4rem;
  font-size: 0.8rem;
  color: white;
  border-radius: 0.5rem;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#input .left .select-sheet .btn:before {
  content: '';
  background: linear-gradient(45deg, #266bac 0%, #266bac8a 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: .2s all;
}

#input .left .select-sheet .btn:hover:before,
#input .left .select-sheet .btn.active:before {
  opacity: 0;
}

#input .left .select-sheet .btn span {
  position: relative;
}

#input .left .select-sheet .btn:hover span,
#input .left .select-sheet .btn.active span {
  color: var(--text)
}

#input .left #table-wrapper {
  display: none;
}

#input.chosen .left #table-wrapper {
  display: block;
  overflow: hidden;
  padding: 1rem;
  background: white;
  border-radius: .5rem;
  position: relative;
}

#input .left #table-wrapper #nama-file {
  display: none;
}

#input.chosen .left #table-wrapper #nama-file {
  display: flex;
  margin-bottom: 1rem;
  gap: 0.5rem
}

#input.chosen .left #table-wrapper #nama-file img {
  width: 25px;
  height: 25px
}

#input.chosen .left #table-wrapper #edit-file,
#input.chosen .left #table-wrapper #ubah-file {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 25px;
  cursor: pointer;
  transition: .2s all;
}

#input.chosen .left #table-wrapper #ubah-file {
  right: calc(2rem + 25px);
}

#input.chosen .left #table-wrapper #edit-file:hover,
#input.chosen .left #table-wrapper #ubah-file:hover {
  scale: 1.2;
}

#input .left #table-wrapper #table-container {
  background: white;
  overflow: auto;
  max-height: 300px;
}

#input .left #table-wrapper table[contenteditable="true"] {
  border: 2px solid #d26565;
}

#input .left #table-wrapper table * {
  font-size: 0.9rem;
  transition: .2s all;
}

#input .left #table-wrapper table tr:first-child {
  transition: .2s all;
  border: 0px solid #d26565;
}

body.cell #input .left #table-wrapper table tr:first-child {
  border: 2px solid #d26565;
}

#input .left #table-wrapper table th[class*="input"] {
  background: linear-gradient(45deg, #d26565 0%, #ac26265c 100%);
  color: white;
}

#input .right .wrap {
  background: white;
  padding: 1.5rem;
  border-radius: .5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#input .right .analysis-type {
  display: flex;
  gap: 1rem;
  flex-direction: column;
}

#input .right .analysis-type .column-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

#input .right .analysis-type .column-selector > div:not(.select-from-table) {
  grid-column: span 2;
}

#input .right .analysis-type .column-selector .btn-input {
  width: 100%;
  border: none;
  background: none;
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin-top: 0.2rem;
  justify-content: center;
}

#input .right .analysis-type .column-selector .btn-input .select-icon {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: +1;
}

#input .right .analysis-type .column-selector .btn-input input {
  border: none;
  font-size: 0.8rem;
  opacity: .9;
  margin-top: 2px;
  width: 100%;
  text-align: center;
  background: unset;
}

#input .right .analysis-type .column-selector>div {
  padding: 1rem;
  border-radius: 0.3rem;
  background: #ebebeb;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1;
  justify-content: center;
}

#input .right .analysis-type .column-selector .select-from-table {
  transition: .2s all;
}

#input .right .analysis-type .column-selector .select-from-table:hover, #input .right .analysis-type .column-selector .select-from-table.active {
  background: #b5b5b5;
}

#input .right .analysis-type .column-selector select {
  width: 100%;
  cursor: pointer;
  border: none;
  background: white;
  padding: 0.4rem 0.5rem;
  font-size: 0.8rem;
  margin: .5rem 0 0;
  border-radius: .3rem;
  background: linear-gradient(45deg, #266bac 0%, #266bac9c 100%);
  border-right: .2rem solid #709bc4;
  color: white;
}

#input .right .analysis-type .column-selector select option {
  background: var(--text);
}

#input .right .lakukan-analisis {
  background: #25655d;
  border: none;
  color: white;
  padding: 1rem;
  border-radius: .5rem;
  margin-top: 0.5rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

#input .right .lakukan-analisis:before {
  content: '';
  background: linear-gradient(45deg, #187f72 0%, #23bba8 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: .2s all;
}

#input .right .lakukan-analisis span {
  position: relative;
}

#input .right .lakukan-analisis:hover:before {
  opacity: 0;
}

/* === OUTPUT === */

#output>div {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#output>div>* {
  background: white;
  padding: 1.5rem;
  border-radius: .5rem;
}

#output .sec-title {
  text-align: center;
  font-size: 1.3rem;
}

#output .desimal {
  display: grid !important;
  grid-template-columns: 27px 1fr 27px;
}

#output .desimal span {
  user-select: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  border-radius: .3rem;
  transition: .2s all;
  position: relative;
  overflow: hidden;
}

#output .desimal span:before {
  content: '';
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: .2s scale;
}

#output .desimal span.min:before {
  background-image: url(../img/icon-min.png);
}

#output .desimal span.plus:before {
  background-image: url(../img/icon-plus.png);
}

#output .desimal span:hover:before {
  scale: 1.2;
}

#output .desimal span:active:before {
  scale: 1;
  opacity: .2;
}

#output .desimal input {
  width: 20px;
  text-align: center;
  border: none;
  background: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

#output .desimal input::-webkit-inner-spin-button,
#output .desimal input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#output .tabel-anova {
  overflow: auto;
}

#output .tabel-anova table {
  min-width: 700px;
}

#output .tabel-uji-lanjut table td {
  overflow: hidden;
}

#output .tabel-pengujian {
  display: grid;
  gap: 1rem;
}

#output .tabel-pengujian .tabel-judul {
  font-size: 1.3rem;
}

#output .tabel-pengujian .tabel-isi:not(.faktorial), #output .tabel-pengujian .tabel-isi.faktorial .factor-table{
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 1.5rem;
}

#output .tabel-pengujian .tabel-isi.faktorial .tabel-uji-lanjut {
  display: grid;
  gap: 1.5rem;
}

#output .tabel-isi td {
  position: relative;
  overflow: hidden;
}

#output .tabel-isi td[data-p]:after {
  content: "("attr(data-v)")";
  position: absolute;
  margin-left: 0.3rem;
  font-size: 0.6rem;
}

#output .tabel-pengujian .tabel-isi.faktorial .factor-table > table thead tr {
  position: relative;
}

#output .tabel-pengujian .tabel-isi.faktorial .factor-table > table thead th:nth-child(1) {
  position: absolute;
  left: -1px;
  top: 0;
  width: calc(100% + 2px);
  background: linear-gradient(45deg, #ac7c26 0%, #ac8126b5 100%);
}

#output .tabel-pengujian .tabel-isi.faktorial .factor-table > table thead th:nth-child(n+2) {
    opacity: 0;
    border-left: unset;
    border-right: unset;
}

#output table {
  table-layout: fixed;
}

#output table .red {
  background: linear-gradient(45deg, #21631fde 0%, #21631f9c 100%);
  color: white;
}

#output table .blank {
  color: #00000040;
}

#output table .bold {
  font-weight: bold;
}

#output sub {
  font-size: 1rem;
  margin-left: .5rem;
}

#output [class*="hasil-avs"] .sec-title.grid {
  display: grid;
  grid-template-columns: 50% 50%;
}

#output [class*="hasil-avs"] .sec-title.grid div {
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
}

#output [class*="hasil-avs"] .sec-title.grid div select {
  cursor: pointer;
  border: none;
  background: white;
  padding: 0.4rem 0.5rem;
  font-size: 0.8rem;
  margin: .5rem 0;
  border-radius: .3rem;
  background: linear-gradient(45deg, #8b2727 0%, #c05353c0 100%);
  border-right: .2rem solid #c16d6e;
  color: white;
}

#output [class*="hasil-avs"] .sec-title.grid div select option {
  background: var(--text);
}

.hasil-isat {
  max-height: calc(100dvh - 4rem);
  position: relative;
}

#hasil-isat {
  overflow: auto;
  max-width: calc(100vw - 10rem);
  height: 100%;
}

.isat-table {
  max-height: calc(100dvh - 4rem);
  display: block;
  overflow: unset;
  font-size: .9rem;
}

#output .plot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

#output .plot .sec-title {
  margin-bottom: 1rem;
  font-size: 1.2rem !important;
}

#output .plot .container {
  min-height: 50dvh;
  overflow: auto;
  max-width: calc(50dvw - 8rem);
  padding: 0 !important;
}

/* === HELP === */

#help {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#help .content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

#help .item {
  background: white;
  border-radius: .5rem;
  overflow: hidden;
}

#help .item .title {
  user-select: none;
  transition: .2s all;
  padding: 1.5rem 2rem;
  font-size: 1.2rem;
  box-shadow: 0px 5px 20px 0px #0000002e;
  border-radius: .5rem;
  cursor: pointer;
  margin-bottom: 5px;
  position: relative;
}

#help .item .title:after {
  transition: .2s all;
  content: '';
  float: right;
  width: 30px;
  height: 30px;
  background-image: url(../../src/img/icon-chevron.png);
  background-size: contain;
}

#help .item .title:hover:after,
#help .item .title.active:after {
  filter: brightness(100);
}

#help .item .title.active:after {
  transform: rotate(-180deg);
}

#help .item .desc {
  padding: 0 2.5rem;
  display: grid;
  gap: 1.5rem;
  max-height: 0;
  transition: .3s all;
}

#help .item .title:hover,
#help .item .title.active {
  background: #2196F3;
  color: white;
}

#help .item .desc .subitem:not(:last-child) {
  padding-bottom: 1.5rem;
  border-bottom: 2px solid #ebebeb;
}

#help .item .desc .subitem {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1.5rem;
}

#help .item .desc .subitem .right img {
  width: 17px;
  margin: 0 5px;
}

#help .item .desc .subitem ul,
#help .item .desc .subitem ol {
  margin-left: 1.5rem;
}

/* === CONTACT === */

section#ozik {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 0;
}

section#ozik:before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00000085;
  z-index: -1;
}

section#ozik .wrap {
  position: fixed;
  background: white;
  text-align: center;
  display: grid;
  gap: 1rem;
  padding: 2rem;
  border-radius: 1.5rem;
  margin: 0 2rem;
  top: 50%;
  left: 50%;
  transform: translate(calc(-50% - 2rem), -50%);
  max-width: 500px;
  width: 90%;
}

section#ozik p.title {
  font-size: 2rem;
  font-weight: bold;
}

section#ozik p.ver {
  margin-top: -1rem;
}

@media (max-width: 900px) {
  html {
      font-size: 14px
  }

  .type {
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
  }

  #input {
      display: block;
  }

  #input .left {
      display: grid;
      margin-bottom: 2rem;
  }

  #input .left #table-wrapper #table-container {
      max-height: 150px;
  }

  #output .plot {
      grid-template-columns: 1fr;
  }

  #output .plot .container {
      max-width: calc(100dvw - 8rem);
  }

  #output #hasil-isat {
    max-width: unset;
  }

  #container {
      display: block;
  }

  header {
      position: fixed;
      z-index: 100;
      height: 60px;
      top: 0;
      width: 100%;
      padding: 0;
  }

  header .wrap {
      position: unset;
      height: 60px;
      display: flex;
      flex-direction: row;
      padding: 0.3rem 0.6rem;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }

  header img {
      height: 100%;
  }

  header .top, header .bottom {
      display: flex;
      height: 100%;
  }

  header .menu, header .help {
      margin-top: 0;
      display: flex;
      flex-direction: row;
  }

  header .icon {
      margin: 0.8rem;
  }

  header .icon:after {
      width: 100% !important;
      height: 0;
      top: unset;
      bottom: -1.1rem;
      left: 0;
  }

  header .icon.active:after {
      height: 0.3rem !important;
  }

  header .logo, header .help {
      cursor: pointer;
      margin: 0.3rem;
      font-size: 0;
      transition: .2s all;
      position: relative;
  }

  header .top {
      gap: 0.8rem;
  }

  header .icon.ozik {
      margin: 0.4rem;
  }

  main section {
      padding: calc(1rem + 60px) 1rem 1rem 1rem;
  }

  #output [class*="hasil-avs"] .sec-title.grid {
      grid-template-columns: 1fr;
  }

  #output [class*="hasil-avs"] .sec-title.grid div {
      justify-content: flex-start;
  }
}

@media (max-width: 500px) {
  .type {
      grid-template-columns: 1fr;
  }

  .type > div {
      padding: 1.5rem 1.5rem 4rem 1.5rem;
  }

  .type > div img {
      width: 60px;
  }

  .type > div sub, .type > div p {
      padding-right: 4rem;
  }

  #greet {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
  }

  #greet .center {
      grid-column: span 2;
      order: 1;
  }

  #input .left {
      gap: 1rem;
      margin-bottom: 1rem;
  }

  #input .left #file {
      gap: 1.5rem;
  }

  #input .left #file label {
      padding: 2rem;
  }

  #input .left #file img {
      width: 5rem;
  }

  #output .plot .container {
      max-width: unset;
  }

  #help, #help .content {
      gap: 1rem;
  }

  #help .item .title {
      padding: 1rem;
  }

  #help .item .title:after {
      width: 20px;
      height: 20px;
      margin-top: 5px;
  }

  #help .item .desc .subitem {
      grid-template-columns: 1fr;
      gap: 1rem;
  }

  header .icon {
      margin: 1rem 0.5rem;
  }

  header .help {
      margin: .4rem .5rem;
  }

  header .icon.ozik {
    margin: .5rem;
  }

  header .logo {
      margin: .5rem 1rem .5rem .7rem;
  }
}