@media print {
  #header, .navMenu, #crumbs, .noprint { display: none; }
  a { color: #444444; }
  ul.tabs li { margin-left: 0 !important; padding-left: 0 !important; border: 0 !important; }
  ul.tabs li a { display: none; }
}

/* overflow */
.overflow-div,
.overflow-block {
  width:      100%;
  overflow:   auto;
  overflow-y: hidden;
}

/* Percentage Layouts: 25% / 75% */
.col-2-left-25p {
  width: 23%;
  float:left
}
.col-2-right-75p {
  width:75%;
  float:right
}

a[href$=".dat"]:after,
a[href$=".csv"]:after { content: none !important; }

#page-content ul {
  margin: 1em 0 1em 1em;
}

#page-content ul li {
  margin: 0.5em 0 0.5em 1em;
}

#contact {
  float:         right;
  width:         740px;
  margin-bottom: 10px;
  border-top:    solid 1px #ccc;
  padding-top:   10px;
  font-size:     0.8em;
}

.bold { font-weight: bold; }
.italic { font-style: italic; }
.underline { border: 0; text-decoration: underline; }
.flex { display: flex; }
ul.flex { list-style: none; }
.flex > * { flex: 1; }

/* overwrite 12px padding-right in ncdc css */
label { padding-right: 4px !important; }

/* details summary*/
details summary {
  cursor:  pointer;
  outline: none;
}

#next-release { float: right; font-size: 0.9em; color: #777; }

.suite-description   { font-style: italic; font-weight: normal; color: #777; font-size: 1.0em; margin-bottom: 2em; }
.product-description { font-style: italic; font-weight: normal; color: #777; font-size: 0.9em; }
/* Index ToC
 **********/
 .index-toc {
  font-size:   0.9em;
  display:     flex;
  align-items: stretch;
}

.index-toc ul {
  flex:            1;
  padding:         0.5em 1em;
  margin:          0 0.5em 0.75em 0.5em !important;
  list-style-type: none;
  background:      linear-gradient(rgba(17,46,81,0.05),rgba(17,46,81,0.01));
  border-radius:   3px;
  box-shadow:      0 5px 5px 2px #ccc;
}

.index-toc ul:first-child { margin-left: 0; }
.index-toc ul:last-child { margin-right: 0; }

.index-toc ul li {
  margin:      0;
  padding:     0;
  line-height: 1.75em;
}

.index-toc ul li.index-toc-header {
  font-size:     1.25em;
  font-weight:   bold;
  color:         #777;
}

.index-toc li a {
  display: block;
  padding: 0.5em 0.25em;
  color:   #444;
  border-radius: 3px;
}
.index-toc li a span.index-toc-title { color: #0057a5; }
.index-toc li a:hover { background-color: rgba(17,46,81,0.1); }
/**************
 End SotC ToC */

button,
input[type=submit] { transition: background-color 0.5s ease; }

button:disabled,
input[type=submit]:disabled {
  cursor:           default;
  background-color: #ccc;
  transition:       background-color 0.5s ease;
}


/*
 * Table of Contents
 */
.link,.section-link,ul#toc li { cursor: pointer; color: #0057a5; }
ul#toc li.selected a,
ul#toc li.selected a:hover,
ul#toc li a.selected,
ul#toc li a.selected:hover,
ul#toc li.selected,
ul#toc li.selected:hover { cursor: default; color: #000; text-decoration: none; background-color: transparent !important; }
.loader { text-align: center; }

/*
 * Tabs
 */
ul.tabs {
  border-bottom:   1px solid #bbb;
  border-collapse: collapse;
  height:          auto;
  line-height:     normal;
  list-style:      none;
  margin-left:     0 !important;
  padding:         0 0 0 1em;
  white-space:     nowrap;
  cursor:          default;
}

ul.tabs li {
  display:      inline;
  margin-right: 0.1em !important;
  line-height:  1em !important;
}

ul.tabs li a {
  background-color: rgb(240, 240, 248);
  border-color:     #bbb;
  border-style:     solid solid none solid;
  border-width:     1px;
  height:           auto;
  padding:          0 1em;
  border-radius:    7px 7px 0px 0px;
}

ul.tabs li.selected {
  padding:          0 1em !important;
  background-color: #fff;
  border:           1px solid #bbb;
  border-bottom:    1px solid #fff;
  border-radius:    7px 7px 0px 0px;
  font-weight:      bold;
}

ul.secondary-tabs {
  border-bottom: 1px solid #bbb;
  padding:       0.5em 1em;
  margin:        5px;
}

ul.secondary-tabs li {
  border-right: 1px solid #ccc;
  display:      inline;
  padding:      0 1em;
}

ul.secondary-tabs a {
  padding:         0;
  text-decoration: none;
}

ul.secondary-tabs a.active {
  border-bottom: 4px solid #999;
}
/* end Tabs */


/*
 * Section Menu
 */
#sectionMenu {
  display:          flex;
  align-items:      flex-end;
  font-size:        0.9em;
  margin:           0 0 -1px 0 !important;
  background-color: #FFFFFF;
  padding:          0 2px 0 1px !important;
  color:            #777777;
  border-bottom:    solid 1px #FFFFFF;
}

#sectionMenu li {
  display:    inline;
  margin:     0 0.5em 0 0 !important;
  list-style: none;
  padding:    1em !important;
  text-align: center;
  cursor:     pointer;
}

#sectionMenu li a {
  display: block;
  color:   #777777;
}

