/* Color Swatch
#7DADDD,#0D5D8F,#363F48,#E1937A,#EAC9D0
#30323d = dark bluish gray color
*/
.theme-base {
  /* background: linear-gradient(180deg, rgba(250,86,86,1) 10%, rgba(252,176,69,1) 100%); */
  background: #2D4059;/*#30323d; /*#a8d0e6; /*#5b93ac; /*rgba(31, 76, 109, 1.0); */
  color: #2D4059;
  opacity: 1.0;
}


.btn-hny button {
  width: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.btn-hny {
  display: block;
}

.hex-label {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

//Remove for mozilla
button::-moz-focus-inner {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.banner {
  padding-bottom: 0;
  padding-top: 1rem;
}

h1.banner {
  font-size: 3rem;
}

h3.banner {
  font-size: 2rem;
}

tr {
  min-height: 40px;
  height: 40px;
}

td.icon {
  display: block;
}

svg {
  display: inherit;
  max-height: 100%;
}

hr.banner {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
    width: 200px;
    padding: 0;
}

hr.banner2 {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(45, 64, 89, 0), rgba(45, 64, 89, 0.75), rgba(45, 64, 89, 0));
    width: 200px;
    padding: 0;
}

#footer {
  background: rgba(45, 64, 89, 1.0);
  height: 8rem;
}

.theme-highlight {
  background: #4d5061; /*#9cc2d3; /*#e0edf1;*/
  opacity: 1.0;
  color: white;
}

.theme-highlight2 {
  color: #2D4059;
}

.text-highlight {
  color: white;
}

.theme-highlight-3 {
  color: white;
}

.transl-white {
  background-color: rgba(255, 255, 255, 1);
}

.protocol-listing {
  border-radius: 0px;
}


a.banner {
  color: white;
}

a.theme-base {
  color: #4d5061;
}

.theme-base-link {
  color: #2D4059;
}

/* BUTTON OVERRIDES */
.btn.theme-base {
  background: white;
  width: 100%;
  padding: 10;
  margin: 0;
}

.clickable-table-row {
  cursor: pointer;
}

/* HEXAGON GALLERY EXAMPLE MODIFIED FROM: https://codepen.io/Rafiozoo/pen/NyMZRy */
.hex-container {
	margin: 3rem auto;
	padding: 1rem 0 2.4rem;
/* 	background-color: gold; */
	text-align: center;
	max-width: 50rem;
}

.item {
	width: 10rem;
	height: 10rem;
	position: relative;
  margin-left: auto;
  margin-right: auto;

	/* Default - simple fallback when no CSS Grid support */
	display: inline-block;
	margin: 0.4rem;
  margin-bottom: 0.4rem;
}

.item div {
  color: white;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.hex-active div {
  color: white;
}

.img-hny {
  display: block;
  width:100px;
  height: 100px;
  z-index:9;
  position:relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  visibility: visible;
}

.hex-active img {
  opacity: 0.2;
}

.img-hny.hex-active {
  opacity: 0.2;
}

.hex-label {
  margin-left: auto;
  margin-right: auto;
  margin-top: -65%; /*-42.5*/
  margin-bottom: auto;
  z-index: 10;
  position: relative;
  color: white;
  display: none;
  float: left; /* This float is crucial to prevent honeycomb from shifting
  when text appears (since setting the label display=none removes the space
  it previously occupied)*/
}


.hex-label.hex-active{
  display: block;
}

.img-hny.hex-highlight {
  opacity: 0.2;
}

.hex-label.hex-highlight {
  display: block;
}

.btn-hny {
  background: transparent;
  border: none;
}

button.btn-hny:focus {
  outline:0;
}

.item button {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	background-size: cover;
	background-position: center;
}

#labelTest {
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    z-index: 10;
    position: relative;
    color: white;
    display: none;
}


.item-hex-base::before { /* Goldenrod outline on the hexagon */
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	background-color: white;
  clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  -webkit-clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  -moz-clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);	transform: scale(1.03);
	transition: transform 0.3s;
}

.item-hex-base:hover::before {
  background: #2D4059;
  opacity: 0.8;
  color: white;
}

.item-hex-red::before { /* Goldenrod outline on the hexagon */
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	background-color: #f37061;
  clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  -webkit-clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  -moz-clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);	transform: scale(1.065);
	transition: transform 0.3s;
}

.item-hex-purple::before { /* Goldenrod outline on the hexagon */
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	background-color: #b161f3;
  clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  -webkit-clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  -moz-clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);	transform: scale(1.065);
	transition: transform 0.3s;
}

.item-hex-orange::before { /* Goldenrod outline on the hexagon */
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	background-color: #e08631; /*#f2a65e;*/
  clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  -webkit-clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  -moz-clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);	transform: scale(1.065);
	transition: transform 0.3s;
}


