/**********************************************/
/* FONTS                                      */
/**********************************************/
@font-face { font-family: "roboto-medium"; src: url("/static/fonts/Roboto-Medium.ttf") format("truetype"); }

html {
    background: url(/static/images/backgrounds/okavango.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
:root {
    --white:            #ffffff;
    --black:            #333333;
    --blue:             #336699;
    --light-blue:       #7ceeff;
    --dark-blue:        #172344;
    --red:              #bd3939;
    --gray-50:          #f1efef;
    --gray-100:         #f7f8f9;
    --gray-200:         #c0c2c6;
    --gray-300:         #88898c;
    --gray-400:         #3d3d3f;
    --gray-500:         #181819;
    --gray-overlay-100: rgba(24,24,25,0.2);
    --gray-overlay-200: rgba(24,24,25,0.7);
    --orange:           #ffb302;
    --green:            #469d3b;
    --purple:           #b052b8;
    --purple2:          #7a2eb4;
}
* {
    padding:0;
    margin:0;
    font-family: roboto-regular, arial, sans-serif;
}

a {
    color: var(--blue);
    text-decoration: none;
}
a:hover   { color: var(--blue); }
a:visited { color: var(--blue); }
p {
    margin:5px 0;
}
#loginPage__wrapper {
    margin:200px 0 0 0;
}
#loginPage__container {
    margin:0 auto;
    padding:20px;
    width:450px;
    background-color:#eee;
    border-radius:10px;
    box-shadow: 0 5px 25px #555;
}
#loginPage__header {
    display:flex;
    flex-flow:row nowrap;
    margin:0 0 10px 0;
}
#loginPage__header img {
    width:120px;
}
#loginPage__header h1 {
    font-family: "Courier New", monospace;
    margin:0 10px;
}
#loginPage__form {
    display:flex;
    flex-flow:row nowrap;
    align-items: center;
    margin:15px 0;
}
#loginPage__emailField {
    font-size: 18px;
    padding:8px;
    border: 0;
    width:400px;
    border-radius: 5px;
}
#loginPage__submitButton {
    margin-left:10px;
    background-color: transparent;
    background-image:url(/static/images/buttons/chevron-right.png);
    background-size:100%;
    height:22px;
    width:22px;
    border:0;
    cursor:pointer;
}
#loginPage__messageContainer {
    height:50px;
}
#loginPage__message {
    font:18px roboto-medium, arial, sans-serif;
    display:none;
    width:450px;
    background-color:#bd3939;
    color:white;
    padding:10px 20px;
    border-radius: 10px;
    margin:10px auto;
    box-shadow: 0 5px 25px #555;
}
.fieldError {
    background-color: #faded8;
}
#loginPage__photoCaption {
    position:absolute;
    bottom:10px;
    right:10px;
    color:var(--gray-100);
}

#loginPage__confirmation {
    padding:10px;
    background-color: var(--white);
    border-radius: 5px;
    margin:10px 0 0 0;
}