body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: "Montserrat";
}

footer {
    margin-top: auto;
}

a {
    color: #0076a4;
    text-decoration: none;

}



@media (min-width: 576px) {
    a.navbar-brand.fs-3::after {
        content: "OIT Support";
    }

}



.navbar-brand img {
    width: 50px;
}

.nav-link i {
    font-size: 1.5em;
}

.page-container {
    position: relative;
    position: relative;
    min-height: 65vh;
}

.content-wrap {
    padding-bottom: 2.5rem;
}

.hero-bg {
    background-image: url("../img/support-hero.jpg");
    background-color: #0076a4;
    max-height: 300px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero img {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
}



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


.w-90 {
    width: 90% !important
}



.section-title {
    font-weight: 600;
}


/*||Frequent Topic Card*/

.section-title {
    font-size: 2.5rem;
    text-align: center;
}

.frequent-topics h3,
.frequent-topics a {
    color: #fff;
}

.frequent-topics small {
    font-weight: 500;
}

.frequent-topics .card {
    transition: all ease-in-out .15s;
}

.frequent-topics .card:hover {
    transform: scale(1.025);
}

/*||outages.html*/
.sh-bg {
    background-image: url("../img/status-hero.png");
    height: 200px;
    max-height: 200px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.up {
    background-color: #60b767;
}

.b-up {
    border-color: #60b767;
}


.down {
    background-color: #fec336;
}

.b-down {
    border-color: #fec336;
}

.maintenance {
    background-color: #00a4ff;

}

.b-maintenance {
    border-color: #00a4ff;
}

.sh-text {
    width: 25%;
    margin-left: 2rem;
}

.current-outages .card-header {
    font-weight: 600;
}

.last-updated,
.card-body p,
.outage-link {
    font-size: .90rem;
}

.down > .sh-text > h1::after {
    content: "OIT SERVICES AFFECTED"
}

.up > .sh-text > h1::after {
    content: "ALL SERVICES OPERATIONAL"
}

.down > span.status::after {
    font-family: "Font Awesome 5 Free";
    content: "\f071";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
}

.up > span.status::after {
    content: "Status: RESOLVED"
}

.last-updated {
    text-align: end;
    color: #878787;
}

.last-updated > .dateTime::before {
    content: "Last Updated on "
}

.issue::before,
.update::before,
.affected-users::before {
    font-weight: 600
}


.investigating::before {
    font-weight: 500;
}

.issue::before {
    content: "ISSUE:";
}

.update::before {
    content: "COMMENTS:";
}

.affected-users::before {
    content: "AFFECTED USER(S):"
}



/*Card backgrounds*/
.b1 {
    background-image: url(../img/b1.jpeg);
}

.b2 {
    background-image: url(../img/b2.jpeg);
}

.b3 {
    background-image: url(../img/b3.jpeg);
}

.b4 {
    background-image: url(../img/b4.jpeg);
}

.b5 {
    background-image: url(../img/b5.jpeg);
}

.b6 {
    background-image: url(../img/b6.jpeg);
}

.b7 {
    background-image: url(../img/b7.jpeg);
}

.b8 {
    background-image: url(../img/b8.jpeg);
}

.b9 {
    background-image: url(../img/b9.jpeg);
}

.b10 {
    background-image: url(../img/b10.jpeg);
}

.b1,
.b2,
.b3,
.b4,
.b5,
.b6,
.b7,
.b8,
.b9,
.b10 {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, .2);
}




.card-body a i {
    color: #a48000;
}

.training-library .card {
    margin-bottom: 5px;
}

.training-library iframe,
iframe {
    margin: 0 auto;
    display: block;
    border-style: none;
    height: auto;
    max-width: 100%;
}

#more,
.hidden {
    display: none;
}

/*||Tooltip*/
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 250px;
    background-color: black;
    color: #000;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -125px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

.ticker {
    text-align: center;
    margin: inherit;
    padding: 10px 5px;
    margin-bottom: 0px;
}

.outage-ticker {
    background: #cc0000;
    color: #fff;
}


.outage-ticker i {
    padding: 0 5px;
    color: yellow;
}

.announcement-main-ticker {
    background: #fcc201;
    color: #000;

}

.announcement-bottom-ticker {
    background: #ff9700;
    color: #000;

}

.announcement-top-ticker {
    background: #fde814;
    color: #000;

}

.outage-ticker i {
    padding: 0 5px;
    color: #ffff00;
}

.announcement-ticker i {
    padding: 0 5px;
    color: #000;
}

.ticker-header {
    font-weight: bold;
    font-size: 9rem
}

.ticker-description {
    font-size: .8rem
}


.ticker-description a {
    font-weight: 600;
    text-decoration: underline;

}

.outage-ticker .ticker-description a {
    color: #fff;
}

.announcement-main-ticker .ticker-description a {
    color: #000;
}


.ticker-description > a:hover,
.support-cards a:hover {
    font-weight: 800;
}



.blink {
    animation: blink 1s steps(2, start) infinite;
    -webkit-animation: blink 1s steps(2, start) infinite;
}


@keyframes blink {
    to {
        visibility: hidden
    }
}

@-webkit-keyframes blink {
    to {
        visibility: hidden
    }
}

.forms i {
    font-size: 1, 125rem;
    padding-left: 10px;
}

.forms ul li a {
    font-size: 1.3rem;
    font-weight: normal;
}

.forms h2 {
    font-size: calc(1.275rem + .3vw) !important
}

.red {
    color: darkred;
}

.blue {
    color: dodgerblue;
}

.orange {
    color: orangered
}

.green {
    color: darkgreen
}



.filterTag {
    display: none;
}

.show {
    display: block;
}

.tag {
    cursor: pointer
}

/* Add a light grey background on mouse-over */
.tag:hover {
    background-color: #ddd;
}

/* Add a style to the active a tags */
.tag.active {
    font-weight: 600;
    font-style: italic;
}

.top-filter {
    display: none;
}


/*|| Protected.html */
.btn-dofprimary {
    color: #fff;
    background-color: #214D89;
    border-color: #214D89;
}

.btn-dofprimary:hover {
    color: #fff;
    background-color: #2b64b2;
    border-color: #2b64b2;
}

.password-protect {
    display: flex;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #f5f5f5;
}

.password-protect-content {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
}

.password-protect-content .form-floating:focus-within {
    z-index: 2;
}

.password-protect-content input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.form-floating #pswd {
    height: calc(3rem + 3px);
}

