.skip-to-main-content-link {
    background: rgba(255,255,255,.9);
    color: #2e2e33;
    font-weight: 600;
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    text-align: center;
    text-decoration: underline;
    box-shadow: 3px 3px 5px #2e2e33;
    z-index: 10
}

.skip-to-main-content-link:not(:focus) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    width: 1px
}

.banner-buffer {
    padding-top: 30px;
    padding-bottom: 30px;
    max-width: 1500px;
}

.legend-buffer {
    padding: 36px;
    padding-left: 0px;
}

.navbar {
    min-height: 48px;
}

.btn-navbar {
    color: #fff;
    background-color: rgba(0,0,0,0);
    -webkit-transition: background-color .25s;
    transition: background-color .25s;
    display: inline-block;
    font-size: 14px;
    height: 46px;
    padding: 12px
}

    .btn-navbar:hover, .btn-navbar:focus, .btn-navbar:active, .btn-navbar.active, .open > .dropdown-toggle.btn-primary {
        color: #fff;
        background-color: #0071c7;
        border-color: #0071c7;
    }

a.msazure-title {
    text-decoration: none;
    display: flex;
    align-items: center;
}

.msazure-text {
    font-size: 1.25rem;
    color: white;
    margin-top: 7px;
    line-height: 1rem;
    margin-left: 10px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.main-page-banner-section {
    color: #fff;
    background-color: #243a5e;
}

.new-domain-banner {
    color: #fff;
    background-color: #0078D4;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

.new-domain-banner span {
    padding: 13.5px;
}

.new-domain-banner a {
    color: #fff;
    text-decoration: underline;
}

.legend-section {
    background-color: #f4f4f4;
}

.status-info-section {
    background-color: #fff;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    color: #323237;
    overflow: hidden;
    position: relative;
    padding-top: 36px
}

.status-symbols-legend {
    text-align: end;
    display: inline;
    vertical-align: middle;
    line-height: 1;
}

.impacting-services-heading {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 9px
}

.helpful-link-heading {
    font-size: 20px;
    color: #1A1A1F;
    font-weight: 600;
    line-height: 150%;
    margin: 0 0 0px;
}

.wa-link-status {
    color: #0032EB;
}

a.btn.btn-primary:focus {
    outline: 3px solid #005A9E;
}

.helpful-link-contents {
    font-size: 14px;
    color: #0062AD;
    font-weight: 600;
    line-height: 145%;
    margin: 0 0 9px;
}

.helpful-link-alignment {
    text-align: left;
}

.page-section-alignment {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: .9375rem;
    padding-right: .9375rem;
}

.rss-alignment {
    text-align: left;
}

.incident-icon-alignment {
    padding-left: 15px;
    height: 40px;
    width: 40px;
}

.text-semibold {
    font-weight: 600;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 0px;
}

.incident-semibold {
    font-weight: 600;
    padding-top: 10px;
    padding-right: 10px;
    margin-bottom: 0px;
}

.text-dev-ops {
    font-family: 'SegoeUI';
    font-weight: 600;
    font-size: 14px;
    color: #0062AD;
}

.text-data-bricks {
    font-family: 'SegoeUI';
    font-weight: 600;
    font-size: 14px;
    color: #0062AD;
}

.incidents {
    background-color: #F8DCDC;
    width: 100%;
    position: relative;
    display: block;
    padding-left: 10px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.14);
}

.incidents-alignment {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
    padding-left: .9375rem;
    padding-right: .9375rem;
}

.incident-paragraph-alignment {
    padding-left: 15px;
}

.navbar-alignment {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: .9375rem;
    padding-right: .9375rem;
}

.table-alignment {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: .9375rem;
    padding-right: .9375rem;
}

.refresh-spacing {
    padding-bottom: 0;
}

.azure-header {
    background-color: #1a1a1f;
    font-size: 15px;
}

    .azure-header svg {
        height: 23px;
        width: 23px;
    }

.status-icon {
    height: 18px;
    width: 18px;
}

@media screen and (-ms-high-contrast: white-on-black) {
    .health-unknown path {
        fill: white;
    }
}

@media screen and (-ms-high-contrast: black-on-white) {
    .health-unknown path {
        fill: black;
    }
}

.hide-text {
    position: absolute;
    top: auto;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.icon {
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
}

    .icon svg {
        height: 100%;
        pointer-events: none;
        width: 100%
    }

        .icon svg * {
            pointer-events: none
        }

.svg-button svg {
    fill: #fff;
    height: 20px;
    margin-top: -6px;
    vertical-align: middle;
    width: 20px;
}

.button-tertiary {
    background-color: #243a5e;
    border: 1px solid transparent;
    border-radius: 0;
    color: #fff !important;
    fill: #fff;
    font-weight: 300;
    padding: 5px 20px 8px;
    text-align: center;
    text-decoration: none;
    vertical-align: bottom;
}

.rss-button-attributes {
    font-size: 20px;
}

.resource-header {
    font-size: 36px;
    width: 207px;
}

.updated-time {
    width: 207px;
}

.btn-primary {
    color: #fff;
    background-color: #0078D4;
    border-color: #0078D4;
    border-radius: 0;
}

.list-inline-item:not(:last-child) {
    margin-right: 1rem;
}

.bg-black {
    background-color: #1a1a1f;
}

.navlink.navportals {
    color: #fff;
}

.zones-tabs ul {
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
    font-weight: bold;
}

    .zones-tabs ul li {
        background-color: #f4f4f4;
        cursor: pointer;
        display: inline-block;
        margin: 0 0 0 -3px;
        padding: 12px 18px
    }

        .zones-tabs ul li:first-child {
            margin-left: 0
        }

        .zones-tabs ul li.active, .zones-tabs ul li:hover {
            background-color: #0078d4;
            font-weight: bold;
            outline: solid transparent;
            outline-offset: -6px;
        }

            .zones-tabs ul li.active a, .zones-tabs ul li:hover a {
                color: #fff
            }

            .zones-tabs ul li.zone {
                text-align: center;
            }

            .zones-tabs ul li.zone .icon {
                height: 23px;
                width: 23px
            }

 /* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
/*.dl-horizontal dt {
    white-space: normal;
}*/
/* End override */
/* Fonts */
@font-face {
    font-family: 'SegoeUI';
    src: url(/fonts/segoe-ui/light/latest.eot);
    src: local('Segoe UI'),url(/fonts/segoe-ui/light/latest.eot?#iefix) format('embedded-opentype'),url(/fonts/segoe-ui/light/latest.woff2) format('woff2'),url(/fonts/segoe-ui/light/latest.woff) format('woff'),url(/fonts/segoe-ui/light/latest.ttf) format('truetype'),url(/fonts/segoe-ui/light/latest.svg#web) format('svg');
    font-style: normal;
    font-weight: 200
}

@font-face {
    font-family: 'SegoeUI';
    src: url(/fonts/segoe-ui/semilight/latest.eot);
    src: local('Segoe UI'),url(/fonts/segoe-ui/semilight/latest.eot?#iefix) format('embedded-opentype'),url(/fonts/segoe-ui/semilight/latest.woff2) format('woff2'),url(/fonts/segoe-ui/semilight/latest.woff) format('woff'),url(/fonts/segoe-ui/semilight/latest.ttf) format('truetype'),url(/fonts/segoe-ui/semilight/latest.svg#web) format('svg');
    font-style: normal;
    font-weight: 300
}

@font-face {
    font-family: 'SegoeUI';
    src: url(/fonts/segoe-ui/normal/latest.eot);
    src: local('Segoe UI'),url(/fonts/segoe-ui/normal/latest.eot?#iefix) format('embedded-opentype'),url(/fonts/segoe-ui/normal/latest.woff2) format('woff2'),url(/fonts/segoe-ui/normal/latest.woff) format('woff'),url(/fonts/segoe-ui/normal/latest.ttf) format('truetype'),url(/fonts/segoe-ui/normal/latest.svg#web) format('svg');
    font-style: normal;
    font-weight: 400
}

@font-face {
    font-family: 'SegoeUI';
    src: url(/fonts/segoe-ui/semibold/latest.eot);
    src: local('Segoe UI'),url(/fonts/segoe-ui/semibold/latest.eot?#iefix) format('embedded-opentype'),url(/fonts/segoe-ui/semibold/latest.woff2) format('woff2'),url(/fonts/segoe-ui/semibold/latest.woff) format('woff'),url(/fonts/segoe-ui/semibold/latest.ttf) format('truetype'),url(/fonts/segoe-ui/semibold/latest.svg#web) format('svg');
    font-style: normal;
    font-weight: 600
}

@font-face {
    font-family: 'SegoeUI';
    src: url(/fonts/segoe-ui/bold/latest.eot);
    src: local('Segoe UI'),url(/fonts/segoe-ui/bold/latest.eot?#iefix) format('embedded-opentype'),url(/fonts/segoe-ui/bold/latest.woff2) format('woff2'),url(/fonts/segoe-ui/bold/latest.woff) format('woff'),url(/fonts/segoe-ui/bold/latest.ttf) format('truetype'),url(/fonts/segoe-ui/bold/latest.svg#web) format('svg');
    font-style: normal;
    font-weight: 700
}

@font-face {
    font-family: 'BAPIMDL2';
    src: url(/fonts/bapimdl2/normal/latest.eot);
    src: url(/fonts/bapimdl2/normal/latest.eot?#iefix) format('embedded-opentype'),url(/fonts/bapimdl2/normal/latest.woff2) format('woff2'),url(/fonts/bapimdl2/normal/latest.woff) format('woff'),url(/fonts/bapimdl2/normal/latest.ttf) format('truetype'),url(/fonts/bapimdl2/normal/latest.svg#web) format('svg');
    font-style: normal;
    font-weight: 400
}

.contrast-compliant-blue {
    color: #0062AD;
}

.current-incident a {
    color: #0062AD;
}

.main-body-adjustment {
    min-height: 85vh;
    background-color: white;
}

/* End Fonts */

/* Element */

html {
    overflow-y: scroll;
    overflow-x: hidden;
}

body {
    background-color: #505055;
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -ms-overflow-style: scrollbar;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #323237;
    font-family: 'Segoe UI',SegoeUI,'Segoe WP',Tahoma,Arial,sans-serif;
}

input[type=email], input[type=number], input[type=tel], input[type=text], select, textarea {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 3px solid #8a8886;
    color: #323130;
    display: block;
    line-height: 1.2;
    outline: 0;
    padding: 5px;
    max-width: 250px;
    min-width: 150px;
}

    input[type=email]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=text]:focus, select:focus, textarea:focus {
        border: 3px solid #009FDB
    }

/* End Element */

/* Utlities */

.font-11 {
    font-size: 11px;
}

.margin-top-36 {
    margin-top: 36px;
}

.margin-top-bottom-40 {
    margin: 40px 0;
}

.padding-left-right-15-impt {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.hide {
    display: none !important
}

.refresh-margin {
    margin-bottom: 15px;
}

.white-space-nowrap {
    white-space: nowrap;
}

.superscript {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -.5em;
}

/* End Utilities*/

/* Start Footer */

.footer-content {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
}

    .footer-content > div {
        margin-top: 5%;
        padding-left: .9375rem;
        padding-right: .9375rem;
    }

        .footer-content > div:nth-child(2) {
            min-width: 170px;
        }

.section-footer {
    background-color: #1a1a1f;
    color: white;
    padding: 0 0 30px;
    font-size: 12px;
}

    .section-footer .footer-copyright a, .section-footer .footer-copyright span {
        clear: both;
        color: #fff;
        float: left;
        font-size: 10px;
        margin: 0;
        width: 87px
    }

    .section-footer .footer-copyright {
        float: right;
    }

        .section-footer .footer-copyright .logo-microsoft > svg {
            height: 20px;
            width: 74px
        }

.linklist-legal > .col {
    float: left;
    padding-left: 0px;
    padding-right: 12px;
    padding-bottom: 3px;
    flex-grow: 0;
}

    .linklist-legal > .col > a {
        color: white;
        white-space: nowrap;
    }

.showlanguageelement {
    display: block
}

.hidelanguageelement {
    display: none
}

/* End Footer */

/* History Banner */

.history-banner-text a {
    color: #00b2ff;
    text-decoration: underline;
}

.banner-section {
    padding-top: 33.1px;
    padding-bottom: 33.1px;
    color: #fff;
    background-color: #243a5e;
}

    .banner-section > div {
        padding-left: .9375rem;
        padding-right: .9375rem;
        margin-left: auto;
        margin-right: auto;
        max-width: 1500px;
    }

    .banner-section h1 {
        font-size: 36px;
        font-weight: 600;
        line-height: 1.2;
    }

.breadcrumbs {
    font-size: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .breadcrumbs:after {
        clear: both;
        content: '';
        display: table;
    }

    .breadcrumbs li {
        float: left;
        margin-bottom: 0;
    }

        .breadcrumbs li a {
            color: inherit;
            position: relative;
        }

            .breadcrumbs li a:before {
                position: absolute;
                margin: 0 auto;
                top: 100%;
                left: 0;
                width: 100%;
                height: 1px;
                background-color: #969696;
                content: '';
            }

            .breadcrumbs li a:hover:before {
                top: 19px;
                transition: all .2s ease-out;
            }

            .breadcrumbs li a:hover {
                color: inherit;
                text-decoration: none;
            }

        .breadcrumbs li + li {
            margin-left: 24px;
            position: relative;
        }

            .breadcrumbs li + li:before {
                -ms-transform: translate(-50%,-1px);
                -o-transform: translate(-50%,-1px);
                -webkit-transform: translate(-50%,-1px);
                transform: translate(-50%,-1px);
                content: '/';
                left: -12px;
                position: absolute;
            }

/* End History Banner */

/* History Content */

.history-section {
    background-color: white;
    color: #323237;
    padding-top: 20px;
    padding-bottom: 60px;
}

.pagination-container {
    display: block;
    margin-top: 36px;
    margin-left: auto;
    margin-right: auto;
}

.wa-pagination {
    display: table;
    margin: 0 auto;
    text-align: center;
    width: 100%
}

    .wa-pagination ul {
        display: inline-block;
        list-style: none;
        margin: 0 auto;
        padding: 0
    }

        .wa-pagination ul li {
            display: inline-block;
            height: 30px;
            line-height: 27px;
            margin: 0;
            vertical-align: top
        }

            .wa-pagination ul li a {
                font-size: 20px;
                color: #323237;
                display: block;
                height: 30px;
                line-height: 27px;
                margin: 0;
                padding: 0 8px;
                text-align: center
            }

                .wa-pagination ul li a[href] {
                    color: #0071c7
                }

                    .wa-pagination ul li a[href]:hover {
                        color: #0063ae
                    }

                .wa-pagination ul li a.disabled:hover {
                    color: #323237
                }

[data-pagination=hidden] {
    display: none !important
}

.wa-icon-triangleDarkNext {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAICAYAAADeM14FAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAA0SURBVBhXY/j//z8KZvAP8F8PxPwMMADk/Afiu0BsjCwAwj+BOAenAIqWNUCMMBTV2v8MAE/iNQJcpNDiAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    height: 8px;
    width: 4px;
    display: inline-block;
    vertical-align: middle;
    background-size: auto
}

.wa-icon-triangleDarkPrev {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAICAYAAADeM14FAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAA0SURBVBhXY/j//z8KhgP/AH9+IF4D4xgD8V0g/g/i5ADxTxAHuwCGFhgAckCGrkez9j8DAN7YNQJ1zFGgAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    height: 8px;
    width: 4px;
    display: inline-block;
    vertical-align: middle;
    background-size: auto
}

.history-dropdowns {
    padding-left: .9375rem;
    padding-right: .9375rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 1500px;
}

.history-dropdowns select {
    width: 100%;
    max-width: none;
    margin-bottom: 15px;
}

.month-title-container {
    padding-left: .9375rem;
    padding-right: .9375rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 1500px;
}

.month-title-container > h2 {
    padding-left: 15px;
}

.month-incident-container-wrapper {
    background-color: #FAFAFB;
}

.month-incident-container {
    padding-left: .9375rem;
    padding-right: .9375rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 1500px;
}

.incident-history-day {
    display: flex;
    line-height: 132px;
    padding-left: 30px;
    margin-right: -45px;
    min-width: 90px;
    align-items: center;
}

.incident-history-item {
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 30px;
    padding-right: 0px;
}

.incident-history-header {
    min-height: 80px;
    filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.14));
    background-color: white;
    border: none;
    width: 100%;
    font-weight: 600;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.incident-history-item button:focus {
    outline: none;
}

.incident-history-header:focus-visible {
    outline: 5px auto !important; 
}

    .incident-history-header > div {
        text-align: left;
        align-items: center;
        justify-content: left;
        display: flex;
        min-height: 80px;
        max-height: 200px;
    }

        .incident-history-header > div:nth-last-child(2) {
            justify-content: flex-end;
            white-space: nowrap;
        }

        .incident-history-header > div:last-child {
            justify-content: center;
        }

@media only screen and (max-width: 720px) {
    .incident-history-header > div {
        justify-content: center;
    }

        .incident-history-header > div:nth-last-child(2) {
            justify-content: center;
        }
}

.incident-history-chevron svg {
    height: 25px;
    width: 25px;
}

.incident-history-collapse {
    width: 100%;
    margin-right: 30px;
}

.incident-history-title {
    font-size: 18px;
}

.history-directlink-back {
    padding-top: 56px;
}

.chevron-up {
    display: none;
}

#history-results-container {
    margin-top: -15px;
}

.history-no-results {
    padding-top: 100px;
    padding-left: .9375rem;
    padding-right: .9375rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 1500px;
}

.history-no-results > h3 {
    padding-left: 15px;
}

#history-error-message {
    padding-left: .9375rem;
    padding-right: .9375rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 1500px;
}

#history-error-message > h5 {
    padding-left: 15px;
}

/* End History Content*/
/* Start Table Content*/

.table-responsive > .table-bordered {
    border-top: 5px solid #0078d4;
}

.status-table {
    border-top: 5px solid #0078d4;
    display: none;
    margin-top: 0px;
    width: 100%;
    border-color: #c9c9c9;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: left;
}

    .status-table.default {
        display: none
    }

    .status-table.fixed-status-header {
        box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
        display: none;
        position: fixed;
        top: 0;
        z-index: 1;
        max-width: 1440px;
    }

    .status-table .status-table-head, .status-table thead {
        border-bottom: 1px solid #dedede
    }

    .status-table .geo-header-row td {
        padding: 6px
    }

        .status-table .geo-header-row td.no-border {
            border: 0
        }

    .status-table[data-zone-name=azure-government] th:nth-of-type(2),
    .status-table[data-zone-name=azure-government] td:nth-of-type(2),
    .status-table[data-zone-name=azure-china] th:nth-of-type(2),
    .status-table[data-zone-name=azure-china] td:nth-of-type(2) {
        display: none;
    }

    .status-table th, .status-table td {
        border-left: 1px solid #dedede;
        min-width: 75px;
        max-width: 150px;
        padding: 12px 2px;
        vertical-align: middle;
        width: 60px;       
    }

        .status-table th.vertical-text, .status-table td.vertical-text {
            height: 130px;
            text-align: left
        }

            .status-table th.vertical-text span, .status-table td.vertical-text span {
                display: block;
                margin-left: -17px;
                transform: rotate(-90deg);
                width: 100px
            }

        .status-table th.status-cell, .status-table td.status-cell {
            text-align: center
        }

        .status-table th.geo-header, .status-table td.geo-header {
            background-color: #dedede;
            border-bottom: 1px solid #969696;
            border-left: 1px solid #969696;
            border-top: 5px solid #0078d4;
            text-align: center
        }

        .status-table th.first, .status-table td.first {
            border-left: 1px solid #969696
        }

        .status-table th:first-child, .status-table td:first-child {
            min-width: 130px;
            max-width: 150px;
            padding-left: 10px;
        }

    .status-table th {
        font-size: 12px;
        font-weight: 600;
        padding-left: 0.4%;
        color: #2E2E33;
        height: 80px;
        text-align: left;
        text-transform: capitalize;
        word-break: keep-all;
    }

    .status-table tr {
        font-size: 12px;
        font-weight: 600;
        color: #2E2E33;
    }

        .status-table tr.current-incident {
            font-size: 18px;
            font-weight: 600;
            line-height: 1.3;
            margin: 0 0 9px;
            margin-top: 15px;
        }

        .status-table tr.geo-title {
            background-color: #00abec;
            border-bottom: 2px solid #0078d4
        }

            .status-table tr.geo-title th {
                border-right-color: #0078d4;
                color: #fff
            }

                .status-table tr.geo-title th:first-child {
                    border-right: none
                }

        .status-table tr.status-category {
            background-color: #dedede !important;
        }

            .status-table tr.status-category td {
                font-size: 12px;
                text-transform: uppercase;
            }

        .status-table tr.status-incident {
            background-color: #dedede !important
        }

            .status-table tr.status-incident td {
                font-size: 12px;
                text-transform: uppercase;
                font-weight: 600;
                color: #2E2E33;
            }

        .status-table tr.capability-row td:first-child {
            padding-left: 24px
        }

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #F8F9FA;
}

.table thead th {
    vertical-align: middle;
}

@media (min-width: 992px) {

    .status-table.fixed-status-header {
    }
}

tfoot td p {
    color: #6c757d;
    font-size: 14px;
}

.bg-green {
    background-color: #F8FFF0; /* Green */
}

.bg-blue {
    background-color: #F0F6FF; /* Blue */
}

.bg-yellow {
    background-color: #FFF8F0; /* Yellow */
}

.bg-red {
    background-color: #FEF0F1; /* Red */
}

.bg-light {
    background-color: #f8f9fa; /* Light */
}