@font-face {
    font-family:open sans;
    src:url(../fonts/opensans-400.woff2) format('woff2'),
        url(../fonts/opensans-400.woff) format('woff');
    font-weight:400;
    font-style:normal;
    font-display:swap;
}

body {
    font-family:open sans,helvetica neue,Helvetica,Arial,sans-serif;
    font-size:14px;
    line-height:1.5;
    color:#636363;
}

/* NOTIFICATIONS */
#notification, #notificationperm {
    background-color:#04AA6D;
    min-width:250px;    
    color:#fff;
    text-align:center;
    border-radius:2px;
    padding:16px;
}
#notification {
    visibility:hidden;
    position:fixed;
    z-index:1;
    top:30px;
}
#notification.error, #notificationperm.error {
    background-color:#cc3300!IMPORTANT;
}
#container #notification {
    right:2%;
}
#login #notification {
    margin-left:35px;
}
#notificationperm {
    margin-bottom:10px;
}
#notificationperm a {
    color:#fff;
}
#notification.show {
    visibility:visible; /* Show the notification */
    /* Add animation:Take 0.5 seconds to fade in and out the notification.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation:fadein 0.5s, fadeout 0.5s 2.5s;
    animation:fadein 0.5s, fadeout 0.5s 2.5s;
}
#notification.showperm {
    visibility:visible; /* Show the notification */
    /* Add animation:Take 0.5 seconds to fade in and out the notification.
    However, delay the fade out process for 2.5 seconds */
    -webkit-animation:fadein 0.5s;
    animation:fadein 0.5s;
}
/* Animations to fade the notification in and out */
@-webkit-keyframes fadein {
    from {
        top:0;
        opacity:0;
    }
    to {
        top:30px;
        opacity:1;
    }
}

@keyframes fadein {
    from {
        top:0;
        opacity:0;
    }
    to {
        top:30px;
        opacity:1;
    }
}

@-webkit-keyframes fadeout {
    from {
        top:30px;
        opacity:1;
    }
    to {
        top:0;
        opacity:0;
    }
}

@keyframes fadeout {
    from {
        top:30px;
        opacity:1;
    }
    to {
        top:0;
        opacity:0;
    }
}

/****/
#login {
    max-width:400px;
    background-color:#ffffff;
    box-shadow:0 0 9px 0 rgba(0, 0, 0, 0.3);
    margin:100px auto 10px auto;
}
#login h1 {
    text-align:center;
    color:#5b6574;
    font-size:24px;
    padding:20px 0 20px 0;
    border-bottom:1px solid #dee0e4;
}

#login form, #searchduplicate .input-group {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    padding-top:20px;
}
#login form label, #searchduplicate form label {
    display:flex;
    justify-content:center;
    align-items:center;
    width:50px;
    height:50px;
    background-color:#00529f;
    color:#ffffff;
}
#login form input[type="password"], #login form input[type="text"] {
    height:50px;
    border:1px solid #dee0e4;
    padding:0 15px;
}
#login form input[type="password"], #login form input[type="text"] {
    margin-bottom:20px;
    width:310px;
}
#login form input[type="submit"] {
    background-color:#00529f;
    border:0;
    cursor:pointer;
    font-weight:bold;
    color:#ffffff;
    transition:background-color 0.2s;
    padding:15px;
}
#login form input[type="submit"] {
    width:100%;
    margin-top:20px;
}
#login form input[type="submit"]:hover {
    background-color:#2868c7;
    transition:background-color 0.2s;
}

#container {
    max-width:1200px;
    margin:0 auto;
}

#container #header, #container #footer, #copyright {
    text-align:center;
}

#container #header {
    border-bottom:solid 1px #eee;
    padding-bottom:20px;
}
#container #main {
    margin:40px 0;
    text-align:center;
}

#container #main .italics {
    font-style:italic;
}

#container #main p.success, #container #main p.error {
    font-family:Verdana,arial,helvetica,sans-serif;
    padding:10px;
    width:100%;
    text-align:center;
    font-weight:bold;
}
#container #main p.error, #container #main input.error {
    background-color:#FFFCFC!IMPORTANT;
    border:solid 1px #CE8787!IMPORTANT;
    color:#9F2E2E!IMPORTANT;
}
#container #main p.success, #container #main input.success {
    background-color:#FCFFFC!IMPORTANT;
    border:solid 1px #72B662!IMPORTANT;
    color:#2e9f31!IMPORTANT;
}

#container #main form {
    margin:10px 0;
}

#container #main form input[type=submit] {
    margin-top:-6px;
    background:#113984;
    color:#fff;
    border:1px solid #c0c0c0;
    padding:7px 14px;
    border-radius:4px;
    vertical-align:middle;
    line-height:normal;
    display:inline-block;
    text-align:center;
    width:auto;
    font-weight:normal;
}

#container #main form input[type=submit]:hover {
    cursor:pointer;
}

#container #footer {
    border-top:solid 1px #eee;
    padding-top:20px;
}