﻿/* ============ 
   General
   =============*/

body { font-family: "Open Sans", Arial, sans-serif; font-size: 15px; }
header { padding: 12px 30px; }
footer { margin-bottom: 25px; background-color: transparent; }

a, button { outline: none !important; }
a { color: #007ec7; }
  a:hover { color: #015d80; }

.body-content { padding-top: 15px; }

/* ============ 
   Buttons  
   ============ */

.btn-light { color: #212529; background-color: #f0f1f2; border-color: #ccc; text-transform: none; }
  .btn-light.disabled { border-color: #ccc; }

.btn-xs { padding: 0.135rem 0.26rem; font-size: 0.85rem; line-height: 1.3; border-radius: 0.15rem; }
.btn-rounded { border-radius: 30px; background: white; }

.dropdown-item { font-size: 15px; }
.dropdown-toggle { -webkit-box-shadow: 0 !important; box-shadow: 0 !important; }

.button-bar { padding: 0 0 30px 0; text-align: center; background-color: white; }

/* bootstrap override */

.btn-primary { color: #fff; background-color: #008cc1; border-color: #007bff; }
  .btn-primary:hover, .btn-primary:focus { color: #fff; background-color: #0077a4; border-color: #009dc1; }
  .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
  .show > .btn-primary.dropdown-toggle { color: #fff; background-color: #008cc1; border-color: #0077a4; }
    .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
    .show > .btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5); }

/* ============ 
   Underlines
   =============*/

a.dashed-underline { text-decoration: none; border-bottom: 1px dashed #3c7676; }
  a.dashed-underline:hover { border-bottom: 1px solid #515b5b; }

/* ============ 
   Forms
   =============*/

.form-title { font-size: 15px; text-transform: uppercase; border-bottom: 1px solid #ddd; padding: 6px; margin: 15px 0 25px 0; margin-bottom: 25px; }

.form-control { font-size: 15px; }
.form-group { margin-bottom: 3px; }

.col-form-label { padding-top: calc(0.375rem + 2px); text-align: right; }
.col-form-text { padding-top: calc(0.375rem + 1px); padding-bottom: calc(0.375rem + 1px); margin-bottom: 0; font-size: inherit; line-height: 1.5; }
.col-form-checkbox { padding-top: calc(0.375rem + 4px); padding-bottom: calc(0.375rem + 1px); margin-bottom: 0; font-size: inherit; line-height: 1.5; }

.input-validation-error { border: solid 1px #F00; outline: 0; }
.input-validation-error:focus { border-color: #F00; box-shadow: 0 0 0 0.2rem rgb(255 0 0 / 25%); }
.field-validation-error { color: #f7735a; font-size: 12px; }

.required { color: red; display: inline-block; padding-right: 4px; }

/* ============ 
   ShoutOut
   =============*/

.shoutout {
    background-color: rgba(0, 0, 0, 0.6);
}

/* ============ 
   Health Check List
   =============*/

ul {
    padding-left: 0;
    margin-bottom: 0;
}

li {
    list-style: none;
}

li + li {
    border-bottom: 1px #c0c0c0;
}

.status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #a52a2a;
    animation: pulseFail 2s infinite;
    margin-right: 1rem;
}

    .status.fail {
        background: #a52a2a;
        animation: pulseFail 2s infinite;
    }

    .status.success {
        background: #2e8b57;
        animation: pulseSuccess 2s infinite;
    }

@-webkit-keyframes pulseFail {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(165,42,42, 0.8);
    }

    70% {
        -webkit-box-shadow: 0 0 0 5px rgba(165,42,42, 0);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(165,42,42, 0);
    }
}

@keyframes pulseFail {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(165,42,42, 0.8);
        box-shadow: 0 0 0 0 rgba(165,42,42, 0.8);
    }

    70% {
        -moz-box-shadow: 0 0 0 5px rgba(46,70,128, 0);
        box-shadow: 0 0 0 5px rgba(46,70,128, 0);
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(46,70,128, 0);
        box-shadow: 0 0 0 0 rgba(46,70,128, 0);
    }
}

@-webkit-keyframes pulseSuccess {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(46,139,87, 0.8);
    }

    70% {
        -webkit-box-shadow: 0 0 0 5px rgba(46,139,87, 0);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(46,139,87, 0);
    }
}

@keyframes pulseSuccess {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(46,139,87, 0.8);
        box-shadow: 0 0 0 0 rgba(46,139,87, 0.8);
    }

    70% {
        -moz-box-shadow: 0 0 0 5px rgba(46,70,128, 0);
        box-shadow: 0 0 0 5px rgba(46,70,128, 0);
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(46,70,128, 0);
        box-shadow: 0 0 0 0 rgba(46,70,128, 0);
    }
}