@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
    --keycloak-logo-height: 45px;
    --keycloak-logo-width: 224px;

    --dedrone-c2-logo-url: url('../img/dedrone-c2-logo.svg');
    --dedrone-c2-background: #000;
    --dedrone-c2-border-color: #353A3F;
    --dedrone-c2-success-color: #1CBB40;
    --dedrone-c2-warning-color: #FFD700;
    --dedrone-c2-error-color: #FF1E05;
    --dedrone-c2-label-font-weight: 500;
    --dedrone-c2-label-font-size: 12px;
    --dedrone-c2-border: 1px solid var(--dedrone-c2-border-color);
    --dedrone-c2-primary-button-background-color: var(--dedrone-c2-warning-color);
    --dedrone-c2-primary-button-color: black;
    --dedrone-c2-secondary-button-background-color: #FFFFFF;
    --dedrone-c2-secondary-button-color: black;
    --dedrone-c2-hover-background: #101010;
    --dedrone-c2-border-radius: 4px;
    --dedrone-c2-text-color: #FFFFFF;
    --dedrone-c2-text-color-disabled: #6E757C;
    --dedrone-c2-placeholder-color: #CFD4D9;
    --dedrone-c2-font-size: 14px;
    --dedrone-c2-font-family: 'IBM Plex Sans';
    --dedrone-c2-form-width: 320px;
    --dedrone-c2-helper-text-font-size: 10px;

    --pf-v5-global--FontSize--md: var(--dedrone-c2-font-size);
    --pf-v5-global--FontFamily--text: var(--dedrone-c2-font-family), sans-serif;
    --pf-v5-global--FontFamily--heading--sans-serif: var(--dedrone-c2-font-family), sans-serif;

    --pf-v5-global--success-color--100: var(--dedrone-c2-success-color);
    --pf-v5-global--danger-color--100: var(--dedrone-c2-error-color);

    color: var(--dedrone-c2-text-color);

}

body, input, button, select, textarea {
    font-family: var(--dedrone-c2-font-family), sans-serif;
    font-size: var(--dedrone-c2-font-size);
}

/********* PASSWORD RULES **************/

.dedrone-password-rules {
    width: var(--dedrone-c2-form-width);
    margin: 24px auto 24px;
    font-size: var(--dedrone-c2-label-font-size);
}

.dedrone-password-rules-title {
    margin: 0 0 8px 0;
    color: var(--dedrone-c2-placeholder-color);
    font-weight: var(--dedrone-c2-label-font-weight);
}

.dedrone-password-rules ol {
    list-style: decimal;
    padding-left: 15px;
    margin: 0;
    color: var(--dedrone-c2-placeholder-color);
}

.dedrone-password-rules ol li + li {
    margin-top: 4px;
}

/********* OVERWRITTEN  STYLES **************/

.pf-v5-c-button.pf-m-primary {
    background-color: var(--dedrone-c2-primary-button-background-color);
    color: var(--dedrone-c2-primary-button-color);
}

.pf-v5-c-button.pf-m-secondary {
    background-color: var(--dedrone-c2-secondary-button-background-color);
    color: var(--dedrone-c2-secondary-button-color);
}

.pf-v5-c-button.pf-m-primary:hover {
    background-color: var(--dedrone-c2-primary-button-background-color);
    color: var(--dedrone-c2-primary-button-color);
}

.pf-v5-c-button.pf-m-secondary:hover {
    background-color: var(--dedrone-c2-secondary-button-background-color);
    color: var(--dedrone-c2-secondary-button-color);
}

.pf-v5-c-button.pf-m-control {
    background: none;
    border: none;
    margin: auto -28px;
    padding: 0;
    color: var(--dedrone-c2-text-color);
}

.pf-v5-c-form-control__utilities {
    position: absolute;
    left: 100%;
}

.pf-v5-c-form-control__utilities > span {
    margin-left: 10px;
}

h1,h2,h3,h4,h5,h6 {
    color: var(--dedrone-c2-text-color);
}

.pf-v5-c-form-control > :is(input,select,textarea), .dedrone-select-button {
    border: var(--dedrone-c2-border);
    background-color: var(--dedrone-c2-background);
    border-radius: var(--dedrone-c2-border-radius);
    color: var(--dedrone-c2-text-color);
    font-size: var(--dedrone-c2-font-size);
    padding: 9px 14px;
    height: 36px;
}

.pf-v5-c-form-control > ::placeholder {
    color: var(--dedrone-c2-placeholder-color);
}

.pf-v5-c-form-control {
    border: none;
    background-color: transparent;
}

.pf-v5-c-login__main {
    border-radius: var(--dedrone-c2-border-radius);
    background-color: var(--dedrone-c2-background);
    box-shadow: none;
}

.pf-v5-c-login__main-header {
    display: none;
    border: none;
}

.pf-v5-c-form-control:after {
    border: none;
    background-color: transparent;
}

.pf-v5-c-form-control:before {
    border: none;
    background-color: transparent;
}

.pf-v5-c-button:after {
    border: none;
}

.pf-v5-c-input-group__item:where(:not(:first-child)) {
    margin: 0;
    border: none;
}

.pf-v5-c-form__label-text {
    display: none;
}

#kc-passwd-update-form .pf-v5-c-form__label-text {
    display: inline;
    color: var(--dedrone-c2-text-color);
    font-size: var(--dedrone-c2-label-font-size);
    font-weight: var(--dedrone-c2-label-font-weight);
}

#kc-passwd-update-form .pf-v5-c-form__group-label {
    margin-bottom: 12px;
}

