/***** Bootstrap overrides and resets *****/
.card-img-overlay-custom{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0;
}
.card-body-custom{
  flex: 1 1 auto;
}
.card-footer-clear{
  padding: 0.5rem 1rem;
  /*background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.125);*/
}
.card-footer-white{
  padding: 0.5rem 1rem;
  background-color: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}
.card-img-reset{
  width: 100%;
}
.card-img-left{
  width: 100%;
  border-top-left-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}
.card-img-right{
  width: 100%;
  border-top-right-radius: calc(0.25rem - 1px);
  border-bottom-right-radius: calc(0.25rem - 1px);
}
.card-img-topright{
  width: 100%;
  border-top-right-radius: calc(0.25rem - 1px);
}
.card-img-bottomright{
  width: 100%;
  border-bottom-right-radius: calc(0.25rem - 1px);
}
.card-img-topleft{
  width: 100%;
  border-top-left-radius: calc(0.25rem - 1px);
}
.card-img-bottomleft{
  width: 100%;
  border-bottom-left-radius: calc(0.25rem - 1px);
}

.card-width{
	width: 13rem;
}

.card-ep-width{
	width: 20rem;
}

.space-reset{
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
}

.space-h-reset{
  margin-left: 0px;
  margin-right: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.space-v-reset{
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.margin-reset{
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
}

.padding-reset{
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
}


/***** Styles to create footer that can be pushed down *****/
html, body{
  margin:0;
  padding:0;
  height:100%;
  /* padding-top needs a value if a fixed top menu is displayed. Set the px value to the height of the menu*/
  padding-top: 0px;
}

@media (max-width: 720px){
	html, body{
	  margin:0;
	  padding:0;
	  height:100%;
  	  /* padding-top needs a value if a fixed top menu is displayed. Set the px value to the height of the menu*/
	  padding-top: 0px;
	}
	
}
.body{
  padding:5px;
  padding-bottom:30px;
}
.wrapper {
  min-height:100%;
  margin-bottom: -60px;  /* Minus the height of footer*/
}
.push {
  height:60px;   /* Height of the footer */
}
.footer {
  height:60px;   /* Height of the footer */
  background:#676767;
  text-align: center;
  justify-content: center;
  align-items:center;
  display:flex;
}

/* Resets any styling for the links (anchor tags) */
.reset-a, .reset-a:hover, .reset-a:visited, .reset-a:focus, .reset-a:active  {
  text-decoration: none;
  color: inherit;
  outline: 0;
  cursor: pointer;
}

/***** Rounded objects/images *****/
.round-img-sm{
  display: block;
  width: 110px;
  border-radius: 50%;
}

.round-img-md{
  width: 250px;
  border-radius: 50%;
}

.round-img-lg{
  width: 400px;
  border-radius: 50%;
}

/***** Border Styles *****/

.b-1{
	border: 1px solid black;
}
.b-1-white{
  border: 1px solid white;
}
.b-top-1{
	border-top: 1px solid black;
}

.b-bottom-1{
	border-bottom: 1px solid black;
}

.b-left-1{
	border-left: 1px solid black;
}

.b-right-1{
	border-right: 1px solid black;
}

@media (max-width: 720px){
	.card-width{
		width: 6rem;
	}
	.card-ep-width{
		width: 11rem;
	}
}

/***** Navigatior Bar related customizations - Require Bootstrap *****/

@media (min-width: 992px){
  
  .dropdown-menu .dropdown-toggle:after{
    border-top: .3em solid transparent;
      border-right: 0;
      border-bottom: .3em solid transparent;
      border-left: .3em solid;
  }

  .dropdown-menu .dropdown-menu{
    margin-left:0; margin-right: 0;
  }

  .dropdown-menu li{
    position: relative;
  }
  .nav-item .submenu{ 
    display: none;
    position: absolute;
    left:100%; top:-7px;
  }
  .nav-item .submenu-left{ 
    right:100%; left:auto;
  }

  .dropdown-menu > li:hover{ 
    background-color: #f1f1f1 
  }
  .dropdown-menu > li:hover > .submenu{
    display: block;
  }
}

/***** Sidebar Related Styles *****/

.sidebar {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100; /* Behind the navbar */
  padding: 10px 0 0; /* Top padding of navbar */
  box-shadow: -1px -1px 15px rgba(0, 0, 0, .5);
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
  }
}

.sidebar .nav-link {
  font-weight: 400;
  font-size: .85rem;
  color: #333;
}

.sidebar .nav-link .feather {
  margin-right: 4px;
  color: #999;
}

.sidebar .nav-link.active {
  color: #007bff;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
  color: inherit;
}

.sidebar-heading {
  font-size: .80rem;
  text-transform: uppercase;
}

/***** Shadow Styles *****/

.sh-0 {
    box-shadow:
      1px 1px 1px rgba(0, 0, 0, 0.18),
      2px 2px 2px rgba(0, 0, 0, 0.18),
      4px 4px 4px rgba(0, 0, 0, 0.18);
  }
.sh-1 {
    box-shadow:
      1px 1px 1px rgba(0, 0, 0, 0.15),
      2px 2px 2px rgba(0, 0, 0, 0.15),
      4px 4px 4px rgba(0, 0, 0, 0.15),
      8px 8px 8px rgba(0, 0, 0, 0.15);
  }

  .sh-2 {
    box-shadow:
      1px 1px 1px rgba(0, 0, 0, 0.12),
      2px 2px 2px rgba(0, 0, 0, 0.12),
      4px 4px 4px rgba(0, 0, 0, 0.12),
      8px 8px 8px rgba(0, 0, 0, 0.12),
      16px 16px 16px rgba(0, 0, 0, 0.12);
  }

  .sh-3 {
    box-shadow:
      1px 1px 1px rgba(0, 0, 0, 0.11),
      2px 2px 2px rgba(0, 0, 0, 0.11),
      4px 4px 4px rgba(0, 0, 0, 0.11),
      8px 8px 8px rgba(0, 0, 0, 0.11),
      16px 16px 16px rgba(0, 0, 0, 0.11),
      32px 32px 32px rgba(0, 0, 0, 0.11);
  }

  .sh-soft-0 {
    box-shadow:
      1px 1px 2px rgba(0, 0, 0, 0.05),
      2px 2px 4px rgba(0, 0, 0, 0.05),
      4px 4px 8px rgba(0, 0, 0, 0.05);
  }

  .sh-soft-1 {
    box-shadow:
      1px 1px 2px rgba(0, 0, 0, 0.07),
      2px 2px 4px rgba(0, 0, 0, 0.07),
      4px 4px 8px rgba(0, 0, 0, 0.07),
      8px 8px 16px rgba(0, 0, 0, 0.07),
      16px 16px 32px rgba(0, 0, 0, 0.07);
  }

  .sh-soft-2 {
    box-shadow:
      1px 1px 2px rgba(0, 0, 0, 0.07),
      2px 2px 4px rgba(0, 0, 0, 0.07),
      4px 4px 8px rgba(0, 0, 0, 0.07),
      8px 8px 16px rgba(0, 0, 0, 0.07),
      16px 16px 32px rgba(0, 0, 0, 0.07),
      32px 32px 64px rgba(0, 0, 0, 0.07);
  }

  .sh-soft-3 {
    box-shadow:
      1px 1px 2px rgba(0, 0, 0, 0.07),
      2px 2px 4px rgba(0, 0, 0, 0.07),
      4px 4px 8px rgba(0, 0, 0, 0.07),
      8px 8px 16px rgba(0, 0, 0, 0.07),
      16px 16px 32px rgba(0, 0, 0, 0.07),
      32px 32px 64px rgba(0, 0, 0, 0.07),
      64px 64px 96px rgba(0, 0, 0, 0.07);
  }
  
/* Opacity */

.opacity-1{
  opacity: 0.10;
}
.opacity-2{
  opacity: 0.20;
}
.opacity-3{
  opacity: 0.30;
}
.opacity-4{
  opacity: 0.40;
}
.opacity-5{
  opacity: 0.50;
}
.opacity-6{
  opacity: 0.60;
}
.opacity-7{
  opacity: 0.70;
}
.opacity-8{
  opacity: 0.80;
}
.opacity-9{
  opacity: 0.90;
}
.opacity-10{
  opacity: 1.00;
}

/* Basic colors */

.bg-white{
  background-color:#F0F0F0 !important;
}
.bg-blue{
  background-color:#243366 !important;
}
.bg-green{
  background-color:#2B5440 !important;
}
.bg-charcoal{
  background-color:#2E2E2E !important;
}
.bg-purple{
  background-color:#3C2F4F !important;
}
.bg-orange{
  background-color:#9C6500 !important;
}
.bg-red{
  background-color:#910707 !important;
}
.bg-cyan{
  background-color:#046E6E !important;
}
.bg-khaki{
  background-color:#6D6E45 !important;
}
.bg-lightgray{
  background-color: #D0D0D0 !important;
}
.bg-gray{
  background-color: #A0A0A0 !important;
}
.bg-darkgray{
  background-color: #707070 !important;
}

.basic-blue{
  color: #206EC7 !important;
}  
.basic-green{
  color: #549050 !important;
}  
.basic-charcoal{
  color: #5E5E5E !important;
}  
.basic-purple{
  color: #6A518F !important;
}  
.basic-orange{
  color: #C28513 !important;
}  
.basic-red{
  color: #CC4343 !important;
}  
.basic-cyan{
  color: #098F8F !important;
}  
.basic-khaki{
  color: #93945A !important;
}  
.basic-white{
  color: #FFFFFF !important;
}
.basic-lightgray{
  color: #D0D0D0 !important;
}
.basic-gray{
  color: #A0A0A0 !important;
}
.basic-darkgray{
  color: #707070 !important;
}


.thead-custom{
  background-color:#001421;
  color:#FFFFFF
}
.title-custom{
  background-color:#002E4D;
  color:#FFFFFF
}

.menu-icon-gradient {
  background: -webkit-linear-gradient(#4f4450, #1ec1e3);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.menu-icon-size {
    font-weight: normal;
    font-size: 1.75rem;
}

@media (max-width: 720px){
	.menu-icon-size {
	    font-weight: normal;
	    font-size: 1.5rem;
	}
}

.menu-icon-size:hover {
	-webkit-text-stroke: 0.25px;
	background: -webkit-linear-gradient(#4f4450, #62cfde);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Navbar Theme - Aqua */

.navbar-aqua{
  background: rgb(2,0,36);
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 45%, rgba(0,212,255,1) 100%);     
}

/* Brand and Text color */
.navbar-aqua .navbar-brand,
.navbar-aqua .navbar-text {
    color: rgba(255,255,255,.8);
}

/* Link color */
.navbar-aqua .navbar-nav .nav-link {
    color: rgba(255,255,255,.7);
}

/* Active or Hovered link colors */
.navbar-aqua .nav-item.active .nav-link,
.navbar-aqua .nav-item:hover .nav-link {
    color: #ffffff;
}

/* Dropdown link hover colors */
.navbar-aqua .dropdown-menu li a:hover{
  color: #ffffff;
  background-color: rgba(0,212,255,1);
}

/* Navbar Theme - Tropical */

.navbar-tropical{
  background: rgb(2,0,36);
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,121,22,1) 45%, rgba(0,212,255,1) 100%);     
}

/* Brand and Text color */
.navbar-tropical .navbar-brand,
.navbar-tropical .navbar-text {
    color: rgba(255,255,255,.8);
}

/* Link color */
.navbar-tropical .navbar-nav .nav-link {
    color: rgba(255,255,255,.7);
}

/* Active or Hovered link colors */
.navbar-tropical .nav-item.active .nav-link,
.navbar-tropical .nav-item:hover .nav-link {
    color: #ffffff;
}

/* Dropdown link hover colors */
.navbar-tropical .dropdown-menu a:hover{
  color: #ffffff;
  background-color: rgba(18,186,110,1);
}

/* Navbar Theme - Lavender */

.navbar-lavender{
  background: rgb(10,10,116);
  background: linear-gradient(90deg, rgba(10,10,116,1) 0%, rgba(59,53,177,1) 45%, rgba(158,30,255,1) 100%);     
}

/* Brand and Text color */
.navbar-lavender .navbar-brand,
.navbar-lavender .navbar-text {
    color: rgba(255,255,255,.8);
}

/* Link color */
.navbar-lavender .navbar-nav .nav-link {
    color: rgba(255,255,255,.7);
}

/* Active or Hovered link colors */
.navbar-lavender .nav-item.active .nav-link,
.navbar-lavender .nav-item:hover .nav-link {
    color: #ffffff;
}

/* Dropdown link hover colors */
.navbar-lavender .dropdown-menu a:hover{
  color: #ffffff;
  background-color: rgba(105,57,247,.7);
}

/* Navbar Theme - Gray */

.navbar-gray{
  background: rgb(225,225,225);
  background: linear-gradient(90deg, rgba(225,225,225,1) 0%, rgba(245,245,245,1) 65%, rgba(194, 234, 240,1) 100%);     
}

/* Brand and Text color */
.navbar-gray .navbar-brand,
.navbar-gray .navbar-text {
    color: rgba(255,255,255,.8);
}

/* Link color */
.navbar-gray .navbar-nav .nav-link {
    color: rgba(79, 68, 80,.7);
}

/* Active or Hovered link colors */
.navbar-gray .nav-item.active .nav-link,
.navbar-gray .nav-item:hover .nav-link {
    color: #4F4450;
}

/* Dropdown link hover colors */
.navbar-gray .dropdown-menu a:hover{
  color: #4F4450;
  background-color: rgba(145,190,196,.7);
}

/* Button styles */

.vbtn-icon {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-family: ;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.5;
  --bs-btn-border-width: var(--bs-border-width);
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: #696D7D;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: transparent;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.vbtn-icon:hover {
  color: #004BA8;
  background-color: transparent;
}

.vbtn-icon:disabled, .vbtn-icon.disabled {
  color: #9E9E9E;
  pointer-events: none;
  background-color: transparent;
  border-color: var(--bs-btn-border-color);
  opacity: var(--bs-btn-disabled-opacity);
}

.vbtn-toolbar {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-family: ;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.5;
  --bs-btn-border-width: var(--bs-border-width);
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: #696D7D;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: transparent;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.vbtn-toolbar:hover {
  color: #4F4450;
  background-color: transparent;
}

.vbtn-toolbar:disabled, .vbtn-toolbar.disabled {
  color: #9E9E9E;
  pointer-events: none;
  background-color: transparent;
  border-color: var(--bs-btn-border-color);
  opacity: var(--bs-btn-disabled-opacity);
}

.vbtn-outline {
  --bs-btn-color: #004BA8;
  --bs-btn-border-color: #004BA8;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #004BA8;
  --bs-btn-hover-border-color: #004BA8;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #004BA8;
  --bs-btn-active-border-color: #004BA8;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #004BA8;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #004BA8;
  --bs-gradient: none;
}

/* Topic Section Styles */

.section-normal {
    font-weight: 100;
    font-size: 1.0rem;
	color: #4a4a4a !important;
}

@media (max-width: 720px){
	.section-normal {
	    font-weight: 100;
	    font-size: 0.90rem;
		color: #4a4a4a !important;
	}
}

.section-info {
    font-weight: 100;
    font-size: 1.0rem;
	color: #4a4a4a !important;
	background: #E1EFF8 !important;
	border-left: 6px solid #D1D1D1;
	padding-left: 12px;
	
}

@media (max-width: 720px){
	.section-info {
	    font-weight: 100;
	    font-size: 0.90rem;
		color: #4a4a4a !important;
		background: #E1EFF8 !important;
		border-left: 6px solid #D1D1D1;
		padding-left: 12px;
	}
}

.section-warn {
    font-weight: 100;
    font-size: 1.0rem;
	color: #4a4a4a !important;
	background: #F5EFD5 !important;
	border-left: 6px solid #CFC69D;
	padding-left: 12px;
	
}

@media (max-width: 720px){
	.section-warn {
	    font-weight: 100;
	    font-size: 0.90rem;
		color: #4a4a4a !important;
		background: #F5EFD5 !important;
		border-left: 6px solid #CFC69D;
		padding-left: 12px;
	}
}

.section-code {
    font-weight: 100;
    font-size: 1.0rem;
    font-style: italic;
	color: #4a4a4a !important;
	background: #F5F5FC !important;
}

@media (max-width: 720px){
	.section-code {
	    font-weight: 100;
	    font-size: 0.90rem;
    	font-style: italic;
		color: #4a4a4a !important;
		background: #F5F5FC !important;
	}
}

.section-h1 {
    font-weight: 400;
    font-size: 1.65rem;
	color: #4a4a4a !important;
}

@media (max-width: 720px){
	.section-h1 {
	    font-weight: 400;
	    font-size: 1.45rem;
		color: #4a4a4a !important;
	}
}

.section-h2 {
    font-weight: 400;
    font-size: 1.35rem;
	color: #6A6A6A !important;
}

@media (max-width: 720px){
	.section-h2 {
	    font-weight: 400;
	    font-size: 1.15rem;
		color: #6A6A6A !important;
	}
}

.section-h3 {
    font-weight: 400;
    font-size: 1.15rem;
	color: #6A6A6A !important;
}

@media (max-width: 720px){
	.section-h3 {
	    font-weight: 400;
	    font-size: 1.05rem;
		color: #6A6A6A !important;
	}
}

#copyBtn:hover{
	text-shadow: 4px 4px 4px #BDBDBD;
}