#sectionMenu li:hover,
#sectionMenu li a:hover { color: #444444; }

#sectionMenu li.selected {
  border-bottom: solid 2px #0159A6;
  color:         #0159A6;
  font-weight:   bold;
}

#sectionMenu li.selected a {
  color:       #0159A6;
  font-weight: bold;
}

#sectionMenu li.blue {
  background-color:   #80ACD3;
  font-weight:        bold;
  color:              #777777;
  -webkit-transition: background-color 100ms linear;
      -ms-transition: background-color 100ms linear;
          transition: background-color 100ms linear;
}

#subsectionMenu {
  display:          flex;
  flex-flow:        row wrap;
  justify-content:  space-evenly;
  border-top:       1px solid #ccc;
  background-color: #f1f1f1;
  margin:           0 !important;
}

#subsectionMenu li {
  background-color: inherit;
  display:          inline-block;
  text-align:       center;
  transition:       0.3s;
  font-size:        0.8em;
  flex:             1 1 0;
  margin:           0 !important;
  cursor:           pointer;
  color:            #0057a5;
  padding:          0.5em 0;
}

#subsectionMenu li:hover { font-weight: bold !important; background-color: #ddd; }

#subsectionMenu li.selected {
  font-weight:      bold !important;
  cursor:           default;
  color:            #444444;
  background-color: #ccc;
}

#monitoring-content {
  padding:            1em 0.5em;
  margin-bottom:      1em;
  border-bottom:      solid 1px #FAFAFA;
  -webkit-box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4);
     -moz-box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4);
          box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4);
}
/* end Section Menu */


/*
 * "Back to Top" Floating Button
 */
#backToTop,
#toTop {
  display:               none;
  position:              fixed;
  right:                 10px;
  bottom:                10px;
  cursor:                pointer;
  width:                 50px;
  height:                50px;
  background-color:      #0159A6;
  text-indent:           -9999px;
  display:               none;
  -webkit-border-radius: 60px;
  -moz-border-radius:    60px;
  border-radius:         60px;
  z-index: 1001;
}

#backToTop span,
#toTop span {
  position:            absolute;
  top:                 50%;
  left:                50%;
  margin-left:         -8px;
  margin-top:          -12px;
  height:              0;
  width:               0;
  border:              8px solid transparent;
  border-bottom-color: #ffffff;
}

