@font-face {
    font-family: 'AmericanSans';
    src: url('fonts/AmericanSans-Regular.eot');
    src: url('fonts/AmericanSans-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/AmericanSans-Regular.woff') format('woff'),
        url('fonts/AmericanSans-Regular.ttf') format('truetype'),
        url('fonts/AmericanSans-Regular.svg#AmericanSans-Regular') format('svg');
}

.footer {
    color: #9FA4AA;
    font-size: 11px;
    margin-top: 10px;
    text-align: left;
}

.bodytextcolor {
    /* $aa-gray-dark */
    color: #36495a;
}

.SysMain {
    /* $aa-orange-light */
    color: #faaf00;
    font-size: 24px;
    /* font-weight: 100; */
    font-family: "AmericanSans", sans-serif;
    line-height: 110%;
    display: block;
}

.panel-default {
    background: white;
    font-family: "AmericanSans", sans-serif;
    padding: 40px 50px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 25%;
    width: 380px;
}

.outage-background {
    background: #ebeef0;
    padding: 50px;
    margin: auto;
    width: auto;
    height: 100vh;
}

/* Additional utility classes */
.mt-3 {
    margin-top: 1rem;
}

.mt-4 {
    margin-top: 1.5rem;
}

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

.text-center {
    text-align: center;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

/* Media Queries for Mobile Devices */
@media (max-width: 600px) {
    .panel-default {
        padding: 20px 30px;
        top: 25%;
        width: 70%;
        position: absolute;
    }

    .outage-background {
        padding: 40px;
    }
}