.btn-hotpink{
		color: #fff;
		background-color: #ff69b4;
		border-color: #33001a
	}
	.btn-purple{
		color: #fff;
		background-color: #8400ff;
		border-color: #000000
	}
	.btn-coco{
		color: #fff;
		background-color: #D2691E;
		border-color: #000000
	}
	.btn-red{
		color: #fff;
		background-color: red;
		border-color: #000000
	}
	.btn-darkgreen{
		color: #fff;
		background-color: darkgreen;
		border-color: #000000
	}
	.btn-darkcyan{
		color: #fff;
		background-color: darkcyan;
		border-color: #000000
	}
	#printButton{
		z-index:500000;
		position:fixed;
		left:5%;
		bottom:33%;
		border:2px solid #000;
	}
	#printButtonTwo{
		z-index:500000;
		position:fixed;
		left:5%;
		bottom:39%;
		border:2px solid #000;
	}
	.red{
		background-color:red !important;
		font-weight:bold;
		font-size:larger;
	}
.alert, h2, h2 a, p, .btn{
	word-break:break-word;
	overflow-wrap: break-word;
	hyphens: auto;
	white-space: pre-line; /* or pre-wrap */
}
#chat-container {
    position: fixed;
    bottom: 75px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
	z-index:50000000;
}

#chat-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    border: none;
    border-radius: 8px;
}

#chat-box-container {
    display: none;
    width: 350px;
    height: 500px; /* Adjust the height as needed */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

#chat-box {
    width: 100%;
    height: 100%;
}

.fixToBottom{
	position:fixed;
	bottom:100px;
	left:0;
}

 body.dark-mode {
    background-color: #111;
    color: #fff;
}

body.dark-mode a {
    color: #666;
}

body.dark-mode .btn-success {
	color:000;
}
body.dark-mode .label-default,body.dark-mode .label-success, body.dark-mode .label-warning, body.dark-mode .label-danger, body.dark-mode .label-primary, body.dark-mode .label-info {
	padding-top:15px;
}
body.dark-mode .btn-default {
    color: #000;
    background-color: #eee;
    border-color: #ccc;
}

body.dark-mode .btn-primary,  body.dark-mode td, body.dark-mode ol li, body.dark-mode th, body.dark-mode .list-group,  body.dark-mode p,  body.dark-mode h1,  body.dark-mode h2,  body.dark-mode h3,  body.dark-mode h4,  body.dark-mode h5{
    color: #fff;
    background-color: #111;
    border-color: #eee;
}
  .dropdown-menu{
    max-height: 400px !important; /* Adjust this value as needed */
  }

  body {
    font: 400 15px Lato, sans-serif;
    line-height: 1.8;
    color: #818181;
  }
  .form-group-lg .bootstrap-select.btn-group.form-control, .form-group-sm .bootstrap-select.btn-group.form-control{
	  z-index:auto;
  }
  .panminheight{
	  min-height:474px;
  }
  
  .entryposts{
	    display: flex;
		flex-wrap: wrap;
	   
  }
  .posts{
	    flex: 0 0 33.333333%;
  }
  p, li, h1, h2, h3, h4, h5, h6, td, th{
	  color:#000000;
  }
  p{
	font-size:larger;

  }
  .bankentires{
	  background:lightGreen;
  }
  .groupchat{
	  background:lightBlue;
  }
  .equipmentsearch{
	  background:lightcoral;
  }
  .house{
	background-image:url("images/house.png");
	background-repeat: no-repeat, repeat;
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
  }
  .blackout{
	  position:fixed;
	  height:100%;
	  width:100%;
	  background:red;
	  z-index:100000000;
	  top:0;
	  left:0;
  }
  #displaychat{
	height: 300px;
    overflow: auto;
    scroll-behavior: auto;
  }
 .loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
  
#touser{
	  display:block;
	  position:relative;
	  z-index:50000;
  }
  
  .border{
	  border:solid 1px #000000;
  }
  
.panel-heading.note-toolbar{
	  z-index:1;
  }
  
  .note-editor.note-frame.fullscreen{
	margin-top:55px;
	margin-bottom:55px;
}
  .well{
	  position:relative;
	  z-index:5 !important;

  }
 #display, #displayhere{
	 position:fixed; 
	 top:10%; 
	 z-index:5;
	 }
