body, html {
    height: 100%;
    margin: 0;
}
.bg-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
    /* opacity: 0.7; */
}

.kabupaten-gk {
    font-size: 18px;
}

.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2vw;
}

.card {
    background: rgba(255,255,255,1);
    box-shadow: 0 4px 24px rgba(0,0,0,0.1);
    border-radius: 1rem;
}

.custom-box {
  width: 96%;        
  max-width: 450px;
}

.w-80 {
    width: 80% !important;
    margin-left: auto;
    margin-right: auto;
}

.w-20 {
    width: 20% !important;
    margin-left: auto;
    margin-right: auto;
}

.form_label{
	font-size: 15px;
	margin: 2px 0px;
}

.eye_icons{
	font-size: 20px;
}

.toggle-password-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.toggle-password-btn:focus {
    outline: none;
}

.input-captcha-custom {
    width: 80px !important;
}

.codeIframe{
	height: 28px;
	width: 90px;
}

.borders {
    border: solid 1px red;
}

#buttonContainer {
  transition: all 0.3s ease-in-out;
}

#buttonContainer {
  flex-direction: row;
  gap: 0.2rem; /* jarak antar tombol */
}

@media screen and (max-width: 576px) and (orientation: portrait) {
  #buttonContainer {
    flex-direction: column !important;
    gap: 0.2rem; /* jarak vertikal antar tombol */
  }
  #buttonContainer > .btn {
    width: 100%;
  }
}

@media screen and (orientation: landscape) {
  #buttonContainer {
    flex-direction: row !important;
    gap: 0.75rem;
  }
}

.form-control:focus::placeholder {
	 color: transparent;
}

.form-control::placeholder {
	 color: #AAA;
}

.form-control {
    background-color: #e9ecef !important; /* abu-abu terang */
    box-shadow: none !important;
    border-color: #ced4da;
    transition: background 0.2s;
}
.form-control:focus {
    background-color: #fff !important; /* putih saat fokus */
    box-shadow: none !important;
    /* change by barep 
	border-color: #86b7fe;
	*/
	border-color: #CACACA;
}