@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

:root {
    --pf-c-button--m-secondary--BackgroundColor: #DAE1F7;
    --pf-global--primary-color--100: #0A39C7;
    --pf-c-alert__title--Color: white;
    --ubi-grey-dark: #9A9898;
    --ubi-grey-light: #F1F1F1;
    --radiusGlobal: 10px;
    --alert-error: #E83C6B;
    --alert-success: #5ABFAF;
    --alert-warning: #F7C931;
}

body, html{
    background:white !important;
    font-family: "Roboto";
}

#kc-header,
#kc-info,
#kc-locale-wrapper
{
    display : none;
}
#kc-info.login-pf-signup{
    display : block;
    margin-top: 0px;
    padding-bottom: 150px;
}
#kc-page-title{
    margin: auto;
    max-width: 90%;
}
#kc-form-login{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.kc-form-forget-password{ justify-content: center;}
.kc-form-login-subtitle{margin-bottom:20px;}
#kc-page-title{
    font-family: "Comfortaa";
    font-weight:bold;
}
.centered-column{
    /*margin: initial !important;*/
    text-align:center;
    flex:1;
    display:flex;
}
.login-pf-page
{
    position:relative;
    max-width: 600px;
    margin: 0 auto;
    padding:20px;
    display: flex;
    justify-content: space-between;
    min-height: 100%;
    flex-direction: column;
}
.card-pf{
    width:100%;
    padding:0px !important;
    box-shadow:none;
    flex-direction: column;
}
#kc-form,
#kc-content-wrapper,
.card-pf,
#kc-form-wrapper,
#kc-form-wrapper form,
#kc-content{
    display:flex;
    flex:1;
    flex-direction: column;
    justify-content: space-between;
    width:100%;
}


#kc-input-wrapper{
    margin: 15px 0;
}

a:focus,
a:active,
input:focus,
select:focus,
textarea:focus,
button:focus
{
    outline:none;
}
a:hover{
    text-decoration: none;
}

h1{
    font-size:26px !important;
    font-weight: "regular";
}

.form-group{
    display:flex;
    flex-direction: column;
    align-items: flex-start;
}

.instruction{ text-align:center;}
.form-group > div{  display:flex; z-index:1;}
.form-group > div input{   min-width:15px !important;}
.form-group > div label{  padding-left:10px; text-align:left;}
.form-group *:nth-child(1){
    z-index:10;
}

label.pf-c-form__label{
    background:white;
    border-radius: var(--radiusGlobal);
    padding: 1px 5px;
    line-height: 10px;
    margin: 0px 0px -7px 5px;
    font-weight: 500;
}
input.pf-c-form-control,
input.pf-c-form-control:focus,
input.pf-c-form-control:active{
    border-radius: var(--radiusGlobal);
    border-color: #E0E0E0 !important;
    background-color:#FBFBFB;
    border-width:1px !important;
    /*  padding: 20px 10px; */
}

.pf-c-button{
    padding: 15px;
    margin: 0 0 20px 0 !important;
    font-weight: bold;
    border-radius: var(--radiusGlobal);
    text-transform: uppercase;
    color: var(--pf-global--primary-color--100);
}

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

.pf-c-button:hover,
.pf-c-button:focus,
.pf-c-button:active{
    background:var(--pf-global--primary-color--100);
    color:white;
}

#kc-form-buttons{
    margin-top: 20px;
    margin-bottom: -20px;
    /* position:absolute;
    padding:0px;
    bottom: 0px;
    left:0px;
    width: 100%; */
}

#kc-form-options{
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    top: 25px;
    left: 0px;
    margin: 0px;
    padding: 0px;
}
#kc-form-options a:nth-child(1){ color: black; font-size: 20px; padding: 2px; padding-left:20px;}
#kc-form-options a:nth-child(2){ color: black; font-size: 22px; padding-right: 20px;}

.pf-c-alert__icon,
.alert-error .pficon-error-circle-o:before{
    color: white !important;
}

.alert-success{
    background: var(--alert-success);
    border-radius: var(--radiusGlobal);
}

.alert-success{  background: var(--alert-success); }
.alert-error{  background: var(--alert-error);}
.alert-warning{  background: var(--alert-warning);}

.pf-c-alert__title,
.alert-success,
.alert-warning,
.alert-error{
    color: white !important;
    border-radius: var(--radiusGlobal);
}

.alert-success .pf-c-alert__title,
.alert-success .pf-c-alert__icon
{color: white;}

.alert-error:before,
.alert-success:before,
.alert-warning:before
{background-color:transparent !important;}


a, body {
    font-family: 'Poppins',sans-serif;
}

.card-pf {
    margin: 0;
}

.kc-form-forget-password {
    display: block;
    width: 100%;
    text-align: center;
}

.kc-form-forget-password a {
    text-transform: uppercase;
    font-weight: bold;
}

#kc-register{
    padding: 15px;
    border-radius: var(--radiusGlobal);
    text-transform: uppercase;
}

@media (max-width: 768px) {
    #kc-register {
        display: flex;
        flex-direction: column;
    }
}

.kc-form-login-subtitle {
    color: #949494;
    padding: 10px 0;
}

.pf-c-button {
    margin: 10px 0;
}

.pf-m-secondary {
    border: 1px solid;
}

.auth-user-email{
    color: #11a3de !important;
}

.nested-images{
    margin-top:60px;
}

.centered-column{
    margin: auto;
}

.instruction:first-of-type{
    margin-top: 50px;
}
.instruction{
    text-align:left!important;
    color:#000!important;
    font-size:14px!important;
}

p.instruction{
    margin-top: 20px!important;
    margin-bottom: 30px!important;
}

.alert-warning{
    margin-bottom: 15px;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 99; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 72% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 90%; /* Could be more or less, depending on screen size */
    border-radius: 7px!important;
}
.register-modal-footer {
    justify-content: end;
    display: flex;
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.register-modal-btn {
    margin-right: 10px;
    border: 0;
    background-color: white;
    font-family: Roboto;
    font-size: 15px;
    font-weight: bold;
}
.register-modal-btn-yes {
    color:#e83c6b;
}
.register-modal-btn-no {
    color: #11a3de;
}
.register-modal-title{
    color: #000000;
    font-size: 18px;
    font-family: Comfortaa;
    font-weight: bold;
}
.register-modal-p{
    color: #9A9898;
    font-size: 15px;
    font-family: Roboto;
    font-weight: normal;
    line-height: 20px;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}
.register-modal-p > p {
    margin: 0;
}
.pf-c-button.pf-m-primary {
    color: #0C0ABD;
    background-color: #DAE1F7;
}
a {
    color: #0C0ABD;
}
.alert-success.pf-c-alert.pf-m-inline.pf-m-success{
    border-color: var(--alert-success);
}