#pasteBtn:hover{
	text-shadow: 4px 4px 4px #BDBDBD;
}

#refreshBtn:hover{
	text-shadow: 4px 4px 4px #BDBDBD;
}

#deleteBtn:hover{
	text-shadow: 4px 4px 4px #BDBDBD;
}

#clickable:hover{
	text-shadow: 4px 4px 4px #BDBDBD;
}

.emboss-toolbar {
	width: 99.5%;
	padding: 2px;
	border-radius: 5px;
	display: block;
	background: #EDEDED;
	color: #696D7D;
  	box-shadow:
    inset 1px 1px 2px 0px rgba(255, 255, 255, 0.8),
    inset -1px -1px 2px 0px rgba(0, 0, 0, 0.5);
}

.emboss-effect {
  border: 0px none rgba(100, 100, 100, 0);
  border-radius: 5px;
  background: rgb(224, 224, 224);
  box-shadow:
    inset 1px 1px 2px 0px rgba(255, 255, 255, 0.8),
    inset -1px -1px 2px 0px rgba(0, 0, 0, 0.5);
}

.emboss-effect2 {
  border: 1px none rgba(0, 0, 0, 1);
  border-radius: 7px;
  background: rgb(225, 225, 225);
  box-shadow:
    inset 2px 2px 3px 0px rgba(255, 255, 255, 1),
    inset -2px -2px 3px 0px rgba(0, 0, 0, 0.5);
}

.emboss-effect-classic {
  border: 1px solid rgba(0, 0, 0, 1);
  border-radius: 7px;
  background: rgb(225, 225, 225);
  box-shadow:
    inset 3px 3px 5px 0px rgba(255, 255, 255, 1),
    inset -3px -3px 5px 0px rgba(0, 0, 0, 0.5);
}