#kc-register-form .pf-v5-c-form__group-label {
    display: none;
}

.pf-v5-c-check__label {
    color: var(--dedrone-c2-text-color);
}

.pf-v5-c-alert {
    border: var(--dedrone-c2-border);
    border-radius: var(--dedrone-c2-border-radius);
    background-color: var(--dedrone-c2-background);
    padding: 8px;
    width: var(--dedrone-c2-form-width);
    margin: auto;
    font-size: var(--dedrone-c2-label-font-size);
}

.pf-v5-c-alert.pf-v5-u-mb-md {
    margin-bottom: 24px !important;
}

.pf-v5-c-alert__title {
    color: var(--dedrone-c2-text-color);
    font-weight: var(--dedrone-c2-label-font-weight);
}

.pf-v5-c-alert__icon {
    margin-right: 10px;
    padding-top: 1px;
}

ul.pf-v5-c-login__main-body {
    margin-top: 20px;
}

ul.pf-v5-c-login__main-body .pf-v5-c-button.pf-m-secondary {
    background-color: var(--dedrone-c2-primary-button-background-color);
    color: var(--dedrone-c2-primary-button-color);
    margin-top: 10px;
}

ul.pf-v5-c-login__main-body .pf-v5-c-button.pf-m-secondary:hover {
    background-color: var(--dedrone-c2-primary-button-background-color);
    color: var(--dedrone-c2-primary-button-color);
}

.pf-v5-c-login__main-body #kc-error-message p {
    color: var(--dedrone-c2-text-color);
    padding: 20px 0;
}

.pf-v5-c-login__main-body #kc-idp-review-profile-form .pf-v5-c-form__group .pf-v5-c-form__group-label .pf-v5-c-form__label .pf-v5-c-form__label-text {
    color: var(--dedrone-c2-text-color);
    display: contents;
}

.pf-v5-c-login__main-body #kc-update-profile-form .pf-v5-c-form__group .pf-v5-c-form__group-label .pf-v5-c-form__label .pf-v5-c-form__label-text {
    color: var(--dedrone-c2-text-color);
    display: contents;
}

button.pf-v5-c-button:disabled {
    background-color: var(--dedrone-c2-border-color);
    color: var(--dedrone-c2-text-color-disabled);
}

.pf-v5-c-helper-text__item-text {
    color: var(--dedrone-c2-text-color);
    font-size: var(--dedrone-c2-font-size);
}

.pf-v5-c-helper-text__item-text.kc-feedback-text {
    font-size: var(--dedrone-c2-helper-text-font-size);
}

div.kc-logo-text {
    background-image: var(--dedrone-c2-logo-url);
    background-repeat: no-repeat;
}

.pf-v5-c-login__header .pf-v5-c-brand {
    margin-block-end: 64px;
}

.login-pf body {
    background: var(--dedrone-c2-background) none;
}

.pf-v5-c-form__group {
    position: relative;
    width: var(--dedrone-c2-form-width);
    margin: auto;
}

.select-org-label {
    font-size: var(--dedrone-c2-font-size);
    margin: 25px 0 15px 0;
}

.dedrone-select-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    text-align: start;
    appearance: none;
    padding: 0 9px;
    width: 100%;
    cursor: pointer;
}

.dedrone-select {
    color: var(--dedrone-c2-text-color);
    font-size: 14px;
}

/*Fontawesome icon*/
.dedrone-select .dedrone-select-button::after {
    content: "\f078";
    font-family: "Font Awesome 6 Sharp", sans-serif;
}

.dedrone-select.expanded .dedrone-select-button::after {
    transform: rotate(180deg);
}

.dedrone-select.expanded .dedrone-select-button {
    border-radius: var(--dedrone-c2-border-radius) var(--dedrone-c2-border-radius) 0 0;
    background-color: var(--dedrone-c2-border-color);
}

.dedrone-select-options {
    display: none;
    position: absolute;
    max-height: 400px;
    overflow-y: auto;
    border: var(--dedrone-c2-border);
    border-radius: 0 0 var(--dedrone-c2-border-radius) var(--dedrone-c2-border-radius);
    z-index: 1;
    left: 0;
    right: 0;
}

.dedrone-select-options li {
    height: 36px;
    background-color: var(--dedrone-c2-background);
    border: var(--dedrone-c2-border);
    border-radius: 0;
}

.dedrone-select-options li:last-child {
    border-radius: 0 0 var(--dedrone-c2-border-radius) var(--dedrone-c2-border-radius);
}

.dedrone-select-options li a {
    color: var(--dedrone-c2-text-color);
    text-decoration: none;
    text-align: justify;
    display: flex;
    align-items: center;
    padding: 0 9px;
    appearance: none;
    height: 100%;
    width: 100%;
}

.dedrone-select-options li a:hover {
    background-color: var(--dedrone-c2-hover-background);
}

.dedrone-select.expanded .dedrone-select-options {
    display: block;
}

.dedrone-organization-submit {
    margin-top: 50px;
    width: 100%;
}

.forgot-password-container > span {
    margin: auto;
}

.forgot-password-container > span > a {
    appearance: none;
    color: var(--dedrone-c2-text-color);
}

/*************** ICONS **************/

.pf-v5-c-alert__icon .fa-circle-exclamation {
    color: var(--dedrone-c2-error-color);
}

.pf-v5-c-alert__icon .fa-square-exclamation {
    color: var(--dedrone-c2-warning-color);
}

.pf-v5-c-alert__icon .fa-circle-check {
    color: var(--dedrone-c2-success-color);
}

.pf-v5-c-alert__icon .fa-circle-info {
    color: white;
}