:root {
    --ak-accent: #3a3a40;
    --pf-global--primary-color--100: #3a3a40;
    --pf-global--primary-color--200: #3a3a40;
    --pf-global--primary-color--400: var(--ak-accent);
    --pf-c-form-control--BorderRadius: 20px;
  }



/*** Main login page ***/

.pf-c-login__main {
    background-color: transparent !important;
    backdrop-filter: blur(8px);
    border: 2px solid #807e82;
}

/* Glowing border */

@keyframes pulse-border {
    0% {
        box-shadow: 0 0 10px #807e82, 0 0 15px #807e82;
    }
    50% {
        box-shadow: 0 0 15px #807e82, 0 0 25px #807e82;
    }
    100% {
        box-shadow: 0 0 10px #807e82, 0 0 15px #807e82;
    }
}

.pf-c-login__main {
    animation: pulse-border 3s infinite; /* added this */
}





.pf-c-page__sidebar {
  background-color: transparent !important;
  backdrop-filter: blur(10px);
}
.pf-c-login__main-footer-band,
.pf-c-login__footer .pf-c-list {
  background-color: transparent !important;
}
.pf-c-login__main::before,
.pf-c-login__main-footer-band::before,
.pf-c-login__footer .pf-c-list::before,
.pf-c-page__sidebar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.1;
}




/*** Other Auth Providers ***/


.pf-c-login__main-footer-links-item { /* Sets auth provider buttons width */
    width: 85% !important;
}

.pf-c-button__icon {
    display: flex;
    align-items: center; /* Centers the icons vertically */
}

.pf-c-button.pf-m-link {
    --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-link--disabled--BackgroundColor);
    color: white; /* Text color */
    background-color: #222324; /* Button color */
    border-radius: 20px 20px 20px 20px; /* Corner Radius */
    opacity: 0.785; /* Transparency */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); /* Shadow */
    display: flex;
    justify-content: center; /* Centers the text horizontally */
    align-items: center; /* Centers the text vertically */
    width: 90%; /* If you change this it will be ugly */
    margin: 0 auto !important; /* Centers the box horizontally */
}


.pf-c-button.pf-m-secondary.ak-stage-authenticator-validate-webauthn:hover,
.pf-c-button.pf-m-primary.ak-stage-authenticator-validate-webauthn:hover,
.pf-c-button.pf-m-block.ak-stage-authenticator-validate-code:hover,
.pf-c-button.pf-m-primary.ak-stage-identification:hover,
.pf-c-button.pf-m-block.ak-stage-identification:hover,
.pf-c-button.pf-m-link:hover,
.pf-c-button.pf-m-block:hover {
    box-shadow: 0 0 5px 3px #d6d6d6; /* Animated glowing aura on hover */
}

/* Provider Icons */







    white-space: normal; /* Allows text to wrap */
    word-wrap: break-word; /* Breaks long words if necessary */
    font-size: 14px; /* Adjusts the font size */
    padding: 10px 15px; /* Adjusts padding for better spacing */
    text-align: center; /* Centers the text *//* Login buttons */

.pf-c-button.pf-m-block {
    --pf-c-button--disabled--BackgroundColor: var(--pf-c-button--m-link--disabled--BackgroundColor);
    color: white;
    background-color: #3a3a40;
    border-radius: 20px 20px 20px 20px;
    opacity: 0.785;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    width: 50%; /* Set the width you desire */
    margin: 0 auto; /* Centers the box horizontally */
    padding-top: 5px;    /* Adjust the value as needed */
    padding-bottom: 5px; /* Adjust the value as needed */
}

.pf-c-button.pf-m-block.ak-stage-authenticator-validate-code,
.pf-c-form__group.pf-m-action.ak-stage-authenticator-validate-code {
    display: flex;
    flex-direction: column;
    gap: 16px;

    /* Add padding to create space above and below the buttons */
    padding-top: 16px;    /* Adjust the value as needed */
    padding-bottom: 16px; /* Adjust the value as needed */
}

.pf-c-button.pf-m-secondary.ak-stage-authenticator-validate-webauthn,
.pf-c-button.pf-m-primary.ak-stage-authenticator-validate-webauthn,
.pf-c-button.pf-m-block.ak-stage-authenticator-validate-code,
.pf-c-button.pf-m-primary.ak-stage-identification,
.pf-c-button.pf-m-block.ak-stage-identification {
    display: block;
    margin: 6px auto !important; /* Centers the box horizontally */
    border-radius: 20px 20px 20px 20px;
    width: 50%; /* Sets the button's width to 50% */
    white-space: normal; /* Allows text to wrap */
    word-wrap: break-word; /* Breaks long words if necessary */
    font-size: 16px; /* Adjusts the font size */
    padding: 10px 15px; /* Adjusts padding for better spacing */
    text-align: center; /* Centers the text */
    box-sizing: border-box; /* Includes padding within the width */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    padding-top: 5px;    /* Adjust the value as needed */
    padding-bottom: 5px; /* Adjust the value as needed */
}



