/* ======1=========2=========3=========4=========5=========6=========7======= */
/* 20170406-basic-nav-controls.css                                            */
/*----------------------------------------------------------------------------*/
/* ======1=========2=========3=========4=========5=========6=========7======= */
/* Lighter Theme -  .d_bright                                                 */
/*----------------------------------------------------------------------------*/
body.d_bright {
  background: -webkit-radial-gradient(rgba(161, 222, 240, 0.75), rgba(64, 129, 147, 0.75)), url(../../_jcf-shared/img/filter-light-mix-1.png), url(../../_jcf-shared/img/filter-light-tan-1.jpg);
  background: radial-gradient(rgba(161, 222, 240, 0.75), rgba(64, 129, 147, 0.75)), url(../../_jcf-shared/img/filter-light-mix-1.png), url(../../_jcf-shared/img/filter-light-tan-1.jpg);
}
a.d_bright    {  color: #5c86ae;}
p.d_bright    {  color: #505050;}
code.d_bright {  color: #c7254e;  background-color: #f9f2f4;}
pre.d_bright, pre code.d_bright  {  background-color: #f5f5f5;}
/*.code-comment d_bright {  color: #FF8000;}
.comments-list .comment-body.d_bright  {  color: #333;  background-color: #fff;}
.comments-list .comment-reply.d_bright {  color: #333;  background-color: #eeedf2;}
*/
section.d_bright    {  background-color: #f0f8ff;}
div.example.d_bright {  border: 1px solid #ccc;}
div#drop_zone.d_bright {  color: #bbb;  border: 1px solid #bbb;}
ul.results-group.d_bright {  color: #bbb;  background-color: #f0f8ff;  border: 1px solid #bbb;}
li.results-group-item.d_bright {  background-color: #f4eada;}
span.results-file-name.d_bright     {  color: #949494;}
span.results-file-type.d_bright     {  color: #258ed4;}
span.results-file-size.d_bright     {  color: #9c3ff3;}
span.results-file-date-mod.d_bright {  color: #ff9305;}

/* ======1=========2=========3=========4=========5=========6=========7======= */
/* Darker Theme - .d_dark                                                     */
/*----------------------------------------------------------------------------*/
body.d_dark   {  background-color: #BDBDBD;  background: #BDBDBD;}
a.d_dark      {  color: #4f58a9;}
p.d_dark      {  color: #171717;}
code.d_dark   {  color: #efe37e;  background-color: #000000;}
pre.d_dark, pre code.d_dark {  background-color: #9ca6af;}
/*.code-comment .d_dark {  color: #9c3d11}
.comments-list .comment-body.d_dark  {  color: #f3f0eb;  background-color: #793860;}
.comments-list .comment-reply.d_dark {  color: #f3f0eb;  background-color: #8792bf;}
*/
section.d_dark    {  background-color: #949494;}
div.example.d_dark {  border: 1px solid #f5f5dc;}
div#drop_zone.d_dark {  color: #f5f5dc;  border: 1px solid #f5f5dc;}
ul.results-group.d_dark {  color: #bbb;  background-color: #949494;  border: 1px solid #f5f5dc;}
li.results-group-item.d_dark {  background-color: #3e3e3e;}
span.results-file-name.d_dark     {  color: #1abc9c;}
span.results-file-type.d_dark     {  color: #3498db;}
span.results-file-size.d_dark     {  color: #c084f7;}
span.results-file-date-mod.d_dark {  color: #f1c40f;}

li.results-group-item span {  display: inline-block;}
span.results-file-name     {  width: 9em;}
span.results-file-type     {  width: 6em;}
span.results-file-size     {  width: 7em;  text-align: right;}
span.results-file-date-mod {  width: 12em;  margin-left: .58em;}


/* ======1=========2=========3=========4=========5=========6=========7======= */
/* Headings and hovering                                                      */
/* FEATURES: CSS automatically renumbers, if sections are manually reordered  */
/*----------------------------------------------------------------------------*/
a:hover {  color: #23527c;}
.sidebar-block.bg-secondary.p-3 a:hover {  color: #d3d5e6;}

.title-h3 {
  margin: 1em 0em .18em 0em;
  color: #DDD;
  background-color: #793860;
  padding: .18em .18em .18em .78em;
  font-size: 1.1em;
  line-height: 1.2em;
  font-weight: bold;
}
.title-h4 {
  color: #DDD;
  background-color: #8792bf;
  margin: 1em 0em .18em 0em;
  padding: .28em 0em .18em .58em;
}

body {  counter-reset: level_one popup_level_one;}
/*a.toc_item {  counter-reset: popup_level_two;}
a.toc_item::before {
  color: #cac177;
  counter-increment: popup_level_one;
  content: counter(popup_level_one);
  float: left;
  font-size: .92em;
  position: relative;
  top: -4px;
  right: 5px;
  padding: 0em 0em 0em .38em;
}
a.toc_sub_item::before {
  color: #cac177;
  counter-increment: popup_level_two;
  content: counter(popup_level_one) "." counter(popup_level_two);
  float: left;
  font-size: .92em;
  position: relative;
  top: -4px;
  right: 5px;
  padding: 0em 0em 0em .38em;
}
a.toc_item, a.toc_sub_item {  margin: .18em .28em 0em .18em;  padding: .38em .38em .28em .28em;;  display: inline-block;  float: left;}
a.toc_item     {  background-color: #793860;}
a.toc_sub_item {  background-color: #8792bf;}
#jcf-popup-toc-group a       {  color: #fff;  text-decoration: none;}
#jcf-popup-toc-group a:hover {  text-decoration: none;  cursor: pointer;  color: #9fa8cc;  background-color: #fff;}
*/
div.toc_item {  counter-reset: popup_level_two;}
div.toc_item::before {
  color: #cac177;
  counter-increment: popup_level_one;
  content: counter(popup_level_one);
  float: left;
  font-size: .92em;
  position: relative;
  top: -4px;
  right: 5px;
  padding: 0em 0em 0em .38em;
}
div.toc_sub_item::before {
  color: #cac177;
  counter-increment: popup_level_two;
  content: counter(popup_level_one) "." counter(popup_level_two);
  float: left;
  font-size: .92em;
  position: relative;
  top: -4px;
  right: 5px;
  padding: 0em 0em 0em .38em;
}
div.toc_item, a.toc_sub_item {  margin: .18em .28em 0em .18em;  padding: .38em .38em .28em .28em;  display: inline-block;  float: left;}
div.toc_item     {  background-color: #793860;}
div.toc_sub_item {  background-color: #8792bf;}
#jcf-popup-toc-group div       {  color: #fff;  text-decoration: none;}
#jcf-popup-toc-group div.toc_item:hover {  text-decoration: none;  cursor: pointer;  color: #9fa8cc;  background-color: #fff;}

.title-h3 {  counter-reset: level_two;}
.title-h3::before {
  color: #cac177;
  counter-increment: level_one;
  content: counter(level_one);
  float: left;
  font-size: .69em;
  position: relative;
  top: -4px;
  right: 5px;
}
.title-h4::before {
  color: #cac177;
  counter-increment: level_two;
  content: counter(level_one) "." counter(level_two);
  float: left;
  font-size: .69em;
  position: relative;
  top: -4px;
  right: 5px;
}
/*
20170717-Removed the h3 and h4 prefixes
to allow any element to be designated as a TOC target
*/
/*h3.title-h3 {  counter-reset: level_two;}
h3.title-h3::before {
  color: #cac177;
  counter-increment: level_one;
  content: counter(level_one);
  float: left;
  font-size: .69em;
  position: relative;
  top: -4px;
  right: 5px;
}
h4.title-h4::before {
  color: #cac177;
  counter-increment: level_two;
  content: counter(level_one) "." counter(level_two);
  float: left;
  font-size: .69em;
  position: relative;
  top: -4px;
  right: 5px;
}
*//* ======1=========2=========3=========4=========5=========6=========7======= */
/* Control Tool Box                                                           */
/*----------------------------------------------------------------------------*/
/*  top: 38px;*/
#jcf-control-box {
  background-color: rgba(0, 0, 0, 0.42);
  width: 2em;
  height: 14.7em;
  /*height: 15.2em;*/
  position: fixed;
  top: 42px;
  left: 7px;
  border-top-left-radius: .79em;
  border-bottom-left-radius: .79em;
  padding: 0px 0px 0px 3px;
  z-index: 10000;
}
#jcf-theme-changer {
  color: #fff;
  background-color: #000;
  width: 1.8em;
  height: 7.1em;
  margin: .58em 0em 0em .28em;
  border-top-left-radius: .79em;
  border-bottom: solid 4px rgba(0, 0, 0, 0.42);
  padding: .68em .48em 0em .58em;
  word-wrap: break-word;
  text-transform: uppercase;
  font-size: .68em;
  line-height: 1.2em;
  text-align: center;
}
#jcf-svg-controls-icon ,
#jcf-svg-go-top,
#jcf-svg-go-bottom {
  display: inline-block;
  float: left;
  clear: both;
  height: 24px;
  margin: .58em 0em 0em .05em;
  padding: 0em 0em 0em 0em;
  fill: #000;
}
#jcf-svg-toc-icon {
  display: inline-block;
  float: left;
  clear: both;
  height: 27px;
  margin: .58em 0em 0em .08em;
  padding: 0em 0em 0em 0em;
  fill: #000;
}
#jcf-theme-changer:hover {
  cursor: pointer;
  color: #000;
  background-color: #d2ccb7;
}
#jcf-svg-controls-icon:hover,
#jcf-svg-go-top:hover,
#jcf-svg-toc-icon:hover,
#jcf-svg-go-bottom:hover {
  fill: #d2ccb7;
  cursor: pointer;
  text-decoration: none;
}

/*#svg_comments_icon {
  height: 27px;
  margin: .68em 0em .08em .25em;
  display: inline-block;
  float: left;
  clear: both;
}*/
/*#svg_comments_icon:hover {  text-decoration: none;  cursor: pointer;  fill: #d2ccb7}*/
/*a.d_go_top, .d_go_bottom {  display: inline-block;  border-width: 12px;  border-style: solid;  float: left;  clear: both;}
a.d_go_top           {  border-bottom-color: #000000;  margin: -.28em 0em 0em .28em;  border-top-color: #d3d5e6;  border-left-color: #d3d5e6;  border-right-color: #d3d5e6;}
a.d_go_top:hover     {  border-bottom-color: #813163;  border-top-color: #d3d5e6;  border-left-color: #d3d5e6;  border-right-color: #d3d5e6;}
a.d_go_bottom        {  border-top-color: #000000;  margin: .38em 0em 0em .28em;  border-bottom-color: #d3d5e6;  border-left-color: #d3d5e6;  border-right-color: #d3d5e6;}
a.d_go_bottom:hover  {  border-top-color: #813163;  border-bottom-color: #d3d5e6;  border-left-color: #d3d5e6;  border-right-color: #d3d5e6;}
*/
span#top_of_page        {  position: absolute;  top: 0px;  left: 25px;}
span#bottom_of_page     {  position: absolute;  bottom: 0px;  left: 25px;}

span#jcf_top_of_page    {  position: absolute;  top: 0px;  left: 25px;}
span#jcf_bottom_of_page {  position: absolute;  bottom: 0px;  left: 25px;}

span#jcf-top-of-page    {  position: absolute;  top: 0px;  left: 25px;}
span#jcf-bottom-of-page {  position: absolute;  bottom: 0px;  left: 25px;}

#d-toc-count {
  color: #000;
  background-color: #9fa8cc;
  height: 1.2em;
  font-size: .89em;
  font-weight: 900;
  font-style: oblique;
  text-transform: uppercase;
  letter-spacing: .4em;
  text-align: left;
  padding: 0em 0em 0em .58em;
  position: relative;
  top: -4px;
  left: -5px;
}
#jcf-popup-toc-group {
  background-color: #9fa8cc;
  font-size: .86em;
  width: 87%;
  max-height: 75vh;
  position: fixed;
  top: 40px;
  left: 7px;
  border-top: 4px solid #000;
  border-right: 2px solid #000;
  border-bottom: 4px solid #000;
  border-left: 2px solid #000;
  padding: .08em .28em .48em .38em;
  z-index: 10000;
  overflow: scroll;
}
#jcf-popup-controls-group {
  background-color: #9fa8cc;
  font-size: .86em;
  width: 87%;
  max-height: 75vh;
  position: fixed;
  top: 40px;
  left: 7px;
  border-top: 4px solid #000;
  border-right: 2px solid #000;
  border-bottom: 4px solid #000;
  border-left: 2px solid #000;
  padding: 0em 0em .28em 0em;
  z-index: 10000;
  overflow: scroll;
}

.jcf_hide {  display: none;}
.jcf_show {  display: block;}
.jcf_hide_inline-block {  display: none;}
.jcf_show_inline-block {  display: inline-block;}

/* checkbox */
.jcf_checkbox_btn {
  font-size: 1em;
  line-height: 2em;
  display: inline-block;
  padding: 0 1em;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  border-width: 1px;
  border-style: solid;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ======1=========2=========3=========4=========5=========6=========7======= */
/* CSS - Toggle Buttons - Version 4                                           */
/*----------------------------------------------------------------------------*/
.controls-group-title {
  height: 1.5em;
  text-align: center;
  color: #fff8e1;
  background-color: #264694;
  font-size: 1.2em;
  padding: .22em .18em .18em .18em;
}
.controls-group-item {
  width: 100%;
  color: #fff8e1;
  background-color: #503c0e;
  display: inline-block;
  float: left;
  margin: .28em 0em .28em 0em;
  padding: .58em .28em .28em .28em;
}
.slider-description {
  max-width: 11em;
  position: relative;
  display: inline-block;
  float: left;
}
.emoji-toggle .well {
  display: block;
  background: #eee;
  height: 28px;
  border-radius: 50px;
  cursor: pointer;
}
.slideThree  .checkbox-toggle:checked ~ label.well {
  background: #00b107;
}
.slideThree {
  width: 56px;
  height: 29px;
  display: inline-block;
  float: right;
  background: #333;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  position: relative;
  -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
  -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}
.slideThree:after {
  content: 'OFF';
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: .79em;
  color: #b3b3b3;
  position: absolute;
  top: 9px;
  right: 3px;
  z-index: 0;
}
.slideThree:before {
  content: 'ON';
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: .79em;
  color: #dadada;
  position: absolute;
  top: 9px;
  right: 32px;
  z-index: 1;
}
.emoji-on-off .checkbox-toggle ~ .switch-circle:before {
  content: "";
  position: absolute;
  top: 8px;
  left: 1px;
  margin: -8px 0 0;
  width: 28px;
  height: 28px;
  z-index: 2;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  -ms-transition: all .4s ease;
  transition: all .4s ease;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
  background: #fcfff4;
  background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
}
.emoji-on-off .checkbox-toggle:checked ~ .switch-circle:before {
  content: "";
  position: absolute;
  top: 8px;
  left: 28px;
  margin: -8px 0 0;
  width: 28px;
  height: 28px;
  z-index: 2;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  -o-transition: all .4s ease;
  -ms-transition: all .4s ease;
  transition: all .4s ease;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
  background: #fcfff4;
  background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
}
.checkbox-toggle {
  opacity: 0;
  border: 0;
  outline: none;
  height: 100%;
  width: 100%;
  background: transparent;
  position: absolute;
  cursor: pointer;
  z-index: 100;
}

/* ======1=========2=========3=========4=========5=========6=========7======= */
/* CSS - JCF-Display-window-width                                             */
/*----------------------------------------------------------------------------*/
#display-window-size {
  color: #ffffff;
  font-size: .89em;
  position: fixed;
  top: 10px;
  right: 110px;
  z-index: 10000;
}
.window-size-prompts {
  margin: 0em .28em 0em .89em;
}
.window-size-values {
  padding: .28em .38em .28em .38em;
  color: #ffff00;
  background-color: #000000;
}