:root {
  /* Font */
  --font-family: "Prompt";
  --base-font-size: 16px;
  --base-font-size-extra-large: 36px;      /* 16 * 2.25 */
  --base-font-size-large: 21.333px;        /* (16 * 4) / 3 */
  --base-font-size-small: 14.4px;          /* 16 * 0.9 */
  /* Background */
  --base-background-color: #45b1ff;
  --base-background-color2: #ffffff;
  --base-background-color-active: #75c6f4;
  --base-background-color2-active: #e5e5e5;
  --base-background-gradient-color: #85b7fc;
  --base-background-gradient-color-pattern:
    linear-gradient(
      90deg,
      rgba(2,0,36,1) 0%,
      rgba(1,93,132,1) 65%,
      rgba(0,212,255,1) 100%
    );
  /* Font color */
  --base-font-color: #000000;
  --base-font-color2: #000000;
  --base-font-color3: #0661a2;
  --base-font-color4: #ffffff;
  --base-font-color5: #ffffff;
  --close-color: #cbcbcb;
  --error-font-color: #ff0000;
  /* Layout padding */
  --base-structure-padding-top: 20px;
  --base-structure-padding-right: 20px;
  --base-structure-padding-bottom: 20px;
  --base-structure-padding-left: 20px;
  /* Base layout */
  --base-interact-block-height: 40px;
  --base-border-radius: 8px;
  --base-shadow: 0px 3px 6px #00000029;
  /* Header */
  --fw-header-font-size: var(--base-font-size-large);
  --fw-header-height: 72px;
  --fw-header-background-color: #45b1ff;
  --fw-header-child-height: 32px; /* 72 - 20 - 20 */
  --fw-header-child-middle-width: 40%;
  --fw-header-child-side-width: 30%;
  --fw-header-child-side-min-width: 30px;
  /* Footer */
  --fw-footer-font-size: var(--base-font-size);
  --fw-footer-height: 34px;
  --fw-footer-background-color: #45b1ff;
  /* Body */
  --fw-body-font-size: var(--base-font-size);
  --fw-body-background-color: unset;
  /* Border container */
  --fw-border-padding-top: 50px;
  --fw-border-padding-right: 10px;
  --fw-border-padding-bottom: 50px;
  --fw-border-padding-left: 10px;
  --fw-border-background-color: var(--base-background-color2);
  /* Content */
  --fw-content-header-height: 40px;
  --fw-content-footer-height: 40px;
  /* Input */
  --fw-input-height: 40px;
  --fw-input-password-icon-margin-top: 37px;
  --fw-input-password-icon-margin-bottom: 15px;
  --fw-input-password-icon-height: -12px;
  --fw-input-placeholder-color: #bfbfbf;
  --fw-input-border-radius: 9px;
  /* Button */
  --fw-button-height: 40px;
  --fw-button-font-size: 16px;
  --fw-button-border-radius: 8px;
  --fw-button-border-color: transparent;
  --fw-button-border-color2: #a8a8a8;
  --fw-button-background-color: #39a7ff;
  --fw-button-background-color2: #ffffff;
  --fw-button-background-color-active: #3348ff;
  --fw-button-background-color-active2: #eeeeee;
  --fw-button-border-color-active: transparent;
  --fw-button-border-color-active2: #a8a8a8;
  /* Locale */
  --fw-locale-font-size: 16px;
  --fw-locale-border-color: #dddddd;
  --fw-locale-background-color: #ffffff;
  --fw-locale-background-color-active: #e5e5e5;
}
body,*{
	font-family: var(--font-family) !important;
}

.toggle-password {
    position: absolute;
    right: 15px;
    top: 0.7rem;
    cursor: pointer;
}

.star-required{
	color: red;
}

i.dga-logo {
  width: 110px;
  height: 98px;
  background-image: url("../../../images/login/dga-logo.svg");
  z-index: 1;
}