/*** flows ***/
.pf-c-background-image {
  --pf-c-background-image--Filter: none;
}



.pf-c-title.pf-m-3xl {
    font-size: var(--pf-c-title--m-3xl--FontSize);
    font-weight: var(--pf-c-title--m-3xl--FontWeight);
    line-height: var(--pf-c-title--m-3xl--LineHeight);
    text-align: center; /* added this */
}



.pf-c-list.pf-m-inline {
    --pf-c-list--PaddingLeft: 0;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    visibility: hidden; /* added this */
}




.ak-login-container {
  /* fix #4830 */
  justify-content: initial;
}
.pf-c-login__header {
  margin-top: 10px;
}




/* give both the blur and color same radius */
.pf-c-login__main,
.pf-c-login__main::before {
  border-radius: 25px 25px 25px 25px;
}
.pf-c-login__main-footer-band,
.pf-c-login__main-footer-band::before {
  border-radius: 25px 25px 25px 25px;
}
.pf-c-login__footer .pf-c-list,
.pf-c-login__footer .pf-c-list::before {
  border-radius: 25px 25px 25px 25px;
}

.pf-c-login__main::before,
.pf-c-login__main-footer-band::before,
.pf-c-login__footer .pf-c-list::before {
  background-color: var(--ak-dark-background);
}
.pf-c-form__label-text {
    border-radius: 20px 20px 20px 20px; /* added this */
    opacity: 0.60; /* added this */
    color: var(--ak-dark-foreground);
}





/*Email or username input, this also applies to other fields in Authentik */



.pf-c-form-control {
    border-radius: 20px 20px 20px 20px !important; /* added this */
    border: 2px solid #3a3a40 !important; /* added this */
}

.pf-c-input-group {
    border-radius: 20px 20px 20px 20px !important; /* added this */
}

.pf-c-title {
    color: var(--ak-dark-foreground);
}


@media (prefers-color-scheme: dark) {
  .pf-c-login__main::before,
  .pf-c-login__footer .pf-c-list::before {
    background-color: var(--ak-dark-background);
  }
}






/*** user interface ***/
.header input {
  border-bottom-color: var(--pf-global--primary-color--100);
}


/* Text color, this applies globally */


a,
body,
h1,
h2,
.pf-c-expandable-section__toggle, /* More details tab under application */
.pf-c-page__header-tools, /* Username in top right of application menu */
.pf-c-button /* Cant remember */{
    color: #b7b7b7 !important;
}



/* Force light mode users to have a different colored icons for the notifications, settings, logout, admin menu buttons etc */

  :host([theme="light"]) .pf-c-page__header-tools-item .fas, :host([theme="light"]) .pf-c-notification-badge__count, :host([theme="light"]) .pf-c-page__header-tools-group .pf-c-button {
      color: #b7b7b7 !important;
  }


/* Sets app cards to have rounded corners and transparency */

.pf-c-card.pf-m-compact,
.pf-c-expandable-section.pf-m-display-lg {
    position: relative;
    overflow: hidden;
    border-radius: 20px; /* Rounded corners */
    background: rgba(18, 18, 18, 0.4); /* Maintain the glass-like effect */
    backdrop-filter: blur(7px); /* Frosted glass effect */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border for outline */
    transition: box-shadow 0.3s ease-in-out; /* Smooth transition for the box-shadow */

    /* Default shadow style */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);

    /* Darker transparent gradient for a modern look */
    background: linear-gradient(
        135deg,
        rgba(30, 30, 30, 0.3) 0%,
        rgba(15, 15, 15, 0.3) 100%
    );
}




/* Apps glow on hover */



.pf-c-card.pf-m-compact:hover,
.pf-c-expandable-section.pf-m-display-lg:hover {
    box-shadow: 0 0 15px 3px #d6d6d6; /* Animated glowing aura on hover */
}


.pf-c-card.pf-m-compact::before,
.pf-c-expandable-section.pf-m-display-lg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    mix-blend-mode: overlay;
    pointer-events: none;
}



/* Sets rounded corners for all app icons */

.icon.pf-c-avatar {
    border-radius: 15px; /* Adjust the value as needed */
}




/*** admin interface ***/
.pf-c-page__sidebar {
  backdrop-filter: blur(10px);
}


.pf-c-page,
.pf-c-tabs__item {
    background-color: transparent !important;
}