/*******************************
    Borders, Background, Colors
********************************/

.imp-service-bg {
    background-color: #EBECF0;
}

.light-grey-bg {
    background-color: #EAEAEA;
}

.red-bg {
    background-color: red;
}

.white-bg {
    background-color: #FFFFFF;
}

.grey-border {
    border-color: #909090!important;
}


/****************
    Image
****************/

.cover-image-bg {
    width: 100%;
    height: 300px;
    object-fit:cover;
}

.maintenance-avatar {
    fill: #0598CE;
    color: #FFFFFF;
    stroke-width: 1px;
}

.major-impact-avatar {
    fill: #DD0000;
    color: #FFFFFF;
}

.minor-impact-avatar {
    fill: #FFCC00;
    color: #FFFFFF;
}

.operational-avatar {
    background-color: #059142;
    color: #FFFFFF;
    border-radius: 50px;
    padding: 4px;
    stroke-width: 3px;
}

.outage-avatar {
    background-color: #DD0000;
    color: #FFFFFF;
    border-radius: 50px;
    padding: 4px;
    stroke-width: 3px;
}

.partial-outage-avatar {
    fill: #FFCC00;
    color: #FFFFFF;
    border-color: #FFCC00;
}

/***************
    Dimensions
***************/

.tc-max-width-100 {
    max-width: 100px;
}

.tc-max-width-500 {
    max-width: 500px;
}

.tc-height-90 {
    height: 90px;
}

.tc-height-300 {
    height: 300px;
}

.tc-max-height-40 {
    max-height: 40px;
}

.feather-16 {
    height: 16px;
    width: 16px;
}

.feather-18 {
    height: 18px;
    width: 18px;
}

.feather-20 {
    height: 20px;
    width: 20px;
}

.feather-22 {
    height: 22px;
    width: 22px;
}

.feather-50 {
    height: 50px;
    width: 50px;
}

.tc-rounded-10 {
    border-radius: 10px;
}

/*************
    Text
*************/

.charcoal-black-text {
    color: #36454F;
}

.grey-text {
    color: #2E2E2E;
}

.blue-text {
    color: #4169E1;
}

.light-slate-text {
    color: #778899;
}

.light-grey-text {
    color: #808080;
}

.site-text {
    color: #212121;
}

.slate-text {
    color: #4B5D68;
}

.bold-400 {
    font-weight: 400;
}

.bold-500 {
    font-weight: 500;
}

.bold-600 {
    font-weight: 600;
}

.green-highlight {
    background-color: #E6F8D1;
    color: #059142;
    border-radius: 6px;
}

.grey-highlight {
    background-color: #E3E3E3;
    color: #3F3F3F;
    border-radius: 6px;
}

.red-highlight {
    background-color: #FFCCCB;
    color: #DC3545;
    border-radius: 6px;
}

.yellow-highlight {
    background-color: #FFECB3;
    color: #BA3F38;
    border-radius: 6px;
}

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

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

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

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

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

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

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

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

.no-decoration {
    text-decoration: none!important;
}

.no-border {
    border: 0px;
}


/****************
    Buttons
****************/

.accordion-button:focus {
    background-color: white;
    outline: none;
    box-shadow: none;
}

.switch-tab {
    background-color: transparent!important;
    border: none!important;
    outline: none!important;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: #606060;
}

.switch-tab.active {
    border-bottom: 2px solid blue!important;
    color: blue;
}

.tc-cursor {
    cursor: pointer;
}

.impact-tooltip .tooltiptext {
    visibility: hidden;
    background-color: #CECECE;
    color: #404040;
    text-align: center;
    border-radius: 2px;
    padding: 5px;
    margin-top: 10px;
    position: absolute;
    z-index: 1;
}

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