:root {
  --official-color:#2200cc;
  --custom-secondary: #12B4C7;
  --palette-blue-1: #3e3ec6; /*Biru pekat*/
  --palette-blue-2: #6f80ee; /*Biru medium*/
  --palette-blue-3: #d8e4ff; /*Biru cair*/
  --palette-yellow-1: #fbed21; /*Yellow*/
}

/*** Color ***/
.bg-palette-blue-1 { background-color: var(--palette-blue-1) !important; }
.bg-palette-blue-2 { background-color: var(--palette-blue-2) !important; }
.bg-palette-blue-3 { background-color: var(--palette-blue-3) !important; }
.bg-palette-yellow-1 { background-color: var(--palette-yellow-1) !important; }

/*** Typography ***/
a {
  color:var(--palette-blue-1); 
  text-decoration:none; 
  background-color:transparent;
}

a:hover {
  color:var(--palette-blue-2);
  text-decoration:underline
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  margin-bottom:.5rem;
  font-weight:800;
  line-height:1.2
}

.text-info {color:var(--custom-secondary) !important;}
.text-palette-blue-1 { color:var(--palette-blue-1) !important; }
.text-palette-blue-2 { color:var(--palette-blue-2) !important; }
.text-palette-blue-3 { color:var(--palette-blue-3) !important; }
.text-palette-yellow-1 { color:var(--palette-yellow-1) !important; }

/*** Button ***/
.btn.disabled, .btn:disabled {
  opacity:.65; 
  cursor: not-allowed
}

.btn-primary {
  color: #fff;
  background-color: var(--official-color);
  border-color: var(--official-color);
}

.btn-primary:hover {
  color: #fff;
  background-color: #3b3bbf;
  border-color: #3b3bbf;
}

.btn-primary.focus,.btn-primary:focus {
  color:#fff;
  background-color:#0069d9;
  border-color:#0062cc;
  box-shadow:0 0 0 .2rem rgba(38,143,255,.5)
}

.btn-primary.disabled,.btn-primary:disabled {
  color:#fff;
  background-color:#007bff;
  border-color:#007bff
}

.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle {
  color:#fff;
  background-color:#0062cc; 
  border-color:#005cbf
}

.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus {
  box-shadow:0 0 0 .2rem rgba(38,143,255,.5)
}

/*** Form ***/
.form-control {
  border: 2px solid #ced4da;
}

.form-control:focus {
  border-color: var(--official-color);
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.form-control.is-invalid:focus,.was-validated .form-control:invalid:focus {
  border-color:#dc3545;
  box-shadow:0 0 0 rgba(220,53,69,.25)
}

label.custom-control-label {
  cursor: pointer;
}