login_aai.css

:root{
    --main-bg: linear-gradient(-5deg, #abc, #fff, #e0e8f0) fixed;
    --main-color: #123;

    --h1-color: #68a;
    --h2-color: #68a;
    --a-color: #45c;

    --content-bg: #fff;
    --content-border: 3px solid #d0d8e0;
    --content-shadow: 0.5em 0.5em 2em #fff;

    --error-bg: #faa;
    --error-color: #800;

    --info-bg: #fc3;
    --info-color: #650;

    --footer-color: #789;

    /** ---------- mode boxes */
    --idp-border: 1px solid #cde;
    --idp-color: #45c;
    --idp-shadow: 0 0 2em #eee inset;

    --idp-hover-shadow: 0 0 2em #eee;

    --inputfilter-border: 2px solid #eee;
    --inputfilter-color:#789;

    --btn-border: 2px solid #eee;
    --btn-bg:#f8f8f8;
    --btn-color: #888;

    --filterbtn-ative-border: 2px solid #eee;
    --filterbtn-ative-bg:#fff;
    --filterbtn-ative-color: #45c;

    --resetfilter-border: 2px solid #ddd;
    --resetfilter-bg: #f8f8f8;
    --resetfilter-color: #888;
    
}

a, a:visited{
    color: var(--a-color);
}
body {
    background_: linear-gradient(-5deg, #abc, #cee, #f0f8ff, #e0e8f0, #fee) fixed;
    background: var(--main-bg);
    color: var(--main-color);
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    padding: 0;
    margin: 0;
}

h1{color:var(--h1-color);}
h2{color: var(--h2-color);}
div#head, div.content, footer {
    width: 70%;
}
div#head {
    margin: 1em auto 1em;
}
div.content {
    background: var(--content-bg);
    border-radius: 2em;
    border: var(--content-border);
    box-shadow: var(--content-shadow);
    margin: 2em auto 2em;
    padding: 2em;
}
div.msg{
    border-radius: 1em;
    border: 2px solid;
    padding: 1em;
    margin-bottom: 1em;
}

div.error{
    background: var(--error-bg);
    color: var(--error-color);
}
div.info{
    background: var(--info-bg);
    color: var(--info-color);
}

footer{
    color: var(--footer-color);
    margin: 10em auto 5em;
    text-align: right; 
}

.hidden{
    display: none;
}

/** ---------- mode boxes: filterbar on top */

div#filterbox{
    margin-bottom: 1em;
}
#filterByDomain{
    margin-top: 3em;
    margin-bottom: 3em;
}

a.filterbutton, a#resetfilter{
    background: var(--btn-bg);
    border: var(--btn-border);
    border-radius: 0.2em;
    color: var(--btn-color);
    font-size: 110%;
    margin: 0 0.3em 0 0;
    opacity: 1;
    padding: 0.5em;
    text-decoration: none;
}
a.filterbutton.active{
    background: var(--filterbtn-ative-bg);
    border-top-color: var(--filterbtn-ative-border);
    color: var(--filterbtn-ative-color);
}
input#filter{
    border: var(--inputfilter-border);
    padding: 0.5em;
    color:var(--inputfilter-color);
    font-size: 110%;
    width: 20em;
}
a#resetfilter{
    background:var(--resetfilter-bg);
    border: var(--resetfilter-border);
    color: var(--resetfilter-color);
    font-weight: bold;
    margin: 0 0 0 0.3em;
    padding: 0.5em 2em;
}
a#resetfilter:hover{
    opacity: 0.5;
}


/** ---------- mode boxes */
.hidden{display: none;}
div.boxes a.idp{ 
    border: var(--idp-border); 
    border-radius: 1em; 
    box-shadow: var(--idp-shadow);
    color: var(--idp-color);
    float: left;
    height: 7em; 
    margin: 0 1em 1em 0; 
    overflow: hidden;
    padding: 0.5em;
    text-align: center;
    text-decoration: none;
    transition: all 0.1s ease-in-out;
    width: 14em;
}
div.boxes .idp img { height: 48px;}
div.boxes a.idp:hover{ 
    box-shadow: var(--idp-hover-shadow);
}
div.boxes a.hide{
    border: none;
    height: 0;
    margin:0;
    padding:0;
    width: 0;
}