/* START tmp_betaBanner */
div.tmp_betaBanner {
    text-align: center;
    font-size: large;
}
div.tmp_betaBanner a.badge {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    border-top-left-radius: 12px;
    border-top-right-radius: 12px;

    padding-left: 8px;
    padding-right: 8px;
}
/* END tmp_betaBanner */

/* START Noto Sans */
    @import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i');
    body {
        font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
/* END Noto Sans */

/* START iPhone-auto-zoom-fix */
@media (max-width: 767px) {
    .form-control {
        font-size: 16px;
    }
}
/* END iPhone-auto-zoom-fix */


/* START .container */
    body.container, div.container {
        x-max-width: 760px; /* 760 < 768; also: 760 - (15 + 15) = 730 = 728 + (1 + 1);    Was: 720px;*/
        /*font-family: Arial, sans-serif;*/
    }
/* END .container */


/* START span.btn */
    span.btn { cursor: pointer; }                               /* In BS4, this seems to be explicitly req'd. */
/* END span.btn */


/* START img */
    img { max-width: 100%; }                                    /* A minimal sprinkle of responsive, inherited by Markdown etc. */
/* END img */

/* START Spinner Module */
    .spinner {
        position: fixed;
        width: 100%;
        top: 5em;
        left: 0;
        text-align: center;
        z-index: 1051;
        /*
            A note on .spinner's z-index:
            =============================

            Bootstrap modals have a z-index of 1050.
            We've used 1051 for the spinner, which is the
            smallest whole number greater than 1050.

            Higher z-indices used by Bootstrap are
            1060 (for pop-overs) and 1070 (for tooltips)
            respectively.

            The .spinner, currently, has purposely been
            given a z-index that's just necessary for
            appearing on top of modals. In the future,
            you may need to increase the z-index as needed.
        */
    }
    .spinnerBox {
        background-color: lightYellow;
        padding: 0.35em 0.70em;
        border-radius: 8px;
        border: 1px solid gainsboro;
        font-size: 1.125em;
    }
/* END Spinner Module */


/* START Brand Coloring */
    .brandColor { color: #60F; }
    .brandColorBack { background-color: #60F; }
    .brandBorder { border-color: #60F; }
    .brandBorder1px { border: 1px solid #60F; }
    .brandBorder2px { border: 2px solid #60F; }

    a { color: #60F; }
    h1, h2, h3, h4, h5, h6, label { font-weight: normal; }
    /* .display-1, .display-2, .display-3, .display-4, .display-5 { font-weight: normal; } */
/* END Brand Coloring */

/* START Training (Arrow) Color */
    .trainingColor { color: forestGreen; }
    .trainingColorBack { background-color: forestGreen; }
/* END Training (Arrow) Color */

/* START .btn-brand, based on BS3's .btn-danger */
    .btn-brand {
      color: #fff;
      background-color: #60F; /* orangeRed; /*#d9534f;*/
      border-color: #60F; /* orangeRed; /*#d43f3a;*/
    }
    .btn-brand:focus,
    .btn-brand.focus {
      color: #60F; /* orangeRed; /*#fff;*/
      background-color: white; /*#c9302c;*/
      border-color: #60F; /* orangeRed; /*#761c19;*/
    }
    .btn-brand:hover {
      color: #60F; /* orangeRed; /*#fff;*/
      background-color: white; /*#c9302c;*/
      border-color: #60F; /* orangeRed; /*#ac2925;*/
    }
    .btn-brand:active,
    .btn-brand.active,
    .open > .dropdown-toggle.btn-brand {
      color: #60F; /* orangeRed; /*#fff;*/
      background-color: white; /*#c9302c;*/
      border-color: #60F; /* orangeRed; /*#ac2925;*/
    }
    .btn-brand:active:hover,
    .btn-brand.active:hover,
    .open > .dropdown-toggle.btn-brand:hover,
    .btn-brand:active:focus,
    .btn-brand.active:focus,
    .open > .dropdown-toggle.btn-brand:focus,
    .btn-brand:active.focus,
    .btn-brand.active.focus,
    .open > .dropdown-toggle.btn-brand.focus {
      color: white; /*#fff;*/
      background-color: #60F; /* orangeRed; /*#ac2925;*/
      border-color: #60F; /* orangeRed; /*#761c19;*/
    }
    .btn-brand:active,
    .btn-brand.active,
    .open > .dropdown-toggle.btn-brand {
      background-image: none;
    }
    .btn-brand.disabled:hover,
    .btn-brand[disabled]:hover,
    fieldset[disabled] .btn-brand:hover,
    .btn-brand.disabled:focus,
    .btn-brand[disabled]:focus,
    fieldset[disabled] .btn-brand:focus,
    .btn-brand.disabled.focus,
    .btn-brand[disabled].focus,
    fieldset[disabled] .btn-brand.focus {
      background-color: white; /*#d9534f;*/
      border-color: #60F; /* orangeRed; /*#d43f3a;*/
    }
    /*.btn-brand .badge {
      color: #d9534f;
      background-color: #fff;
    }*/
/* END .btn-brand */


/* START .btn-outline-brand, based on above .btn-brand */
    .btn-outline-brand {
      color: #60F;
      background-color: white;
      border-color: #60F;
    }
    .btn-outline-brand:focus,
    .btn-outline-brand.focus {
      color: white;
      background-color: #60F;
      border-color: #60F;
    }
    .btn-outline-brand:hover {
      color: white;
      background-color: #60F;
      border-color: #60F;
    }
    .btn-outline-brand:active,
    .btn-outline-brand.active,
    .open > .dropdown-toggle.btn-outline-brand {
      color: white;
      background-color: #60F;
      border-color: #60F;
    }
    .btn-outline-brand:active:hover,
    .btn-outline-brand.active:hover,
    .open > .dropdown-toggle.btn-outline-brand:hover,
    .btn-outline-brand:active:focus,
    .btn-outline-brand.active:focus,
    .open > .dropdown-toggle.btn-outline-brand:focus,
    .btn-outline-brand:active.focus,
    .btn-outline-brand.active.focus,
    .open > .dropdown-toggle.btn-outline-brand.focus {
      color: #60F;
      background-color: white;
      border-color: #60F;
    }
    .btn-outline-brand:active,
    .btn-outline-brand.active,
    .open > .dropdown-toggle.btn-outline-brand {
      background-image: none;
    }
    .btn-outline-brand.disabled:hover,
    .btn-outline-brand[disabled]:hover,
    fieldset[disabled] .btn-outline-brand:hover,
    .btn-outline-brand.disabled:focus,
    .btn-outline-brand[disabled]:focus,
    fieldset[disabled] .btn-outline-brand:focus,
    .btn-outline-brand.disabled.focus,
    .btn-outline-brand[disabled].focus,
    fieldset[disabled] .btn-outline-brand.focus {
      background-color: #60F;
      border-color: #60F;
    }
    /*.btn-outline-brand .badge {
      color: #d9534f;
      background-color: #60F;
    }*/
/* END .btn-outline-brand */


/* START .btn-default (from BS3) */
    .btn-default {
      color: #333;
      background-color: #fff;
      border-color: #ccc;
    }
    .btn-default:focus,
    .btn-default.focus {
      color: #333;
      background-color: #e6e6e6;
      border-color: #8c8c8c;
    }
    .btn-default:hover {
      color: #333;
      background-color: #e6e6e6;
      border-color: #adadad;
    }
    .btn-default:active,
    .btn-default.active,
    .open > .dropdown-toggle.btn-default {
      color: #333;
      background-color: #e6e6e6;
      background-image: none;
      border-color: #adadad;
    }
    .btn-default:active:hover,
    .btn-default.active:hover,
    .open > .dropdown-toggle.btn-default:hover,
    .btn-default:active:focus,
    .btn-default.active:focus,
    .open > .dropdown-toggle.btn-default:focus,
    .btn-default:active.focus,
    .btn-default.active.focus,
    .open > .dropdown-toggle.btn-default.focus {
      color: #333;
      background-color: #d4d4d4;
      border-color: #8c8c8c;
    }
    .btn-default.disabled:hover,
    .btn-default[disabled]:hover,
    fieldset[disabled] .btn-default:hover,
    .btn-default.disabled:focus,
    .btn-default[disabled]:focus,
    fieldset[disabled] .btn-default:focus,
    .btn-default.disabled.focus,
    .btn-default[disabled].focus,
    fieldset[disabled] .btn-default.focus {
      background-color: #fff;
      border-color: #ccc;
    }
    /*.btn-default .badge {
      color: #fff;
      background-color: #333;
    }*/
/* END .btn-default (from BS3) */


/* START .btn-default.brandColor */
.btn-default.brandColor {
    color: #60F;
    border-color: #60F;
}
/* END .btn-default.brandColor */


/* START OVERRIDE PLACEHOLDER COLOR */
    .form-control::-moz-placeholder {
      color: silver;                                        /* BS3 default::  color: #999; */
      opacity: 1;                                           /* BS3 default::  opacity: 1; */
    }
    .form-control:-ms-input-placeholder {
      color: silver;                                        /* BS3 default::  color: #999; */
    }
    .form-control::-webkit-input-placeholder {
      color: silver;                                        /* BS3 default::  color: #999; */
    }
/* START OVERRIDE PLACEHOLDER COLOR */

/* START PRICING RELATED */
    .planContainer {
        border: 2px solid silver;
        border-radius: 8px;
        margin: 1em 0;
        padding: 2px;
        /*overflow: scroll;*/
    }
    .planContainer.favorite {
        border: 2px solid purple;
        background-color: lightYellow;
        /*transform: scale(1.05);*/
    }
    .planContainer hr.planHr {
        border-top: 3px solid lightGray;    /*BS3: 1px solid #eee*/
        margin: 20px;                       /*BS3: top=bottom=20px*/
    }
    .planContainer.favorite hr.planHr {
        border-top: 3px solid gold;
    }
/* END PRICING RELATED */