.error {
    font-weight: 600;
    color: red;

}

/*||logout.php*/

.logout {
    display: flex;
    align-items: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #f5f5f5;
}

.logout {
    width: 100%;
    max-width: 500px;
    padding: 15px;
    margin: auto;
}

/*||Download.php*/

.downloadlink > a {
    font-weight: 500;
    transition: transform 1s ease;
}

.downloadlink a h3:hover {
    transform: translate(2px);
    color: dodgerblue;
    border-left: 2px solid #000;
}


.download-card-img {
    height: 50px;
    width: 50px;

}

/* Style the list */
ul.breadcrumb {
    display: flex;
    justify-content: flex-start;
    padding: 5px;
    margin-bottom: 0 list-style: none;
    /*        background-color: #eee;*/
}

/* Display list items side by side */
ul.breadcrumb li {
    display: inline;
    font-size: 1rem;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li + li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
    color: #0076a4;
    text-decoration: none;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
    color: #2b64b2;
    text-decoration: underline;
}

@media (max-width:991px) {
    .top-filter {
        display: block;
    }
}

/*||Document Library */

.doc-library {
    padding: 10px;
}

.filter-items {
    font-size: .9rem;
}

.filter-items button,
.filter-items .search {
    font-size: .8rem;
}

.btn-all {
    border: 2px solid #6e7b8b;
    color: #6e7b8b;
}

.btn-all.selected {
    background-color: #6e7b8b;
    color: #fff;
}

.btn-g {
    border: 2px solid #b8860b;
    color: #b8860b;
}

.btn-g.selected {
    background-color: #b8860b;
    color: #fff;
}

.btn-a {
    border: 2px solid #A26769;
    color: #A26769;
}

.btn-a.selected {
    background-color: #A26769;
    color: #fff;
}

.btn-f {
    border: 2px solid #17a2b8;
    color: #17a2b8;
}

.btn-f.selected {
    background-color: #17a2b8;
    color: #fff;
}

.btn-n {
    border: 2px solid #1751b8;
    color: #1751b8;
}

.btn-n.selected {
    background-color: #1751b8;
    color: #fff;
}

.btn-o {
    border: 2px solid #006400;
    color: #006400;
}

.btn-o.selected {
    background-color: #006400;
    color: #fff;
}

.btn-m {
    border: 2px solid #212bb6;
    color: #212bb6;
}

.btn-m.selected {
    background-color: #212bb6;
    color: #fff;
}

.btn-h {
    border: 2px solid #6221B6;
    color: #6221B6;
}

.btn-h.selected {
    background-color: #6221B6;
    color: #fff;
}

.btn-v {
    border: 2px solid #015699;
    color: #015699;
}

.btn-v.selected {
    background-color: #015699;
    color: #fff;
}

.btn-u {
    border: 2px solid #419D78;
    color: #419D78;
}

.btn-u.selected {
    background-color: #419D78;
    color: #fff;
}

.btn-fy23 {
    border: 2px solid #d8a47f;
    color: #d8a47f;
}

.btn-fy23.selected {
    background-color: #d8a47f;
    color: #fff;
}


.dl-resources h5 {
    font-weight: 500;
    margin: 0;
    text-decoration: underline;
}

.dl-resources p {
    margin-bottom: 0;
    font-size: .9rem;
    padding: .5rem 0;

}

.dl-resources video {
    width: 100%;
    height: auto;
    padding: 1rem 0;

}

.keywords {
    display: inline-block;
    visibility: hidden;
}

@media (min-width: 992px) {
    .dl-resources video {
        width: 75%;
        margin: 1rem 2rem;
    }
}

.dl-resources > div {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 15px;
}

.dl-resources > div:last-of-type {
    border-bottom: 0;
}

.dl-resources-desc span,
.dl-resources-desc a {
    margin-right: .75rem;
    font-size: .8rem;
}


/*||S1 Install*/
#drivers a:hover h4{
        text-decoration: underline;
        text-underline-offset: .25rem;
        color: blueviolet;
    }