:root{
    --primary: #2f294e;
    --primaryDark: #1b1730;
    --secondary: #FFD400;
    --secondaryDark: #8c7500;
    --textcolor: rgb(255, 255, 255);
    --warning: rgb(255, 165, 0);
  }

@font-face {
    font-family: "Ubuntu";
    src: url("/assets/fonts/Ubuntu-Regular-webfont.ttf") format("ttf");
   }

body, html{
    display:flex;
    color:var(--textcolor);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    margin:0;
    padding:0;        
    min-height: 100vh;
    min-width: 100vw;
    background:linear-gradient(40deg, var(--primary) 0px, var(--primaryDark) 70%);
    font-family: 'Ubuntu', sans-serif;
}
p{
    line-height: 1.5em;
}
form .row { margin:10px;}
form > div > .row > *{ margin:10px; padding:10px; width: 100%;}


@keyframes flashmessages {
    from {opacity: 1;}
    to {opacity: 0; visibility: hidden;}
  }

.flashmessages { 

    animation: flashmessages .5s linear 1.5s 1 normal forwards;

    position: absolute;
    top:0;
    left:0;
    box-sizing: border-box;
    width: 100%;
} 

.flashmessages > * { 
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    padding: 10px;
    color: var(--textcolor);
}

.flashmessages > .warning{ background: var(--warning);}
.flashmessages > .success,
.flashmessages > .note{ background: var(--primary); color:var(--primaryDark)}

a{
    color: var(--textcolor);
    text-decoration: none;
    font-weight: bold;
}

.wrapper { 
    display:flex;
    width: 100%;
    box-sizing:border-box;
    max-width: 600px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align: center;
    padding: 20px;
}

.wrapper code { background: #F5F5F5; padding: 2px 6px; }
.wrapper img  { width:200px;}

label{
    display: block;
    margin:20px 0 10px;
    font-size: 12px;
    text-align: left;
}

input{
    background: transparent;
    border: none;
    border: solid thin white;
    color: white;
    padding: 10px;
}

/*-- HACK for CHROME => autocomplete (disable back white input) --*/
input:-webkit-autofill {  -webkit-background-clip: text;}
input:-webkit-autofill{-webkit-text-fill-color: white !important;}

input[type="text"],
input[type="email"],
input[type="password"]
{ box-sizing: border-box; width: 100%;}
input::placeholder{color: white;}

.wrapper button, a.button {
    margin: auto;
    width: 100%;
    max-width: 400px;
    margin: 15px 0;
    display: block;
    background:linear-gradient(40deg, var(--secondary) 0px, var(--secondaryDark) 70%);
    padding: 15px 0;
    border: none;
    border-radius: 10px;
    color: white;
    font-size: larger;
    font-weight: bold;
}

.wrapper form{width:100%; max-width: 400px;}
.wrapper form > .forgot_password,
.wrapper form > .register,
.wrapper form > .login
{margin: 15px 0;}
.form-check label{display:inline;}

.invalid-feedback {
    font-variant: all-small-caps;
    font-style: italic;
    font-weight: bold;
    color: var(--warning);
}

.bv-layout__with_header header{
    display: none !important;
}