/* Styles for solid-minimal */
body{
    margin:0;
    padding:0;
}

/* the main header for the page */
body > header{
    color:#d3d3d3;
    background-color:#222222;
    padding:15px 20px;
    text-align: center;
    font-size: 24px;
}

/* displays form and other elements to help log in the user to his pod*/
#login-section{
    height:150px;
    padding:15px 5%;
    background-color:#f0f0f0;
    text-align:center;
}

/* header: login-section */
#login-section header{
    text-align:center;
    font-size:larger;
}

/* main: login-section */
#login-section main{
    margin:30px 0;
}

/* dropdown: login-section */
#dropdown{
    cursor:pointer;
    display:inline-block;
    position:relative;
    margin:auto;
}

/* default text: dropdown list */
#drop-placeholder{
    border:1px solid #223322;
    display:inline-block;
    padding:5px 10px;
}

/* dropdown list container: login-section*/
.idp-provider{
    display:none; 
    position:absolute;
    top:-50%;
    left:-50%;
    background-color:#fafafa;
    color:#232323;
    padding:0;
}

/* list: idp providers*/
.idp-provider span{
    display:block;
    padding:10px 30px;
    text-align:left;
    border-bottom:1px solid #223322;
}

/* removes bottom border from last element */
.idp-provider span:last-child{
    border-bottom:0;
}

/* hover: idp-providers list */
.idp-provider span:hover{
    background-color:#223322;
    color:#fafafa;
    border:inherit;
}

/* displays idp provider list on hover: dropdown */
#dropdown:hover > .idp-provider{
    display:block;
}


/* Style for IDP form*/
#login-form{
    display:inline-block;
    text-align: center;
    color:#223322;
}

/* gets the idp providers url */
#login-form input{
    display: inline;
    margin-left:10px;
    padding:10px 15px;
    background-color:inherit;
    border:0;
    outline:0;
    border-bottom:1px solid #d3d3d3;
    color: #223322;
}

/* submit button: login-form */
#login-form input[type="submit"]{
    background-color:#223322;
    color:#d3d3d3;
}

/* hover: login form submit button */
#login-form input[type="submit"]:hover{
    background-color:#1976d2;
    color:#d3d3d3;
}

/* popup login:   */
#popup-login{
    display:block;
    margin:30px;
}

#popup-login button{
    cursor:pointer;
    border:0;
    background-color:#1976d2;
    color:#d3d3d3;
    padding:10px 25px;

}

#popup-login button:hover{
    background-color:#223322;
    color:#d3d3d3;

}

#logout-button{
    display: none;
    border:0;
    text-align:center;
    padding:10px 18px;
    background-color:#223322;
    color:#d3d3d3;
}


/* extras */

a{
    text-decoration:none;
    color:#1976d2;
}

.extra-links{
    padding:20px 50px;
    text-align:center;
}

.extra-links > a{
   display:inline-block;
   background-color:#1976d2;
   color:#d3d3d3;
   margin:20px 15px;
   padding:15px 20px;
}