#backToTop:hover,
#toTop:hover {
  background-color: #00A3E3;
  opacity:          1;
  filter:           "alpha(opacity=100)";
  -ms-filter:       "alpha(opacity=100)";
}
/* end Floating "Back to Top" Button */


/*
 * Buttons
 */
.button {
  display:               inline;
  border:                1px solid #ddd;
  background:            url("/monitoring-content/lib/images/button-bg.png") repeat-x scroll 50% 50% #e6e6e6;
  color:                 #666;
  border-radius:         2px;
  cursor:                pointer;
  font-size:             11px;
  font-weight:           bold;
  height:                22px;
  line-height:           22px;
  margin:                5px;
  min-width:             44px;
  padding:               5px 8px !important;
  text-align:            center;
  white-space:           nowrap;
  font-family:           arial,sans-serif;
  -moz-user-select:      none;
  -khtml-user-select:    none;
  -webkit-user-select:   none;
  -o-user-select:        none;
  -ms-user-select:       none;
  -webkit-touch-callout: none;
  user-select:           none;
}

.button:hover {
  border-color: #ccc;
  color:        #222;
}

.button:active {
  padding:          6px 7px 4px 9px;
  background-color: #ddd;
}
/* end Buttons */

/*
 * Circle Arrow
 *
 * <a class="circle-arrow" href="#"><span class="circle" aria-hidden="true"><span class="arrow"></span></span><span class="circle-arrow-text">Learn More</span></a>
 */
