/* 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;
        font-size: 15px;        /*BS3: 14px.    BS4: 16px.*/
        line-height: 1.5;       /*BS3: 1.428.   BS4: 1.5*/
    }
    /* BS4 (Taking 1rem = 16px)
    h1, .h1 { font-size: 40px; }
    h2, .h2 { font-size: 32px; }
    h3, .h3 { font-size: 28px; }
    h4, .h4 { font-size: 24px; }
    h5, .h5 { font-size: 20px; }
    h6, .h6 { font-size: 16px; }
    */
/* 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 {
        max-width: 760px; /* 760 < 768; also: 760 - (15 + 15) = 730 = 728 + (1 + 1);    Was: 720px;*/
        /*font-family: Arial, sans-serif;*/
    }
/* END .container */


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

/* START div.note-editable img */
    div.note-editable img {
        display: block;
        margin: auto;
    }
/* END div.div.note-editable img */


/* START .btn (margin-bottom) */
    .btn {
        margin-bottom: 4px; /* bootstap sets this to zero. */
    }
/* END .btn (margin-bottom) */


/* START code (dodgerBlue) */
    code { color: dodgerBlue; }
/* END .code */


/* 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 yellow;
        font-size: 1.125em;
    }
/* END Spinner Module */


/* START .supportBeacon */
    .supportBeacon {
        position: fixed;
        width: 60px;
        height: 60px;
        bottom: 1em;
        right: 1em;
        z-index: 1000;
        background-color: yellow;
    }
/* End .supportBeacon */


