:root {
    --primary-color: #27303F;
    --text-color: #ffffff;

    --accent-color: #4cb28a;
    --accent-color-dark: hsl(156, 40%, 40%);

    --accent-color-l25: hsl(156, 40%, 25%); /* not used */
    --accent-color-l40: hsl(156, 40%, 40%); /* not used */
    --accent-color-l55: hsl(156, 40%, 55%); /* not used */
    --accent-color-l70: hsl(156, 40%, 70%); /* not used */
    --accent-color-l85: hsl(156, 40%, 85%); /* not used */

    --accent-color-background: #4cb28a1a;   

    --logo-url: url(../img/infovista-logo.png);



    --text-gray-color: #9aa0ac;

    --pf-global--FontFamily--sans-serif: "Proxima Nova","Open Sans",Helvetica,Arial,sans-serif;
    --pf-global--FontSize--md: 16px;

    --pf-c-form__label-text--FontWeight: bold;
    --pf-c-form__label--Color: #364359;

    --pf-global--primary-color--100: var(--accent-color);
    --pf-global--primary-color--200: var(--accent-color-dark);

    --slider-background-color: #EEEEEE;
    --slider-background-color-active: var(--accent-color);
    --slider-button-color: var(--text-gray-color);

}

.login-pf body {
    background: var(--primary-color) none;
    font-family: var(--pf-global--FontFamily--sans-serif);
    font-size: var(--pf-global--FontSize--md);
    color: #27303f;
}


/* logo */
div.kc-logo-text {
    background-image: var(--logo-url);
    background-size: contain;
    background-position: center;
}

@media (min-width: 768px) {
    #kc-header-wrapper {
        padding: 80px 10px 28px;
        white-space: normal;
    }
}


/* card */
.login-pf-page .card-pf {
    max-width: 550px;
    padding: 45px 72px 72px 72px;
    border: 0px solid;
    border-radius: 16px;
}

@media (max-width: 767px) {
    .login-pf-page .card-pf {
        max-width: none;
        padding: 25px 42px 42px 42px;
    }
}


/* header - title */
.login-pf-page .card-pf p {
    color: var(--pf-c-form__label--Color);
}

@media (min-width: 768px) {
    .login-pf-page .login-pf-header {
        margin-bottom: 40px;
    }
}

#kc-page-title {
    font-family: "IBM Plex Sans","Open Sans",Helvetica,Arial,sans-serif;
    font-weight: bold;
    font-size: 34px;
}

#kc-text-subtitle {
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 0px;
    color: var(--text-gray-color);
}


/* group (email, password) */
.form-group {
    margin-bottom: 25px;
}


/* group (remember me) */
.login-pf-page .login-pf-settings {
    margin-top: -10px;
    margin-bottom: 35px;
}


/* edit */
.pf-c-form-control:not(textarea) {
    height: 55px;
    margin-top: 5px;
    font-size: 14px;
} 

.pf-c-form-control:hover, .pf-c-form-control:focus {
    border-bottom-color: var(--accent-color);
    border-bottom-width: var(--pf-global--BorderWidth--md);
}

/* forgot password */
label#kc-label-password {
    float:left;
}

a#kc-link-forgot-password {
    float:right;
    font-weight: 600;
}

.login-pf a {
    color: var(--pf-global--primary-color--100);
}

.login-pf a:hover {
    color: var(--pf-global--primary-color--200);
}

/* eye password */ 
#password { /* change padding to not cover the icon */
    padding-right: 38px;
}
#password[aria-invalid="true"] {
    padding-right: 48px;
}

#togglePassword {
    background-image: url(../img/hide.svg);
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: 4px 10px;
    position: absolute;
    margin-top: 22px;
    margin-left: -35px;
    cursor: pointer;
}

#togglePassword.hidden-off {
    background-image: url(../img/visibility.png);
    background-position: 0px 0px;
    opacity: .2;
}

#password[aria-invalid="true"] + #togglePassword { /* move icon position when error */
    margin-left: -45px;
}

::-xms-reveal { /* remove default edge button */
    display: none;
}

/********** checkbox + radio control **********/
/* only work with Chrome ?!? */
input[type="checkbox"], input[type="radio"] {
    accent-color:var(--accent-color-dark);
}


/* checkbox */
.checkbox label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-gray-color);
    padding-left: 0px;
    display: flex;
    align-items: center;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 32px;
    margin-right: 10px;
}

    /* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

    /* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--slider-background-color);
    border-radius: 34px;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 3px;
    bottom: 3px;
    background-color: var(--slider-button-color);
    border-radius: 50%;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider::before {
    background-color: var(--slider-background-color-active);
}

input:checked + .slider:before {
    -webkit-transform: translateX(28px);
    -ms-transform: translateX(28px);
    transform: translateX(28px);
}


/* button submit */
.btn-lg {
    padding: 16px 16px;
    font-size: 16px;
    font-weight: bold;
}

.pf-m-primary {
    color: var(--text-color);
    background-color: var(--pf-global--primary-color--100);
    border-radius: 6px;
}

.pf-m-primary:hover {
    background-color: var(--pf-global--primary-color--200);
}


/* footer */
#kc-footer-text {
    font-size: 12px;
    font-weight: bold;
    color: var(--text-gray-color);
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 40px;
    z-index: -1;
}

/* icon network */
@media (min-width: 768px) {
    #kc-icon-network {
        position:absolute;
        top: 665px;
        height: min(600px, calc(100% - 665px));
        width: 100%;
        display: flex;
        justify-content: center;
        overflow: hidden;
        z-index: -1;
    }
    #kc-icon-network > div {
        width: 1430px;
        min-width: 1430px;  
        display: flex;
        justify-content: space-between;
    }

    #kc-icon-network .kc-icon-network-bar {
        display: inline-block;
        width: 109px;
        height: calc(100% + 50px);
        border-radius: 38.4px;
        background-color: #f2f5f7;
    }

    #kc-icon-network .kc-icon-network-bar1 {
        margin-top: 161px;
        opacity: 0.1;
    }

    #kc-icon-network .kc-icon-network-bar2 {
        margin-top: 64px;
        opacity: 0.8;
    }

    #kc-icon-network .kc-icon-network-bar3 {
        margin-top: 16px;
        opacity: 0.6;
    }

    #kc-icon-network .kc-icon-network-bar4 {
        margin-top: 73px;
        opacity: 0.24;
    }

    #kc-icon-network .kc-icon-network-bar5 {
        margin-top: 176px;
        opacity: 0.1;
    }

    #kc-icon-network .kc-icon-network-bar6 {
        margin-top: 61px;
        opacity: 0.6;
    }

    #kc-icon-network .kc-icon-network-bar7 {
        margin-top: 0px;
        opacity: 0.8;
    }

    #kc-icon-network .kc-icon-network-bar8 {
        margin-top: 254px;
        opacity: 0.2;
    }
}

/* change placeholder color */
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--text-gray-color) !important;
    opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--text-gray-color) !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
  color: var(--text-gray-color) !important;
}

/* remove autofill background color
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}
*/