.h-half {
  height: 50%;
}

.bottom-content {
  width: 100%;
  position: absolute;
  height: fit-content;
  bottom: 6rem;
}

@media screen and (max-width: 1199px) {
  .bottom-content {
    width: 85%;
  }
}

@media screen and (max-width: 991px) {
  .bottom-content {
    width: 95%;
  }
}

.bottom-content .bottom-content-info {
  color: #595F79;
}

.bottom-content .bottom-content-contact {
  color: #3348FF;
}

hr {
  border: 1px solid #CCE0FF;
  width: 100%;
}

.dga-manual-btn {
  width: max-content;
  padding-top: 2rem;
}

.dga-manual-btn .p-button {
  color: #040836;
  border-radius: 12px;
  border: none;
  background-color: white;
  box-shadow: 4px 1px 12px 0px #00000045;
}

.dga-manual-btn .p-button .p-button-icon {
  background-color: #3348FF;
  color: white;
  padding: 6px 4px;
  border-radius: 4px;
}

.p-password {
  width: 100%;
}

.p-password .p-inputtext {
  width: 100%;
}

.p-inputtext {
  height: 57px;
  color: #040836;
  border-radius: 9px;
  border: 1px solid #ADADAD;
  padding: .5rem;
}

.system-logo {
  width: 129px;
  height: 129px;
  box-shadow: 0px 0px 16px 12px #2e35ff85;
  outline: 15px solid rgba(29, 23, 75, 0.2);
}