/* START Brand Coloring */
    .brandColor { color: royalBlue; }
    .brandColorBack { background-color: royalBlue; }
    
    .darkBrandColor { color: #352D45; }
    .darkBrandColorBack { background-color: #352D45; }
/* END Brand Coloring */

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

/* START .btn-brand, based on Bootstrap's .btn-danger */
.btn-brand {
  color: #fff;
  background-color: royalBlue; /* orangeRed; /*#d9534f;*/
  border-color: royalBlue; /* orangeRed; /*#d43f3a;*/
}
.btn-brand:focus,
.btn-brand.focus {
  color: royalBlue; /* orangeRed; /*#fff;*/
  background-color: white; /*#c9302c;*/
  border-color: royalBlue; /* orangeRed; /*#761c19;*/
}
.btn-brand:hover {
  color: royalBlue; /* orangeRed; /*#fff;*/
  background-color: white; /*#c9302c;*/
  border-color: royalBlue; /* orangeRed; /*#ac2925;*/
}
.btn-brand:active,
.btn-brand.active,
.open > .dropdown-toggle.btn-brand {
  color: royalBlue; /* orangeRed; /*#fff;*/
  background-color: white; /*#c9302c;*/
  border-color: royalBlue; /* 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: royalBlue; /* orangeRed; /*#ac2925;*/
  border-color: royalBlue; /* 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: royalBlue; /* orangeRed; /*#d43f3a;*/
}
.btn-brand .badge {
  color: #d9534f;
  background-color: #fff;
}
/* END .btn-brand */


/* START .btn-default.orangeRed */
.btn-default.orangeRed {                                    /* -- DEPRECATED. Use .btn-defaut.brandColor instead.*/
    color: royalBlue; /* orangeRed; */
    border-color: royalBlue; /* orangeRed; */
}
/* END .btn-default.orangeRed */


/* START .btn-default.orangeRed */
.btn-default.brandColor {
    color: royalBlue;
    border-color: royalBlue;
}
/* END .btn-default.orangeRed */


/* START .emoji (emojify.js) */
    .emoji {
        vertical-align: baseline;
    }
/* END .emoji*/


/* START simplesharingbuttons.com */
    ul.share-buttons{
      list-style: none;
      padding: 0;
    }

    ul.share-buttons li{
      display: inline;
    }

    ul.share-buttons .sr-only {
      position: absolute;
      clip: rect(1px 1px 1px 1px);
      clip: rect(1px, 1px, 1px, 1px);
      padding: 0;
      border: 0;
      height: 1px;
      width: 1px;
      overflow: hidden;
    }

    ul.share-buttons img{
      width: 32px;
      margin: 2px 1px;
    }
/* END simplesharingbuttons.com */


/* START .planContainer */
    .planContainer {
        border: 2px solid silver;
        border-radius: 8px;
        margin: 1em 0;
        padding: 2px;
        /*overflow: scroll;*/
    }
    .planContainer .btn {
        /*min-width: 200px;*/
        font-size: 16px;    /*TWBS default is 14px*/
    }
    .planContainer.favorite {
        border: 2px solid purple;
        /*transform: scale(1.05);*/
    }
    .planContainer hr.planHr {
        border-top: 3px solid lightGray; /*BS: 1px solid #eee*/
        margin: 20px;                 /*BS: top=bottom=20px*/
    }
    .planContainer.favorite hr.planHr {
        border-top: 3px solid gold;
    }
    .planContainer div.form-group .form-control {
        display: block;
        margin: auto;
        max-width: 200px;
        text-align-last: center;    /*Centers selected option in Chrome*/
        /* Hiding dropdown down arrow (in favor of &dtrif;): *x/
        -moz-appearance: none;
        -webkit-appearance:none;*/
    }
    .planContainer div.form-group .form-control[disabled] {
        background-color: white;
    }
    

    @media (min-width: 992px) {
        /* Media query handels md screens. */
        .smPlusNegPlanRowMargin {
            margin: auto -135px;
        }
    }
    @media (min-width: 1200px) {
        /* Media query handels lg+ screens. */
        .smPlusNegPlanRowMargin {
            margin: auto -210px;
        }
    }
/* END .planContainer */


/* START .pricingFaq */
    .pricingFaqArea { max-width: 520px; margin: auto; }
    .pricingFaqQuestion, .pricingFaqAnswer { text-align: justify; }
    .pricingFaqQuestion { font-weight: bold }
    .pricingFaqAnswer { /*NOOP()*/ }
/* END .pricingFaq*/

/* START canvas.handSignature */
    canvas.handSignature {
        display: block;
        /*width: 290px;     // Height & width are controlled via canvas attributes.
        height: 50px;*/
        /*?max-width: 100%;    /* Instead of setting width, we set a max-width. */
        border: 1px solid lightGray;
        /*border-radius: 4px;*/
    }
/* END canvas.handSignature */


/* START div.bootstrap-tagsinput */
    div.bootstrap-tagsinput {
        width: 100%;
    }
/* END div.bootstrap-tagsinput */

/* START .dropdown-menu */
    .dropdown-menu {
        font-size: 16px;    /* This makes dropdowns more readable and (tap-clickable). Bootstrap's default seems to be 14px. */
    }
/* END .dropdown-menu */

/* START .directive-container, .stage-container */
    /*.directive-container, */
    .stage-container {
        border: 2px solid powderBlue;
        border-radius: 4px;
        padding: 4px 8px;
        background-color: azure;
        margin-bottom: 58px;  /* fa4x: 58px exact, 55px also OK. */
    }
    
    .stage-container .stage-bottom-arrow {
        margin-bottom: -66px; /* fa4x: -66px exact, -65px also OK. */
    }
/* END div.directive-container, .stage-container */

/* START .quick-add-area */
    .workflowBuilder_quickAddArea {
        border: 1px solid gold;
        background-color: lightYellow;
        padding: 4px 8px;
        margin: 1em 0;
    }
/* END .quick-add-area */


/* START .table-responsive.bordered */
    .table-responsive.bordered {
        border: 1px solid #ddd;     /* Same as table.table-bordered's border. */
    }
/* END .table-responsive.bordered  */

/* START NIGHT MODE */
    
    .nightMode,
    .nightMode .form-control,
    .nightMode .note-editor.note-frame .note-editing-area .note-editable {
        color: #ffffff;
        background-color: #222222;
    }
    
    .nightMode .spinner,
    .nightMode .stage-container,
    .nightMode .lightYellowBack,
    .nightMode .modal-content,
    .nightMode .lemonChiffonBack,
    .nightMode .planContainer.favorite {
        color: #333;
    } 
    
    .nightMode .table-striped > tbody > tr:nth-of-type(odd) {
      background-color: #3d3d3d;
    }
    
    .nightMode a { color: lightSkyBlue; }
    .nightMode .unsetColor,
    .nightMode a.unsetColor,
    .nightMode a .unsetColor,
    .nightMode a.btn {
        color: unset;
    }
    
    .nightMode .btn-default {
      color: #ffffff;
      background-color: #464545;
      border-color: #464545;
    }
    .nightMode .dropdown-menu {
        background-color: #303030;
        border: 1px solid #cccccc;
        border: 1px solid rgba(0, 0, 0, 0.15);
    }
    .nightMode .dropdown-menu > li > a { color: #ebebeb; }
    .nightMode .dropdown-menu > li > a:hover,
    .nightMode .dropdown-menu > li > a:focus {
        text-decoration: none;
        color: #ffffff;
        background-color: #375a7f;
    }
    
    .nightMode code { color: navy; }
    .nightMode hr { border-top: 1px solid #464545; }
/* END NIGHT MODE */

/* START REMOVE SUMMERNOTE PROJECT LINKS */
    a[href="http://summernote.org/"],
    a[href="https://github.com/summernote/summernote"],
    a[href="https://github.com/summernote/summernote/issues"] {
        display: none;
    }
/* END REMOVE SUMMERNOTE PROJECT LINKS */

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


/* START YT VIDEO WRAPPER */
    .videoWrapper {
	    position: relative;
	    padding-bottom: 56.25%; /* 16:9 */
	    padding-top: 25px;
	    height: 0;
    }
    .videoWrapper iframe {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
    }
/* END YT VIDEO WRAPPER */