/*===== GOOGLE FONTS =====*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap");

@font-face {
  font-family: "conthrax";
  src: url(../font/conthrax-sb.ttf);
}

:root {
  /*===== Font and typography =====*/
  --body-font: "Rajdhani", sans-serif !important;
  --pancar-font: "conthrax";
  --normal-font-size: 1rem;
  --white-color: #f7f6fb;
  --purple-color: #171a1f;
  --red-color: #c92f33;
  --blue-color: #435ea9;
  --orange-color: #D56936;
  --green-color: #80b317;
  --white-color-alpha: rgba(247, 246, 251, 85%);

  --z-fixed: 100;
  --transition: 0.2s;
  --blur-strength: 10px !important;
  --box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em,
    rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em,
    rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;

  /*TODO ============= MAIN COLOR THEME ==============*/
  --background-linear-white: linear-gradient(
    133deg,
    rgba(255, 255, 255, 0.8) 30%,
    rgba(255, 255, 255, 0.6) 100%
  ) !important;
  --background-linear-gray: linear-gradient(
    133deg,
    rgba(38, 45, 52, 100%) 30%,
    rgba(38, 45, 52, 100%) 100%
  ) !important;

  /* --background-linear: linear-gradient(145deg, rgb(17, 1, 68) 2%, rgba(45, 22, 113, 1) 50%, rgba(67, 37, 152, 1) 100%) !important; */
  --background-linear: rgb(23, 26, 31);
  --background-linear: linear-gradient(
    180deg,
    rgba(23, 26, 31, 1) 0%,
    rgba(23, 26, 31, 1) 73%
  );

  --background-accent: var(--orange-color) !important;
  --hover-text-color: var(--purple-color) !important;
  --text-title: var(--purple-color) !important;
}

.white-color {
  color: var(--white-color);
  /* -webkit-text-stroke: 0.5px white; */
}
.orange-color {
  color: var(--blue-color);
  -webkit-text-stroke: 0.5px white;
}

#background-animate {
  position: fixed;
  width: 100%;
  height: 100vh;
}

body {
  height: 100vh;
  background: var(--background-linear);
  font-family: var(--body-font) !important;
  display: flex;
}

.pancar-font {
  font-family: var(--pancar-font) !important;
}

.form-login {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

.border-cek {
  border: 1px solid red !important;
}

.switch-user {
  /* border: 1px solid red; */
}

.switch-user button {
  /* border: 1px solid yellow; */
  width: 100%;
  background: var(--orange-color);
  border-radius: 30px !important;
  font-family: var(--body-font);
  letter-spacing: 3px;
  transition: var(--transition);
}

.button-user {
  background-color: var(--orange-color) !important;
  font-size: 0.9rem !important;
}

.button-admin {
  background-color: var(--purple-color) !important;
  font-size: 0.9rem !important;
}

.button-user:hover,
.button-admin:hover {
  background-color: var(--orange-color) !important;
}

h5 {
  /* color: var(--text-title) !important; */
  font-weight: 800;
  letter-spacing: 5px;
  font-size: 1.5rem !important;
  font-variant: small-caps;
}

h6 {
  color: var(--text-title) !important;
  font-weight: 400;
  font-size: 1.2rem !important;
  letter-spacing: 3px;
}

a {
  color: var(--background-accent);
}

main {
  flex: 1 0 auto;
}

.i-vertical {
  /* border: 1px solid red; */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem !important;
}

.btn-login {
  background-color: var(--orange-color) !important;
  border-radius: 30px !important;
  letter-spacing: 3px;
  transition: var(--transition);
  font-family: var(--body-font) !important;
}

.btn-login div {
  display: inline-flex;
}

.btn-login:hover {
  background: var(--background-accent);
}

.box {
  border-radius: 40px;
  /* border: 1px solid var(--orange-color); */
  width: 400px;
  min-width: 300px;
  background: var(--background-linear-white) !important;
  z-index: 100;
  position: relative;
  backdrop-filter: blur(var(--blur-strength));
  -webkit-backdrop-filter: blur(var(--blur-strength));
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  font-family: var(--body-font) !important;
}

/* Input Field Label */
.input-field input[type="date"]:focus + label,
.input-field input[type="text"]:focus + label,
.input-field input[type="email"]:focus + label,
.input-field input[type="password"]:focus + label {
  color: var(--orange-color) !important;
}

/* Input Field input */
.input-field input[type="date"],
.input-field input[type="text"],
.input-field input[type="email"],
.input-field input[type="password"] {
  color: var(--orange-color) !important;
  /* border-bottom: 1px solid var(--orange-color) !important; */
}

/* Input Field border bottom */
.input-field input[type="date"]:focus,
.input-field input[type="text"]:focus,
.input-field input[type="email"]:focus,
.input-field input[type="password"]:focus {
  border-bottom: 1px solid var(--orange-color) !important;
  box-shadow: none;
  color: var(--orange-color) !important;
}

.field-password {
  float: right;
  display: flex;
  color: var(--orange-color);
}

.field-password > :nth-child(1) {
  margin-right: 10px;
  vertical-align: middle;
  padding-top: 2px;
  font-size: 12px;
}

.swal-css {
  color: var(--main-color) !important;
  max-width: 500px !important;
  border-radius: 15px !important;
}

.swal2-popup {
  background-color: rgba(255, 255, 255, 80%) !important;
  backdrop-filter: blur(5px) !important;
}

.swal2-confirm {
  background-color: var(--background-accent) !important;
  width: 120px;
  height: 40px;
  border-radius: 15px !important;
  font-weight: 400;
  letter-spacing: 2px;
}

.swal2-deny {
}

.swal2-cancel {
}

.swal-title-css {
  font-weight: 600;
  color: var(--text-title) !important;
  padding: 10px;
  font-size: 1.5em;
}

.swal-title-css-error {
  font-weight: 600;
  color: var(--red-color);

  padding: 10px;
  font-size: 1.5em;
}

#version-footer {
  /* background-color: rgba(0, 0, 0, 0.25); */
  width: 100%;
  position: fixed;
  bottom: 0;
  padding: 10px;
  padding-right: 20px;
  color: rgba(255, 255, 255, 0.491);
  text-align: center;
  display: flex;
  justify-content: space-between;
  font-variant: small-caps;
  font-size: 1rem;
  font-family: var(--pancar-font) !important;
}

#version-footer div {
  margin: 5px;
}