:root {
    --color-aqua: #c3fff9;
    --color-blue: rgba(0, 0, 255, 1.0);
    --color-red: rgba(255, 99, 132, 1.0);
    --color-orange: rgba(255, 159, 64, 1.0);
    --color-yellow: rgba(255, 205, 86, 1.0);
    --color-green: rgba(75, 192, 192, 1.0);
    --color-purple: rgba(153, 102, 255, 1.0);
    --color-grey: rgba(170, 170, 170, 1.0);
    --color-pink: rgba(234, 10, 142, 1.0);
    --color-invalid-yellow: #FFFFCC;
    --color-memo-yellow: #ffff88;
    --color-white-smoke: #f5f5f5;
    --color-light-grey: #eee;
    --color-light-grey2: #e5e5e5;
    --color-med-grey: #ddd; /*border color*/
    --color-med-grey2: rgba(201, 203, 207, 1.0);
    --color-dark-grey: #404040;
    --hover-bg-color: #eee;
    --topnav-submenu-bg-hover: #f5f5f5;
    --custom-bg-color1: #f4f4f4;
    --html-body-bg: rgba(255,255,255,1.0);
    --footer-follow-ms: rgba(204,204,204,1.0);
    --footer-bg: rgba(242,242,242,1.0);
    --footer-copyright-bg: rgba(242,242,242,1.0);
}

html,
body {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    color: var(--color-dark-grey);
    letter-spacing: 0.10em;
    font-weight: 400;
    background-color: var(--html-body-bg);
}

html {
    position: relative;
    min-height: 100%;
}

section {
    margin: 10px;
}

h1 {
    font-size: 20px !important;
    font-weight: 700;
    margin: 10px 0;
    width: 100%;
    line-height: 1.6;
    letter-spacing: 0.05em;
}

h2 {
    font-size: 16px !important;
    font-weight: 400;
    margin: 10px 0;
    width: 100%;
    text-transform: none;
    letter-spacing: 0.03em;
}

/*
    Keeps footer at bottom, even for shorter pages.
*/
.page-container {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.main-content {
    flex: 1;
}

.main-content a,
.main-content a:visited {
    color: var(--color-blue);
    text-decoration: underline;
}

.help-content {
    font-size: 15px;
}

/************************************* Header *************************************/

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
    font-size: 1.25rem;
    line-height: 1.25rem;
}

/* Logo. Bootstrap override */
.navbar-brand img {
    width: 108px;
    height: auto;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/************************************* Footer *************************************/

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

footer {
    font-size: 12px;
    margin: 0;
    margin-top: 60px;
    padding: 20px 0;
    position: relative;
    min-height: 128px;
    background: var(--footer-bg);
    line-height: 1.68;
}

footer h5 {
    font-family: inherit;
}

footer hr {
    margin-bottom: 1.5rem;
    width: 60px;
    border-top: 1px solid #7c4dff;
}

footer a,
footer a:visited {
    color: var(--color-dark-grey);
    text-decoration: none !important;
}
footer a:hover {
    color: inherit;
    text-decoration: underline !important;
}

footer ul.quick-links {
    margin: 0;
    padding: 0;
}
footer ul.quick-links li {
	padding: 5px;
    display: inline-block;
}

.follow-microsoft {
    padding: 10px;
}

.footer-copyright {
    padding: 20px;
    background: var(--footer-copyright-bg);
}

/************************************* Other *************************************/

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

.security-alert {
    color: red;
    font-weight: 700;
}

.profilepic {
    width: 32px;
    height: 32px;
    margin: 4px;
}

.font-small {
    font-size: 12px;
}

/************************************* Media queries (responsive) *************************************/
@media (min-width: 768px) {
    html {
        font-size: 16px;
    }

    footer hr {
        margin-left: 0;
    }
}