.padtop{
	padding-top:5%;
}
  h2 {
    font-size: 24px;
    text-transform: uppercase;
    color: #303030;
    font-weight: 600;
    margin-bottom: 30px;
  }
  h4 {
    font-size: 19px;
    line-height: 1.375em;
    color: #303030;
    font-weight: 400;
    margin-bottom: 30px;
  }  
  .jumbotron {
background: rgb(9,9,121);
background: linear-gradient(90deg, rgba(9,9,121,1) 10%, rgba(16,2,247,1) 20%, rgba(16,2,247,1) 80%, rgba(9,9,121,1) 90%);
    color: #fff;
    padding: 100px 25px;
    font-family: Montserrat, sans-serif;
  }
  .container-fluid {
    padding: 60px 50px;
  }
  .bg-grey {
    background-color: #f6f6f6;
  }
  .logo-small {
    color: #228B22;
    font-size: 50px;
  }
  .logo {
    color: #228B22;
    font-size: 200px;
  }
  .thumbnail {
    padding: 0 0 15px 0;
    border: none;
    border-radius: 0;
  }
  .thumbnail img {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
  }
  .carousel-control.right, .carousel-control.left {
    background-image: none;
    color: #00FFFF;
  }
  .carousel-indicators li {
    border-color: #00FFFF;
  }
  .carousel-indicators li.active {
    background-color: #00FFFF;
  }
  .item h4 {
    font-size: 19px;
    line-height: 1.375em;
    font-weight: 400;
    font-style: italic;
    margin: 70px 0;
  }
  .item span {
    font-style: normal;
  }
  .panel {
    border: 1px solid #00FFFF; 
    border-radius:0 !important;
    transition: box-shadow 0.5s;
  }
  .panel:hover {
    box-shadow: 5px 0px 40px rgba(0,0,0, .2);
  }
  .panel-footer .btn:hover {

  }
  .panel-heading {

  }
  .panel-footer {

  }
  .panel-footer h3 {
    font-size: 32px;
  }
  .panel-footer h4 {
    color: #aaa;
    font-size: 14px;
  }
  .panel-footer .btn {
    margin: 15px 0;
    color: #fff;
  }
  .modal.in .modal-dialog{
	  margin-top:5%;
  }
  .navbar {
    margin-bottom: 0;
background: rgb(9,9,121);
background: linear-gradient(90deg, rgba(9,9,121,1) 10%, rgba(16,2,247,1) 20%, rgba(16,2,247,1) 80%, rgba(9,9,121,1) 90%);
    z-index: 9999;
    border: 0;
    font-size: 12px !important;
    line-height: 1.42857143 !important;
    letter-spacing: 4px;
    border-radius: 0;
    font-family: Montserrat, sans-serif;
	z-index:500000;
  }
  .navbar li a, .navbar .navbar-brand {
    color: #fff !important;
  }
  .navbar-nav li a:hover, .navbar-nav li.active a {
    color: #00FFFF !important;
    background-color: #fff !important;
  }
  .navbar-default .navbar-toggle {
    border-color: transparent;
    color: #fff !important;
  }
.routealert{
	display: block;
	position: fixed;
	bottom: 15%;
	left: 0;
	z-index: 5000;
	background-color:red;
	border-radius:15px;
	color:#ffffff;
	font-weight:bold;
	padding:15px;
}
.routeform {
      display: block; /* Assuming it's initially visible */
    }
  .highlighted {
    background-color: yellow;
}
  footer .glyphicon {
    font-size: 20px;
    margin-bottom: 20px;
    color: #00FFFF;
  }
  .white{
	  color:#ffffff;
  }
  .greybackground{
	  background:#333333;
  }
  .greybackground:hover{
	  background:#666666;
	  color:#ffffff;
  }
  .negative {
  color: red;
  font-weight: bold;
}

.positive {
  color: green;
  font-weight: bold;
}
  .dropshadow{
	  text-shadow:4px 4px 4px #000000;
  }
  .alignbottom{
	  position:absolute;
	  bottom:30px;
	  left:0;
  }
  .slideanim {visibility:hidden;}
  .slide {
    animation-name: slide;
    -webkit-animation-name: slide;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
  }
  @keyframes slide {
    0% {
      opacity: 0;
      transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  @-webkit-keyframes slide {
    0% {
      opacity: 0;
      -webkit-transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      -webkit-transform: translateY(0%);
    }
  }
  @media screen and (max-width: 768px) {
    .col-sm-4 {
      text-align: center;
      margin: 25px 0;
    }
    .btn-lg {
      width: 100%;
      margin-bottom: 35px;
    }
  }
  @media screen and (max-width: 480px) {
	  .padtop{
	padding-top:25%;
}
    .logo {
      font-size: 150px;
    }

  }
  
  @media (max-width: 767px) {
  body {
    font-size: 18px; /* Increase the base font size for mobile */
  }
    .posts{
	    flex: 0 0 100%;
  }
    .navbar {
    font-size: 20px; /* Increase the font size of the navigation menu for mobile */
    padding-top: 20px; /* Increase the top padding of the navigation menu for mobile */
    padding-bottom: 20px; /* Increase the bottom padding of the navigation menu for mobile */
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: 150%; /* Increase the heading font size for mobile */
  }

  .btn {
    padding: 10px 20px; /* Increase button padding for mobile */
    font-size: 16px; /* Increase button font size for mobile */
  }

  .my-element {
    padding: 20px; /* Increase element padding for mobile */
    margin: 10px; /* Increase element margin for mobile */
  }
}