.circle-arrow {
  font-family:     arial, sans-serif !important;
  position:        relative;
  font-size:       0.75rem !important;
  line-height:     1.5 !important;
  display:         inline-block;
  cursor:          pointer;
  outline:         none;
  border:          0;
  vertical-align:  middle;
  text-decoration: none;
  background:      transparent;
  padding:         0;
  width:           8rem;
  height:          auto;
}
.circle-arrow .circle {
  transition:   all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position:     relative;
  display:      block;
  margin:       0;
  width:        1.5rem;
  height:       1.5rem;
  background:   #282936;
  border-radius: 1.625rem;
}
.circle-arrow .circle .arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position:   absolute;
  top:        0.0rem;
  bottom:     0;
  margin:     auto;
  background: #fff;
  left:       -0.125rem;
  width:      1.125rem;
  height:     0.125rem;
  background: none;
}
.circle-arrow .circle .arrow::before {
  position:    absolute;
  content:     '';
  top:          -0.17rem;
  right:        0.0625rem;
  width:        0.325rem;
  height:       0.325rem;
  border-top:   0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform:    rotate(45deg);
}
.circle-arrow .circle-arrow-text {
  transition:     all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position:       absolute;
  top:            0;
  left:           0;
  right:          0;
  bottom:         0;
  padding:        0.75rem 0;
  margin:         0 0 0 1.25rem;
  color:          #282936;
  font-weight:    700;
  line-height:    0;
  text-align:     center;
  text-transform: uppercase;
}
.circle-arrow:hover .circle { width: 100%; }
.circle-arrow:hover .circle .arrow {
  background: #fff;
  transform:  translate(0.75rem, 0);
}
.circle-arrow:hover .circle-arrow-text { color: #fff; }



/*
 * Pop Ups
 */
 .popup { position: relative; }

.popup-click {
  cursor:           pointer;
  border:           1px solid #ddd;
  background-color: #efefef;
  border-radius:    2px;
  padding:          2px 4px !important;
  -moz-user-select:      none;
  -khtml-user-select:    none;
  -webkit-user-select:   none;
  -o-user-select:        none;
  -ms-user-select:       none;
  -webkit-touch-callout: none;
  user-select:           none;
}

.popup-click:hover {
  border-color: #bbb;
}

.popup-click:active {
  padding:          6px 7px 4px 9px;
  background-color: #ddd;
}

.popup .popup-div {
  display:            none;
  position:           absolute;
  width:              250px;
  top:                15px;
  right:              0;
  z-index:            10;
  border:             solid 1px #777;
  background-color:   #f0f8fe;
  font-size:          0.8em;
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
  text-align:         justify;
}

.popup .popup-div .popup-title {
  background-color: #efefef;
  line-height:      12px;
  font-weight:      bold;
  border-bottom:    solid 1px #777;
  margin-bottom:    1px;
}

.popup .popup-div .close {
  position: absolute;
  display:  block;
  top:      0;
  right:    0;
  cursor:   pointer;
}
/* end Pop Ups */

/*
 * Table Sort
 */
th.sort {
  cursor:              pointer;
  background-image:    url('/cmb-lib/cmb-templates/images/sort-lt.gif');
  background-repeat:   no-repeat;
  background-position: center left;
  padding-left:        20px !important;
  margin-left:         -1px !important;
}

th.tablesorter-headerAsc,
th.headerSortDown {
  background-image: url('/cmb-lib/cmb-templates/images/desc-lt.gif');
}

th.tablesorter-headerDesc,
th.headerSortUp {
  background-image: url('/cmb-lib/cmb-templates/images/asc-lt.gif');
}
/* end Table Sort */


/*
 * legacy CSS
 */
.rollover { position: relative; z-index: 0; }
.rollover:hover { z-index: 10; }
.rollover img { border: solid 1px #000; position: absolute; left: -50%; display: none; }
.rollover:hover img { display: inline; top: 1.25em; }

.totop { text-align: right; font-size: 0.8em; }

.totopfixed {
  position:    fixed;
  z-index:     -1;
  bottom:      5px;
  right:       43px;
  white-space: nowrap;
  font-size:   0.8em;
}

.msg { color: #f00; margin: 0; font-size: 0.8em; }

.wrap { white-space: normal; }
.nowrap { white-space: nowrap; }

.warn { color: #f00; text-align: center; }

.note { font-size: 0.8em !important; }

.center { text-align: center; }

.img {
  margin:     0.5em;
  font-size:  0.8em;
  text-align: center;
}

li.nobullet {
  list-style:  none;
  margin-left: 0 !important;
}

.dyk {
  width:              300px;
  float:              right;
  margin-left:        1em;
  padding:            0.5em;
  border:             solid 2px #000;
  border-radius:      3px;
  background-color:   #eee;
  text-align:         center;
  -webkit-box-shadow: 3px 3px 2px 0 rgba(0, 0, 0, 0.4);
     -moz-box-shadow: 3px 3px 2px 0 rgba(0, 0, 0, 0.4);
          box-shadow: 3px 3px 2px 0 rgba(0, 0, 0, 0.4);
}

.dyk h4 { font-style: italic; }

.dyk h5 { text-align: center; }

.dyk p { text-align: justify; }

.fl,
.fr,
.fn {
  text-align: center;
}

.fl { float: left;  margin: 0 0.75em 0.5em 0; }
.fr { float: right; margin: 0 0 0.5em 0.75em; }
.fn { float: none;  margin: 0.5em auto; }

.instructions { font-style:italic; text-align: center; font-size: 0.8em !important; }

div#container address {
  padding-left: 2em;
  margin:       1em 0;
  font-size:    0.9em;
}

ul.references { padding: 0 !important; margin-left: 2em !important; }

ul.references li {
  list-style-type: none !important;
  margin:          0.5em 0 !important;
  padding:         0 !important;
  text-indent:    -2em;
}

ul.quicklinks {
  text-align: center;
  margin:     0.5em 0 !important;
  padding:    0 !important;
  font-size:  0.9em;
}

ul.quicklinks li {
  display:         inline;
  border-right:    solid 1px #000;
  margin:          0 !important;
  padding:         0 0.4em !important;
  list-style-type: none;
}

ul.quicklinks li:last-child { border: 0; }

.bb { padding-bottom: 0.5em; border-bottom: solid 1px #000; }