.logo-ribbon {
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(90deg, #3c7aff99 3%, #ffffff50 33%);
  left: -3rem;
  border-radius: 0 1.5rem 1.5rem 0;
}

.login-panel {
  max-width: 33rem;
  max-height: 33.3rem;
  background-color: white;
  position: absolute;
  top: 6rem;
  border-radius: 40px;
  padding: 44px 36px 100px 36px;
  color: #040836;
  box-shadow: 0px 4px 35px 0px #00000014;
}

.header {
  font-size: 28px;
  font-weight: 600;
}

.content {
  margin-top: 1rem;
}

@media screen and (min-width: 1500px) {
  .login-panel {
    width: 28vw;
    height: 60vh;
  }
}

@media screen and (max-width: 1199px) {
  .login-panel {
    position: relative;
  }
}

@media screen and (max-width: 991px) {
  .login-panel {
    top: 0;
  }
}

@media screen and (max-width: 1500px) {
  .p-inputtext {
    height: 42px;
  }

  .login-button-panel p-button {
    margin-top: 12px;
  }

  .login-panel {
    top: 3rem;
    width: 25rem;
    height: 25rem;
    padding: 36px 32px 42px;
  }

  .system-name {
    margin-top: -2rem !important;
  }

  .bottom-content {
    bottom: 4rem;
  }

  dialog {
    height: 98vh !important;
  }
}

.dialog-background {
  top: 0;
  opacity: .5;
  z-index: -1;
  width: 0;
  height: 100%;
  display: flex;
  position: absolute;
  justify-content: flex-end;
  transition: right ease 20s;
  background-color: #00000050;
}

.dialog-background.open {
  width: 100%;
  opacity: 1;
  z-index: 99;
}

.dialog-background.open .dialog {
  right: 0;
}

.dialog {
  top: 0;
  right: -60%;
  padding: 0;
  width: 90%;
  max-width: 692px;
  height: 100vh;
  border: none;
  position: relative;
  box-shadow: 0 20px 60px #0000004d;
  background: white;
  animation: slideIn 0.3s ease-out;
  transition: all ease .5s;
}

.dialog-header {
  background: linear-gradient(90deg, #F05324 0%, #367CFF 100%);
  padding: 16px 32px;
}

.dialog-header span {
  color: white;
  font-weight: 600;
  font-size: 24px;
}

.dialog-header .pi {
  cursor: pointer;
  padding: 16px;
  border-radius: 20px;
  background: white;
}

.dialog-header .pi::before {
  color: #3348FF;
}

.dialog-content {
  padding: 30px;
}

.dialog-content p-button {
  margin: auto 0;
}

.dialog-content .p-button {
  border-radius: 52px;
  display: flex;
  flex-direction: row-reverse;
  background: #3348FF;
}

.dialog-content .p-button:hover {
  background: #5261FE;
}

.dialog-content .p-button-icon {
  margin-left: .5rem;
}

.dialog-content > :nth-child(odd) {
  background: #F0F7FF;
}

.dialog-content > div {
  padding: 16px 24px;
}

body{
  overflow:hidden;
  margin:0;
}

body .fw-container{
  width:100vw;
  height:100vh;
  justify-content:center;
  align-items:center;
}

body .fw-container .fw-body{
  width:var(--width-login);
  height:91%;
  display:flex;
  justify-content:center;
  flex-direction:column;
}

@media (max-width:896px){
  body .fw-container .fw-body{
    width:100%!important;
    height:100%!important;
  }
}

.header-container{
  display:flex;
  align-items:center;
  gap:0.65vw;
  margin-left:15%;
}

.header-title{
  font-weight:600;
  font-size:24px;
  color:#fff;
}

.header-title-content{
  font-size:16px;
  color:#fff;
}

.footer{
  width:100%;
  height:5%;
  position:fixed;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(90deg,#13957b,#0e6f5c);
}

.footer-container{
  display:flex;
  gap:20vw;
  font-size:16px;
  color:#fff;
  padding:10px;
}

.fw-button button{
  box-shadow:none;
  background:var(--button-bg);
  color:#fff;
  width:100%;
  height:var(--button-height);
  padding:8px 24px;
  margin:6px 0;
  border-radius:8px;
  border:none;
}

.fw-button button:hover{
  background:var(--button-bg-hover);
}

.fw-button button:active{
  background:var(--button-bg-active);
}

.login-reset{
  display:flex;
  justify-content:flex-end;
  text-align:right;
  font-size:var(--base-font-size);
  cursor:pointer;
  text-decoration:none;
  font-family:"Prompt",sans-serif;
  color:#040836;
}

.login-checkbox{
  margin:0 10px;
  display:flex;
  align-items:center;
  font-size:var(--base-font-size);
}

.login-checkbox input{
  accent-color:var(--button-bg);
  margin-right:8px;
  width:20px;
  height:20px;
}

.modal{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#00000066;
  z-index:99990;
}

.message-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:600px;
  padding:40px;
  background:var(--base-bg-color2);
  border-radius:9px;
  box-shadow:0px 3px 6px #00000029;
}

.fw-keycloak-message {
  font-size: var(--base-font-size);
}

.fw-keycloak-message-alert {
  font-size: var(--base-font-size);
  background-color: #000000cf;
  white-space: pre-wrap;
  padding: 8px 2rem;
  text-align: center;
  text-align: -webkit-center;

  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 999;

  display: flex;
  align-items: center;
  justify-content: center;
}

.fw-keycloak-message-alert dialog {
  border: none;
  border-radius: 16px;
  max-width: 440px;
  width: 90%;
  padding: 30px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  background: white;
  animation: slideIn 0.3s ease-out;
  margin: auto;
}

.fw-keycloak-message-alert::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease-out;
}

.fw-grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.download-panel{
  width:520px;
}

.custom-header{
  background:linear-gradient(90deg,#f14d2e,#4666ff);
  color:white;
}

.download-box,
.download-row{
  background:#e7edf6;
  padding:0.5rem;
  border-radius:6px;
  margin-bottom:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.btn-download{
  background:linear-gradient(90deg,#3b5bff,#2c7cf7);
  color:white;
  border-radius:10px;
  padding:0.5rem;
  margin-left: 0.5rem;
}

form {
  margin: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}