* body {
  font-family: Roboto;
/*   font-style: normal; */
/*   font-weight: normal; */
/*   font-size: 24px; */
/*   line-height: 28px; */
  font-weight: inherit !important;
  line-height: inherit !important;
}

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

h1, h2, h3, h4, h5, h6{
  font-weight: bold;
  font-family: "Roboto", sans-serif;
}

.refont{
  font-family: "Roboto", sans-serif;
}

/* FOR SHADOWS IN */
.enshadowed{
	-webkit-box-shadow: 7px 5px 5px -3px rgba(92,92,92,0.4), 0px 5px 10px rgba(92,92,92,0.6), -7px 5px 5px -3px rgba(92,92,92,0.4);  /* Safari , iOS 5- */
	-moz-box-shadow: 7px 5px 5px -3px rgba(92,92,92,0.4), 0px 5px 10px rgba(92,92,92,0.6), -7px 5px 5px -3px rgba(92,92,92,0.4);     /* Firefox 3.5 */
	box-shadow: 7px 5px 5px -3px rgba(92,92,92,0.4), 0px 5px 10px rgba(92,92,92,0.6), -7px 5px 5px -3px rgba(92,92,92,0.4);          /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.enshadowed-rounded{
	-webkit-box-shadow: 7px 5px 5px -3px rgba(92,92,92,0.4), 0px 5px 10px rgba(92,92,92,0.6), -7px 5px 5px -3px rgba(92,92,92,0.4);  /* Safari , iOS 5- */
	-moz-box-shadow: 7px 5px 5px -3px rgba(92,92,92,0.4), 0px 5px 10px rgba(92,92,92,0.6), -7px 5px 5px -3px rgba(92,92,92,0.4);     /* Firefox 3.5 */
	box-shadow: 7px 5px 5px -3px rgba(92,92,92,0.4), 0px 5px 10px rgba(92,92,92,0.6), -7px 5px 5px -3px rgba(92,92,92,0.4);          /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.rn{
	border-radius: 25px;
}


/* BUTTONS */

.btn{
  border-radius: 25px;
  cursor: pointer;
}

.btn:hover {
   border-color: green;
}

.btn:focus,.btn:active {
   outline: none;/* !important;*/
   box-shadow: none;
}

.scroll-pulse {
  color: white;
  background-color: orange;
  border-color: orange;
  box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
  animation: pulse-green 1s infinite;
}

.btn-scroll {
  color: white;
  background-color: orange;
  border-color: orange;
}

.btn-scroll:hover {
  color: white;
  background-color: orange;
  border-color: orange;
}

#menu-button{
  background-color: white;
  height:100%;
  width:100%;
}

#menu-btn{
  background-color: white;
  min-width:200px;

}

#stand-out{
  background-color: white;
  height:100%;
  width:100%;
  margin: 0% 0%;
  padding: 10%;
}

.chk{
	background-color: green;
	border: 1px solid green;
	border-radius: 3px;
}
.exit-btn-modal{
  background-color:red;
}

.border-right{
  border-right: 1px solid orange !important;
}

/* LINES */
hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

.progress-bar-div{
  display: table-cell;
  height: 150px;
  text-align: center;
  width: 150px;
  vertical-align: middle;
  padding:10px;
}

.progress-bar-img{
  height: auto;
  width: auto;
}

.form-control
{
  /* center form controls */
  display: inline-block;
  border-radius: 15px;

  /* override Bootstrap's 100% width for form controls */
/*   width: auto; */
  border: 3px solid orange;
/*   border-color:orange; */
}

.green-text
{
  color: green;
}
.red-text
{
  color: red;
}

.container-overlay {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.overlay-icon {
  opacity: 0.5;
  color: black;
  font-size: 3em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

#scrollBtn {
/*   display: none; /* Hidden by default */ */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border-radius: 10px; /* Rounded corners */
}

#modalScrollBtn {
/*   display: none; /* Hidden by default */ */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border-radius: 10px; /* Rounded corners */
}

/* POSSIBLE BUTTON EFFECTS */

.pulse {
  animation: pulse 1s 1s forwards;
}

.jump {
  animation: jump 1s 2s forwards cubic-bezier(.84,-0.54,.31,1.19);
}

