/* Only apply to login page */
body[data-view="/Apps/Auth/userlogin"] {
  min-height: 100vh;
  height: auto;
  padding: 0;
  margin: 0;
  color: rgba(255,255,255,.75);
  font-family: 'Anonymous Pro', monospace;  
  background-color: #1a1d2e;
  /*background: linear-gradient(135deg, #1a1d2e 0%, #16213e 100%);*/
  background: linear-gradient(135deg, #0b0d173d 0%, #06194c47 100%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8%;
  position: relative;
  overflow: hidden;
}

/* Move the typewriter text inside loginbox */
body[data-view="/Apps/Auth/userlogin"] .loginbox::before {
  content: "AI Integrated Data Centers ";
  position: absolute;
  bottom: 112%;   /* lock it to top of box */
  left: 0;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  font-size: 20px;
  color: #79c548;
  border-right: 2px solid #9ACD32;
  padding-bottom: 2px;
  animation: typewriter 6s steps(47) infinite,
             blinkTextCursor 500ms infinite;
}

/* Subtext just under the first headline */
body[data-view="/Apps/Auth/userlogin"] .loginbox::after {
  content: "Login to manage, monitor and control infrastructure.";
  position: absolute;
  bottom: calc(100% - 25px); /* slightly closer */
  left: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  bottom: 106%;
}

body[data-view="/Apps/Auth/userlogin"]::before {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  width: 1150px;
  height: 1150px;
  background-image: url(https://kdcmvp.servicedeskhq.com/Resources/Khazna/login-page-globe.png);
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
  margin-bottom: -312px;
  margin-left: -141px;
}

/* Globe Layer 2: Middle globe (globe2.png) */
body[data-view="/Apps/Auth/userlogin"]::after {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
   /* width: 1180px;
    height: 1180px;*/
    width: 1941px;
    height: 1960px;
    background-image: url(https://kdcmvp.servicedeskhq.com/Resources/Khazna/login-page-globe-overlay.png);
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
    /*margin-bottom: -420px;
    margin-left: -365px;*/
    margin-bottom: -772px;
    margin-left: -560px;
   animation: rotateGlobe 60s linear infinite;
}

/* Rotation animation */
@keyframes rotateGlobe {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Ensure login box stays above all globe layers */
body[data-view="/Apps/Auth/userlogin"] .loginbox {
  position: relative;
  z-index: 10;
}


/* Ensure login box stays above the GIF */
body[data-view="/Apps/Auth/userlogin"] .loginbox {
  position: relative;
  z-index: 10;
}

/* Animation with typing, pause, then instant clear */
@keyframes typewriter {
  0%, 83.34%, 100% { 
    width: 0;
    border-right-color: #9ACD32;
  }
  50%, 83.33% { 
    width: 14.7em;
    border-right-color: #9ACD32;
  }
}

@keyframes blinkTextCursor {
  0%, 100% { border-right-color: #9ACD32; }
  50% { border-right-color: transparent; }
}

/* Login Box Styling - Only on login page */
body[data-view="/Apps/Auth/userlogin"] .loginbox {
  color: #ffffff;
  right: 28%;
  margin: 0 auto;
  max-width: 480px;
  width: 180%;
  padding: 4px 18px;
  position: relative;
  border-radius: 24px;
  background: rgb(0 0 0 / 19%);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  /*margin-bottom: -60px;*/
  margin-bottom: 455px;
}
.padblock-vertical, .padblock-vertical2{
      padding: 15px 0px !important;
}
.padblock-vertical2 {
   margin-top: -15px !important;
}

div.loginbox {
    /*bottom: 20px;*/
    position: fixed;
    /*right: 150%;*/
}

body[data-view="/Apps/Auth/userlogin"] .loginlogo {
  display: block;
  margin: 20px 0 10px 0;
  text-align: left;
  width: 180px;
  height: 60px;
  background-image: url(../Resources/Khazna/khazna-logo-light.png);
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
}

/* Hide "Welcome to iviva" */
body[data-view="/Apps/Auth/userlogin"] .appheader {
  display: none;
}

body[data-view="/Apps/Auth/userlogin"] .accountlabel {
  display: none;
}

/* Form Field Styling */
body[data-view="/Apps/Auth/userlogin"] .fieldlist {
  width: 100%;
  border-collapse: collapse;
}

body[data-view="/Apps/Auth/userlogin"] .fieldlist-row {
  margin-bottom: 20px;
  display: block;
}

body[data-view="/Apps/Auth/userlogin"] .fieldlist-row td {
  display: block;
  width: 100%;
}

body[data-view="/Apps/Auth/userlogin"] .fieldlist-name {
    text-align: left !important;
  padding: 0 0 8px 0;
  vertical-align: top;
  display: block;
}

body[data-view="/Apps/Auth/userlogin"] .fieldlist-title {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
  display: block;
}

body[data-view="/Apps/Auth/userlogin"] .fieldlist-content {
  padding: 0;
  display: block;
}

/* Hide first row if it contains subtxt */
body[data-view="/Apps/Auth/userlogin"] .fieldlist-row:first-child {
  display: none;
}

/* Override "User ID" label text with "Email Address" */
body[data-view="/Apps/Auth/userlogin"] .fieldlist-row:nth-child(2) .fieldlist-title {
  font-size: 0;
}

body[data-view="/Apps/Auth/userlogin"] .fieldlist-row:nth-child(2) .fieldlist-title::before {
  content: "Email Address";
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

/* Input Fields */
body[data-view="/Apps/Auth/userlogin"] .textfield_medium {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #ffffff;
  font-size: 14px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

body[data-view="/Apps/Auth/userlogin"] .textfield_medium:focus {
  outline: none;
  border-color: #9ACD32;
  background: rgba(255, 255, 255, 0.08);
}

body[data-view="/Apps/Auth/userlogin"] .textfield_medium::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Checkbox row styling - place checkbox and forgot password on same line */
body[data-view="/Apps/Auth/userlogin"] .fieldlist-row:nth-child(4) {
  margin-bottom: 25px;
}

body[data-view="/Apps/Auth/userlogin"] .fieldlist-row:nth-child(4) td {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Checkbox Styling */
body[data-view="/Apps/Auth/userlogin"] .cb_container {
  display: flex;
  align-items: center;
  gap: 8px;
}

body[data-view="/Apps/Auth/userlogin"] .cb_container input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

body[data-view="/Apps/Auth/userlogin"] .cb_container label {
  font-size: 0;
}

/* Override "Keep me logged in" to "Remember me" */
body[data-view="/Apps/Auth/userlogin"] .cb_container label::before {
  content: "Remember me";
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  user-select: none;
}

/* Action Link - Forgot Password */
body[data-view="/Apps/Auth/userlogin"] .actionlink {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 0;
}

body[data-view="/Apps/Auth/userlogin"] .actionlink::before {
  content: "Forgot Password?";
  font-size: 13px;
  margin-right: 45px;
}

body[data-view="/Apps/Auth/userlogin"] .actionlink:hover {
  color: #79c548;
  /* text-decoration: underline; */
  text-decoration: none;
}

/* Position forgot password link next to Remember me */
body[data-view="/Apps/Auth/userlogin"] .fieldlist-row:last-child {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 280px;
  display: block;
  width: auto;;
}

body[data-view="/Apps/Auth/userlogin"] .fieldlist-row:last-child .fieldlist-name {
  display: none;
}

body[data-view="/Apps/Auth/userlogin"] .fieldlist-row:last-child .fieldlist-content {
  display: block;
  text-align: right;
  padding: 0;
}

/* Submit Button */
body[data-view="/Apps/Auth/userlogin"] .normal_action {
  min-width: 440px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #79c548 0%, #79c548 100%);
  border: none;
  border-radius: 30px;
  color: #1a1d2e;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 14px;
}

body[data-view="/Apps/Auth/userlogin"] .normal_action:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(154, 205, 50, 0.4);
}

body[data-view="/Apps/Auth/userlogin"] .normal_action:active {
  transform: translateY(0);
}

/* Error Message */
body[data-view="/Apps/Auth/userlogin"] .errormessage {
  background-color: #eb85638f !important;
  color: white !important;
  font-weight: 700;
  padding: 12px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* Adjust Forgot Password position when error message is visible */
body[data-view="/Apps/Auth/userlogin"] .errormessage.false ~ table .fieldlist-row:last-child,
body[data-view="/Apps/Auth/userlogin"] .errormessage:not(.invisible) ~ table .fieldlist-row:last-child {
  margin-top: 357px;
}

/* Adjust loginbox position when error message is visible */
body[data-view="/Apps/Auth/userlogin"]:has(.errormessage.false) div.loginbox,
body[data-view="/Apps/Auth/userlogin"]:has(.errormessage:not(.invisible)) div.loginbox {
  right: 28%;
}


/* Subtxt styling */
body[data-view="/Apps/Auth/userlogin"] .subtxt {
  display: none;
}

/* Responsive Design */
@media only screen and (max-width: 768px) {
  body[data-view="/Apps/Auth/userlogin"] {
    justify-content: center;
    padding-right: 5%;
    padding-left: 5%;
  }
  
  body[data-view="/Apps/Auth/userlogin"] .loginbox {
    max-width: 90%;
    padding: 0px 45px;
    margin-top: 40px;
    right: auto;
  }
  
  body[data-view="/Apps/Auth/userlogin"] .loginbox::before {
    font-size: 16px;
  }
  
  body[data-view="/Apps/Auth/userlogin"] .fieldlist-row:nth-child(4) td {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  /* Position forgot password link next to Remember me */
    body[data-view="/Apps/Auth/userlogin"] .fieldlist-row:last-child {
      margin-top: 286px;
    }
}

@media only screen and (min-width: 1224px) {
  body[data-view="/Apps/Auth/userlogin"] .loginbox {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
}


.idx-navigation-bar .idx-logo{
    background-image: url("data:image/svg+xml,%3Csvg width='244' height='45' viewBox='0 0 244 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_13084_607)'%3E%3Cpath d='M55.3763 44.3924L34.4989 17.6076L56.29 0H43.0604L29.6255 10.7975L26.8975 6.93038C25.1295 4.42405 22.6664 2.56329 19.786 1.55696C17.1176 0.620253 14.2174 0.449367 11.3967 1.06329C8.58257 1.67089 6.04656 3.01266 4.06675 4.94937C1.92141 7.03798 0.285913 10.5127 0.0806483 12.7089C0.0342983 13.2025 0.0342983 13.8924 0.0342983 13.8924L0.0078125 14.8291V43.4684C0.0144339 44.7785 1.63006 45.4747 2.66301 44.6203L27.7649 23.3101L44.0669 44.3924H55.3763ZM8.9004 14.5886C8.9004 13.8101 9.03283 13.0316 9.37053 12.3291C10.43 10.1582 12.6084 9.51266 13.3633 9.3481C14.2836 9.1519 17.4553 8.72785 19.5344 11.6835L22.7392 16.2278L8.91365 27.6582L8.9004 14.5886Z' fill='%237EC34C'/%3E%3Cpath d='M67.1719 8.77832H74.5151V24.4619L87.8308 8.77832H96.6638L82.719 24.791L97.9285 44.3733H89.0359L78.0178 30.2214L74.5151 34.1707V44.3733H67.1719V8.77832Z' fill='white'/%3E%3Cpath d='M101.141 7.35449H108.252V21.5064C110.146 18.7089 113.132 17.8355 116.224 17.8355C122.303 17.8355 126.726 21.5064 126.726 27.8735V44.3798H119.442V30.1203C119.442 26.3925 117.489 24.3102 114.165 24.3102C111.066 24.3102 108.431 26.2849 108.431 30.1773V44.3798H101.147V7.35449H101.141Z' fill='white'/%3E%3Cpath d='M143.994 38.3924C148.178 38.3924 151.569 35.1582 151.569 31.481C151.569 27.5316 148.185 24.2975 143.994 24.2975C139.802 24.2975 136.478 27.5316 136.478 31.538C136.478 35.1582 139.862 38.3924 143.994 38.3924ZM129.539 31.538C129.539 23.3671 136.478 17.8291 142.795 17.8291C147.099 17.8291 149.562 19.0886 151.231 21.5V18.3228H158.342V44.3734H151.059V41.6835C149.165 43.6582 146.814 44.8671 142.795 44.8671C136.598 44.8671 129.539 39.6582 129.539 31.538Z' fill='white'/%3E%3Cpath d='M161.617 38.0068L174.814 24.4118H161.617V18.3232H183.475V24.4625L170.338 38.2853H183.475V44.3739H161.617V38.0068Z' fill='white'/%3E%3Cpath d='M186.742 18.3228H193.854V21.5063C195.747 18.7088 198.727 17.8291 201.826 17.8291C207.904 17.8291 212.327 21.5063 212.327 27.8671V44.3734H205.037V30.1139C205.037 26.3861 203.084 24.3038 199.76 24.3038C196.661 24.3038 194.026 26.2785 194.026 30.1709V44.3734H186.742V18.3228Z' fill='white'/%3E%3Cpath d='M229.658 38.3924C233.849 38.3924 237.233 35.1582 237.233 31.481C237.233 27.5316 233.849 24.2975 229.658 24.2975C225.466 24.2975 222.142 27.5316 222.142 31.538C222.142 35.1582 225.526 38.3924 229.658 38.3924ZM215.203 31.538C215.203 23.3671 222.142 17.8291 228.453 17.8291C232.757 17.8291 235.226 19.0886 236.888 21.5V18.3228H244V44.3734H236.716V41.6835C234.822 43.6582 232.472 44.8671 228.453 44.8671C222.255 44.8671 215.203 39.6582 215.203 31.538Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_13084_607'%3E%3Crect width='244' height='45' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A") !important;
}
.collapsed-menu .idx-navigation-bar .idx-logo{
    background-image: url("data:image/svg+xml,%3Csvg width='56' height='45' viewBox='0 0 56 45' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_13084_607)'%3E%3Cpath d='M55.376 44.392 34.5 17.608 56.29 0H43.06L29.625 10.798 26.899 6.93a14.53 14.53 0 0 0 -7.112 -5.373 15.4 15.4 0 0 0 -8.39 -0.494c-2.813 0.608 -5.35 1.95 -7.33 3.886C1.922 7.038 0.287 10.513 0.082 12.71c-0.047 0.494 -0.047 1.183 -0.047 1.183l-0.026 0.937v28.64c0.006 1.31 1.622 2.006 2.655 1.151l25.102 -21.31 16.302 21.082zM8.9 14.59c0 -0.779 0.133 -1.557 0.47 -2.26 1.06 -2.17 3.238 -2.816 3.993 -2.98 0.92 -0.197 4.092 -0.621 6.171 2.335l3.205 4.544 -13.825 11.43z' fill='%237EC34C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_13084_607'%3E%3Cpath width='56' height='45' fill='white' d='M0 0H244V45H0V0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") !important;
}

.idx-navigation-bar,
.simulation .idx-navigation-bar{
    background: rgb(10, 9, 31) !important;
}

.idx-navigation-bar .navigation-link-wrap .idx-link{
    color: #9de9b1 !important;
}
.idx-navigation-bar .navigation-link-wrap .idx-link span{
    border-radius: 20px !important;
}

.idx-navigation-bar .navigation-link-wrap .idx-link span:hover,
.idx-navigation-bar .navigation-link-wrap .idx-link.active span{
    background-color: #2ACF56 !important;
    color: #0c0c17ff !important;
}


.idx-navigation-bar .navigation-link-wrap .idx-link.has-front-icon span::before{
    filter: brightness(0) saturate(100%) invert(62%) sepia(85%) saturate(449%) hue-rotate(81deg) brightness(91%) contrast(87%);
}

.idx-navigation-bar .navigation-link-wrap .idx-link.has-front-icon span:hover::before,
.idx-navigation-bar .navigation-link-wrap .idx-link.has-front-icon.active span::before{
    filter: brightness(0) saturate(100%) invert(99%) sepia(64%) saturate(1072%) hue-rotate(184deg) brightness(113%) contrast(100%) !important;
}

.appheader .brandinglabel {
display: none;
}