.item-hex-blue::before { /* Goldenrod outline on the hexagon */
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	background-color: #00afca;
  clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  -webkit-clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  -moz-clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);	transform: scale(1.065);
	transition: transform 0.3s;
}

.item-hex-white::before { /* Goldenrod outline on the hexagon */
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	background-color: white;
  clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  -webkit-clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  -moz-clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);	transform: scale(1.15);
	transition: transform 0.3s;
}

.item-hex-green::before { /* Goldenrod outline on the hexagon */
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	background-color: #85e085;
  clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  -webkit-clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  -moz-clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);	transform: scale(1.065);
	transition: transform 0.3s;
}

.item-hex-golden::before { /* Goldenrod outline on the hexagon */
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	background-color: goldenrod;
  clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  -webkit-clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  -moz-clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
	transform: scale(1.065);
	transition: transform 0.3s;
}

.item-hex-base::before { /* Goldenrod outline on the hexagon */
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	background-color: #2D4059;
	clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  -webkit-clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  -moz-clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
	transform: scale(1.07);
	transition: transform 0.3s;
}

.item-hny:hover::before{
	transform: scale(1.25);
}

.hex-active.item-hny::before { /* Goldenrod outline on the hexagon */
	transform: scale(1.25);
}

.btn-hny:hover div{
  opacity: 0.3;
}

.make-visible {
  visibility: visible;
}

.make-invisible {
  visibility: hidden;
}

/* STYLES FOR CATEGORY CLASSES OF TABLE */
.category-box {
  width: 20px;
  height: 20px;
  border: 2px solid;
  border-radius: 5px;
}
.resources {
  border-color: #e08631;
}

.sanitization {
  border-color: goldenrod;
}

.airway-management {
  border-color: #00afca;
}

/* .triage {
  border-color: #f37061;
} */

.patient {
  border-color: #b161f3;
}

.department {
  border-color: #f37061;
}

.screen-test-diagnose {
  border-color: #85e085;
}

.equipment {
  border-color: goldenrod; /*#f2a65e;*/
}

td.div {
  overflow: hidden;
  text-wrap: normal;
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 0;
  vertical-align: top;
}

td {
  height: 40px;
}

/*
@supports (display: grid) {

	@media (min-width: 17rem) {
		.hex-container {
			display: grid;
			max-width: 15rem;
			grid-template-columns: repeat(3, 5rem);
		}
		.item {
			grid-column: span 2;
			margin: 0; /* reset */
			/* margin-bottom: -1.4rem;	/* shifting up the items in the next row */
		/*}
		 .item:nth-child(even) {grid-column: 2}
	} /*

/*	@media (min-width: 22rem) {
		.hex-container {
			max-width: 20rem;
			grid-template-columns: repeat(4, 5rem);
		}
		.item:nth-child(3n+1) {grid-column: 1}
		.item:nth-child(3n+2) {grid-column: 3}
		.item:nth-child(3n+0) {grid-column: 2}
	}

	@media (min-width: 32rem) {
		.hex-container {
			max-width: 30rem;
			grid-template-columns: repeat(6, 5rem);
		}
		.item:nth-child(5n+1) {grid-column: 1}
		.item:nth-child(5n+2) {grid-column: 3}
		.item:nth-child(5n+3) {grid-column: 5}
		.item:nth-child(5n+4) {grid-column: 2}
		.item:nth-child(5n+0) {grid-column: 4}
	}

	@media (min-width: 42rem) {
		.hex-container {
			max-width: 40rem;
			grid-template-columns: repeat(8, 5rem);
		}
		.item:nth-child(7n+1) {grid-column: 1}
		.item:nth-child(7n+2) {grid-column: 3}
		.item:nth-child(7n+3) {grid-column: 5}
		.item:nth-child(7n+4) {grid-column: 7}
		.item:nth-child(7n+5) {grid-column: 2}
		.item:nth-child(7n+6) {grid-column: 4}
		.item:nth-child(7n+0) {grid-column: 6}
	}

	@media (min-width: 54rem) {
		.hex-container {
			max-width: 50rem;
			grid-template-columns: repeat(10, 5rem);
		}
		.item:nth-child(9n+1) {grid-column: 1}
		.item:nth-child(9n+2) {grid-column: 3}
		.item:nth-child(9n+3) {grid-column: 5}
		.item:nth-child(9n+4) {grid-column: 7}
		.item:nth-child(9n+5) {grid-column: 9}
		.item:nth-child(9n+6) {grid-column: 2}
		.item:nth-child(9n+7) {grid-column: 4}
		.item:nth-child(9n+8) {grid-column: 6}
		.item:nth-child(9n+0) {grid-column: 8}
	}
} */

/* SCROLL TABLE/SORTING FROM MDB */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before {
  bottom: .5em;
}

.hidden-col {
  display: none;
}