.waggle {
  animation: waggle 1s 3s forwards ease-out;
}

.sheen {
  position: relative;
  overflow: hidden;
}

.sheen:after {
  animation: sheen 1s 4s forwards;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5) 50%, transparent);
  transform: rotateZ(60deg) translate(-1em, 4em);
}

.spin {
  animation: spin 1.5s 5s forwards cubic-bezier(.56,-0.35,.22,1.5);
}

.fade {
  animation: fade 1s 6.5s forwards;
}

@keyframes pulse {
  0% {
    background-color: orange;
  }
  25% {
    background-color: red;
  }
  50 {
    background-color: orange;
  }
  75% {
    background-color: red;
  }
}

@keyframes jump {
  0% {
    transform: none;
  }
  50% {
    transform: translateY(-2em);
  }
}

@keyframes waggle {
  0% {
    transform: none;
  }
  50% {
    transform: rotateZ(-20deg) scale(1.2);
  }
  60% {
    transform: rotateZ(25deg) scale(1.2);
  }
  67.5% {
    transform: rotateZ(-15deg) scale(1.2);
  }
  75% {
    transform: rotateZ(15deg) scale(1.2);
  }
  82.5% {
    transform: rotateZ(-12deg) scale(1.2);
  }
  85% {
    transform: rotateZ(0) scale(1.2);
  }
  100% {
    transform: rotateZ(0) scale(1);
  }
}

@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(0, -4em);
  }
}

@keyframes spin {
  50% {
    transform: rotateZ(-20deg);
    animation-timing-function: ease;
  }
  100% {
    transform: rotateZ(360deg);
  }
}

@keyframes fade {
  25% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.25;
  }
  100% {
    opacity: 1;
  }
}

.start-now, .start-now:after {
  animation-delay: 0;
}

button:active {
  border-color: #aaa;
}

button:focus {
  outline: none;
}

.tab{
  display: none;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

.request-icon {
  min-width:90px;
  min-height:100px;
  width:238px;
  height:187px;
  border: 2px solid orange;
  border-radius: 25px;
}

#drop_zone {
/*   border: 5px solid blue; */
  width:  80%;
  height: 100px;
}

.request-description-textarea {
  height:100px;
  padding:0;
}

/* Longer name hidden by default  */
span.longer-name{
    display:none;
}
/* On hover, hide the short name */
.expanded-text:hover span.short-name{
    display:none;
}
/* On hover, display the longer name.  */
.expanded-text:hover span.longer-name{
    display:inline;
}

.blob.green {
  box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% {
    transform: scale(0.95);
  }

  70% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.95);
  }
}


/* https://css-tricks.com/responsive-data-tables/ */
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media
only screen and (max-width: 600px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table#history, thead.break-responsive, tbody.break-responsive, th.break-responsive, td.break-responsive, tr.break-responsive {
		display: block;
	}

	table#history{
	    width: 100%;
		display: inline;
	}

	.status-padding{
		padding:4.8px 4.8px 4.8px 267px;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	thead.break-responsive tr.break-responsive {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	tr.break-responsive { border: 1px solid orange; }

	td.break-responsive {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #151414505;
		position:relative;
		top:3px;
		right:0px;
		padding-left: 50%;
	}

	td.break-responsive:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 3px;
		left: 3px;
		width: 45%;
		padding-right: 10px;
		white-space:break-spaces;
		font-weight:bold;
		text-color:black;
	}

	tr.to-hide, td.to-hide{
		display: none;
	}

  .border-right{
    border-right: 1px solid white !important;
  }

  tr.to-hide-white, td.to-hide-white{
    background-color: inherit;
	}
	/*
	Label the data
	*/
	td.break-responsive:nth-of-type(1):before { content: "Request Time"; }
	td.break-responsive:nth-of-type(3):before { content: "Request Type"; }
	td.break-responsive:nth-of-type(5):before { content: "People Needed"; }
	td.break-responsive:nth-of-type(7):before { content: "Status"; }
	td.break-responsive:nth-of-type(9):before { content: "Action"; }
  td.break-responsive:nth-of-type(9) { line-height: 200%; /*font-size: larger;*/}
}