/* GLOBAL */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");

:root {
  --color-blue: #0000cc;
  --color-violet: #700f70;
  --color-white: #fff;
  --color-orange: #cc8500;
}

.all_center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  width: clamp(15.9375rem, 1.5625rem + 82.1429vw, 37.5rem);
}

/* language button */
.language_active {
  color: black;
  cursor: initial;
  display: none;
}

.bg_blue,
#btn_calculate {
  background-color: var(--color-blue);
  border: 2px solid var(--color-blue);
}

.bg_blue:hover,
.bg_blue:active,
#btn_calculate:hover,
#btn_calculate:active {
  background-color: transparent;
  border-color: var(--color-blue) !important;
  color: var(--color-blue) !important;
}

.bg_violet {
  background-color: var(--color-violet);
  border: 2px solid var(--color-violet);
}

.bg_violet:hover,
.bg_violet:active {
  background-color: transparent;
  border-color: var(--color-violet) !important;
  color: var(--color-violet) !important;
}

.bg_orange {
  background-color: var(--color-orange);
  border: 2px solid var(--color-orange);
}

.bg_orange:hover,
.bg_orange:active {
  background-color: transparent;
  border-color: var(--color-orange) !important;
  color: var(--color-orange) !important;
}

.btn_txt {
  color: var(--color-white);
  font-weight: bold;
}

/* INDEX */
.txt_desc {
  font-size: 12px;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 0;
}

/* BAJETGAJI PAGE start */
.btn_english_bajetgaji,
.btn_malay_bajetgaji {
  color: var(--color-blue);
}

.btn_english_bajetgaji:hover,
.btn_malay_bajetgaji:hover {
  color: var(--color-blue);
  text-decoration: underline;
}

.instructions_bajetgaji {
  color: var(--color-blue);
}

#translate_headline_bajetgaji {
  color: var(--color-blue);
}

#net_salary {
  width: 7rem;
}

.form-control {
  border: 1px solid black;
}

.formula_choice .form-check {
  margin-bottom: 1rem;
}

.formula_choice .form-check-input {
  border: 1px solid black;
}

.txt_blue {
  color: var(--color-blue);
}

.container_commitments .title {
  background-color: var(--color-blue);
}

.commitments_details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 30px auto auto;
}

.commitments_details .details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.commitments_details .form-control {
  width: 6rem;
}

.commitments_details #add_new_link {
  color: var(--color-blue);
  text-decoration: underline;
  cursor: pointer;
}

/* BAJETGAJI PAGE end */

/* BAYAR ASING PAGE start */
.calculate_div,
.content_div,
.delivery_option,
.dinein_option,
.hide,
.languange_active {
  display: none;
}

.btn_reset,
.show {
  display: block;
}

#translate_instructions {
  color: var(--color-violet);
}

.btn_english_bayarasing,
.btn_malay_bayarasing {
  color: var(--color-violet);
}

.btn_english_bayarasing:hover,
.btn_malay_bayarasing:hover {
  color: var(--color-violet);
  text-decoration: underline;
}

.instructions_bayarasing {
  color: var(--color-violet);
}

#translate_headline_bayarasing {
  color: var(--color-violet);
}

.btn_choice button {
  color: #fff;
  font-weight: bold;
  width: 50%;
}

.input_name {
  border: none;
  border-bottom: 2px solid var(--color-violet);
  border-radius: 0;
}

.add_people_link {
  color: var(--color-violet);
  text-decoration: underline;
}

.add_people_link:hover {
  text-decoration: none;
  cursor: pointer;
}

.dinein_option div,
.delivery_option div {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 5px;
  align-items: center;
  margin-bottom: 15px;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
  background-color: #fce9fc;
}

/* BAYAR ASING PAGE end */

/* JAM RANDIK PAGE start */
#btn_english_stopwatch,
#btn_malay_stopwatch {
  color: var(--color-orange);
}

#btn_english_stopwatch:hover,
#btn_malay_stopwatch:hover {
  color: var(--color-orange);
  text-decoration: underline;
}

#translate_headline_stopwatch {
  color: var(--color-orange);
}

.stopwatch {
  font-size: 50px;
}

#btn_delete_onestopwatch {
  color: red;
  font-size: 20px;
}

#btn_add_stopwatch {
  font-size: 50px;
  line-height: 0;
  color: var(--color-orange);
}

#btn_add_stopwatch:active {
  border: none;
  color: green;
}

/* JAM RANDIK PAGE end */

/* MEDIUM SCREEN */
@media (min-width:768px) {
  /* .content {
    width: 75%;
  } */
}

/* LARGE SCREEN */
@media (min-width:992px) {
  /* .content {
    width: 65%;
  } */
}

/* X-LARGE SCREEN */
@media (min-width:1200px) {
  /* .content {
    width: 60%;
  } */
}

/* XX-LARGE SCREEN */
@media (min-width:1400px) {
  /* .content {
    width: 50%;
  } */
}