/*

#e6ffe6 light green -- #cdffcd, #b3ffb3, #9aff9a
#B5D3E7 light Blue -- #7bb1d4, #8ebcdb, #a2c8e1  -xx-  #c8deed, #dceaf3, #eff5fa
#ffffe0 light yellow 
#ffe6e6 light red

#009B69 St Patricks Day Green Background

#008dd2 fyz blue
#3a9855 logo green
#fc7555 logo orange
#555555 logo gray
*/
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
@import url("https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,900");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700");
/* GLOBAL STYLES
-------------------------------------------------- */
html, body {
  height: 100%;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  padding-bottom: 20px;
  color: #222222;
}
/* --------------------------------------------------
Main Page
1. Navigation Area
2. Image Carousel Slider Area
3. Jumbotron Area
4. Marketing Message Area
5. Quotes Area
6. Featurettes Area
7. Cards Area
8. Footer Area

SubPage
1. About
2. Resources
3. Charts
4. Blog
-------------------------------------------------- */
/* Customize the Navigation Area
-------------------------------------------------- */
/* ========== Table ========== */
table {
  width: 100%;
}
table, th, td {
  border: 1px solid #555;
  border-collapse: collapse;
}
th, td, span {
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  line-height: 24px;
  color: #7c8d93;
  text-align: center;
}
th {
  background-color: #777;
  color:#eee;
}
td {
  padding: 5px 15px;
}
td.hide {
    border: none;
}
.th_sticky {
  text-align: center;
  padding: 8px;
  color: #FFFFFF;
  background-color: #2c2b6c;
  border: 1px solid #aaaaaa;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 2px solid #EB9486;
}
.table_size_frame {
  height: auto;
  display: block;
  overflow-y: auto
}
/* ========== General ========== */
h2 {
  font-family: "Roboto", sans-serif;
  font-size: 32px; /* Changes the text size */
  color: #2c3e50; /* Changes the text color */
  text-align: center; /* Centers the heading */
  margin-top: 0px; /* Adds space above the heading */
  margin-bottom: 0px; /* Adds space below the heading */
  padding-bottom: 0px; /* Space between text and underline */
}
h3 {
  font-size: 24px; /* Changes the font size */
  color: #2c3e50; /* Changes the text color */
  text-align: center; /* Centers the heading */
  font-weight: 600; /* Controls the boldness */
  margin-bottom: 0px; /* Adds space below the heading */
}
span {
  display: block;
}
.left {
  text-align: left;
}
.right {
  text-align: right;
}
.center {
  text-align: center;
}
.textcenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
.main_menu_area {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  z-index: 30;
  padding: 0px 0px;
}
.main_menu_area .navbar {
  height: 70px;
  padding: .8rem;
  border-radius: 0px;
  border-bottom: 1px solid #aaaaaa;
  box-shadow: 0px 2px 5px grey;
  background-color: #ffffff;
}
.main_menu_area .navbar .navbar-toggler {
  border: none;
  border-radius: 0px;
  padding: 0px;
}
.main_menu_area .navbar .navbar-toggler span {
  height: 3px;
  width: 25px;
  display: block;
  background: #0b1033;
  margin-bottom: 3px;
}
.main_menu_area .navbar .navbar-toggler span:last-child {
  margin-bottom: 0px;
}
.navbar-brand {
  padding-left: 60px;
}
.main_menu_area .navbar .navbar-nav {
  display: inline-block;
  text-align: right;
  padding-right: 60px;
}
.main_menu_area .navbar .navbar-nav li {
  display: inline-block;
  margin-right: 35px;
}
.main_menu_area .navbar .navbar-nav li a {
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  color: #888888;
  letter-spacing: .65px;
  padding: 0px;
  line-height: 90px;
  -webkit-transition: all 400ms linear 0s;
  -o-transition: all 400ms linear 0s;
  transition: all 400ms linear 0s;
}
.main_menu_area .navbar .navbar-nav li:hover a {
  color: #97ccfe;
}
.main_menu_area .navbar .navbar-nav li.active a {
  color: #fc7555;
}
.main_menu_area .navbar .navbar-nav li:last-child {
  margin-right: 0px;
}
.nopaddingmargin {
  padding: 0px;
  margin: 0px;
}
/* ========== Links ========== */
a {
  color: #008dd2;
  text-decoration: none;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 14px;
}
a:hover {
  color: #FF9900;
  text-decoration: underline;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 14px;
}
a.main_page {
  color: #008dd2;
  text-decoration: none;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 22px;
  line-height: 36px;
}
a.main_page:hover {
  color: #FF9900;
  text-decoration: underline;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 22px;
  line-height: 36px;
}
a.list {
  color: #008dd2;
  font-family: "Roboto", sans-serif;
  font-size: 8px;
}
a.list:hover, a.list_active {
  color: #FF9900;
  text-decoration: underline;
  font-family: "Roboto", sans-serif;
  font-size: 8px;
}
/* Customize the Jumbotron Area
-------------------------------------------------- */
.jumbotron {
  padding: 25px;
  border-radius: 0px;
  border-top: 3px solid #fc7555;
  border-bottom: 3px solid #fc7555;
}
/* Customize password eye
-------------------------------------------------- */
.password-container {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 300px;
}
.password-container input {
  width: 100%;
  padding: 10px 40px 10px 10px;
  padding-right: 40px; /* Leave space so text doesn't overlap the icon */
  box-sizing: border-box;
}
.eye-icon {
  z-index: 10 0;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #666;
  user-select: none; /* Prevents text selection highlighting */
}
/* Hide default browser reveal buttons */
input::-ms-reveal, input::-ms-clear {
  display: none;
}
/* Customize data bubble
-------------------------------------------------- */
.data_bubble {
  width: 166px;
  display: inline-block;
  margin: 0px 10px 0px 0px;
  padding: 8px;
  border: 2px solid #4CAF50;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  background-color: #ffffff;
}
.data_bubble:hover {
  width: 166px;
  display: inline-block;
  margin: 0px 10px 0px 0px;
  padding: 8px;
  border: 2px solid #ccc;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  background-color: #e6ffe6;
}
.data_bubble_active {
  width: 166px;
  display: inline-block;
  margin: 0px 10px 0px 0px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #e6ffe6;
}
.data_bubble_active:hover {
  width: 166px;
  display: inline-block;
  margin: 0px 10px 0px 0px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #ffe6e6;
}
/* Customize the message area
-------------------------------------------------- */
.success {
  color: #31B806;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  text-align: center;
}
.error {
  color: #FA0105;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  text-align: center;
}
.message_center {
  color: #ccc;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  text-align: center;
}
.input_error {
  box-shadow: 0 0 5px red;
}
.form_success {
  color: green;
}
.form_error {
  color: red;
}
.signup_container {
  margin: 10px auto 0px auto;
  padding: 10px 50px 10px 50px;
  width: 50%;
  height: auto;
  border: solid 1px #706F6F;
  background-color: #eeeeee;
  border-radius: 30px;
}
/* Customize the input & buttons
-------------------------------------------------- */
.input_text, select, option {
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
  font-size: 12px;
  color: #555555;
}
input[type=text], input[type=password], input[type=date], select, option {
  display: inline-block;
  border: 1px solid #ccc;
  margin: 0px 0;
  font-size: 12px;
}
.btn-primary {
  background-color: #6648b1;
  border: 1px solid #6648b1;
}
.btn-primary:hover {
  background-color: #563d7c;
  border: 1px solid #563d7c;
}
.btn-bd-primary, .btn-bd-primary:focus, .btn-bd-primary:active {
  font-weight: 600;
  color: #fff;
  background-color: #20b6ff;
  border-color: #008dd2;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
}
.btn-bd-primary:hover {
  font-weight: 600;
  color: #fff;
  background-color: #fc7555;
  border-color: #fc7555;
  text-decoration: none;
  font-family: "Roboto", "Source Sans Pro", Helvetica, sans-serif;
}
.form-control-sm {
  margin-bottom: 1rem; /* Adjust space below vertical inputs */
  margin-right: 0.5rem; /* Adjust space for horizontal inputs */
}
/* Customize the Footer Area
-------------------------------------------------- */
footer {
  background-color: #3f3f3f;
  color: #d5d5d5;
  padding-top: 1rem;
}
hr.light {
  border-top: 1px solid #d5d5d5;
  width: 75%;
  margin-top: .8rem;
  margin-botton: 1rem;
  text-align: center;
}
hr.light-100 {
  border-top: 1px solid #d5d5d5;
  width: 100%;
  margin-top: -2rem;
  margin-botton: 1rem;
}
footer a {
  color: #d5d5d5;
}
footer a:hover {
  color: #fff;
}
footer p {
  color: #d5d5d5;
  text-align: center;
  font-size: 12px;
  padding: 0 50px 20px 50px;
}
/* Slider
-------------------------------------------------- */
input[type=range] {
  -webkit-appearance: none;
  margin: 20px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  background: #03a000;
  border-radius: 25px;
}
input[type=range]::-webkit-slider-thumb {
  height: 40px;
  width: 10px;
  border-top-left-radius: 70%;
  border-top-right-radius: 70%;
  border-bottom-left-radius: 20%;
  border-bottom-right-radius: 20%;
  background: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 1);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #03a9f4;
}
.range-wrap {
  width: 95%;
  position: relative;
  align-items: center;
  justify-content: center;
  margin: auto;
  padding: 0px 0px 0px 0px;
}
.range-value {
  position: absolute;
  top: -50%;
}
.range-value span {
  width: 70px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #03a9f4;
  color: #fff;
  font-size: 14px;
  display: block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 5px;
  box-shadow: 3px 3px 10px #888888;
}
.range-value span:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid #03a9f4;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  margin-top: -1px;
}
@media (max-width: 830px) {
  .form-inline {
    flex-direction: column;
    align-items: stretch;
  }
}
.slidercontainer {
  width: auto;
  padding: 10px;
  margin: 0px;
  background-color: #ecf5fb;
  position: relative;
}
.slidertitle {
  width: 100%;
  padding: 5px;
  margin: 0px;
  background-color: #058dd2;
  color: #dddddd;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
}
.slidertitle2 {
  float: right;
  padding: 0px;
  margin: 0px;
  background-color: #058dd2;
  color: #dddddd;
  font-weight: bold;
  font-family: "Roboto", sans-serif;
  font-size: 30px;
}
.sliderbox {
  background-color: #ffffff;
}
.slidertitlewords {
  color: #ecf5fb;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
}
/* Customize the WELCOME CONTENT
-------------------------------------------------- */
.padding {
  padding-bottom: 2rem;
}
.welcome {
  width: 75%;
  margin: 0 auto;
  padding-top: 2rem;
}
.welcome hr {
  border-top: 2px solid #b4b4b4;
  width: 95%;
  margin-top: .3 rem;
  margin-bottom: 1rem;
}
.fa-code {
  color: #e54d26;
}
.fa-bold {
  color: #563d7c;
}
.fa-css3 {
  color: #2163af;
}
.fa-code, .fa-bold, .fa-css3 {
  font-size: 4em;
  margin: 1rem;
}
/* SUBPAGE CONTAINER STYLE ITEMS
-------------------------------------------------- */
.subpage_container {
  margin-top: 100px;
  margin-bottom: 0px;
}
/* Customize the SLIDER CONTENT
-------------------------------------------------- */
.slidecontainer {
  width: 100%;
}
.slider {
  -webkit-appearance: none;
  width: 70%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.slider:hover {
  opacity: 1;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
/* End Slider Area css
-------------------------------------------------- */