img{ max-width: 100%; }

#title_headings h1{ color: #555; }
#title_headings h2{ font-size: 14px; background: #eee; padding: 5px; display: inline-block; margin-left: 10px; margin-bottom: 20px; }

.tiny{ font-size: 13px; }
.regular{ font-size: 15px; }
.large{ font-size: 18px; }
.huge{ font-size: 24px; }
.gigantic{ font-size: 32px; }

.bold{ font-weight: bold; }
.normal{ font-weight: normal; }

.underline{ text-decoration: underline; }

.w100{ width: 100px; }
.w150{ width: 150px; }
.w200{ width: 200px; }

.max100{ max-width: 100%; }
.max200{ max-width: 200px; }
.max300{ max-width: 300px; }
.max400{ max-width: 400px; }
.max500{ max-width: 500px; }
.max550{ max-width: 550px; }
.max650{ max-width: 650px; }
.nowrap{ white-space: nowrap; }

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 40px;
  right: 0;
  background-color: #eee;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
    border-left: double 3px #333;
}

.sidenav a {
  padding: 6px 6px 6px 28px;
  text-decoration: none;
  font-size: 20px;
  color: #686868;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
    background: #007bff;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#sideNavBtn{
    position: fixed;
    top: 60px;
    right: 0;
    padding: 4px 7px;
    background: #ddd;
    cursor: pointer;
    font-size: 14px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.input-label{
    background: #ccc;
	color: #333;
	font-size: 14px;
	font-weight: bold;
    padding: 3px 9px;
    margin-left: 9px;
    margin-bottom: 0;
    border-radius: 5px 5px 0 0;
}
.input-badge{
	position: absolute;
	right: 8px;
	margin-top: 14px;
	z-index:10;
}

.wrong{ text-decoration: line-through; }
		
.highlight{	background: yellow; }

.pointer{ cursor: pointer; }
.editable{ cursor: pointer; border-bottom: dashed 1px #06F; }

.text-darkish{ color: #aaa; }

.well{
	background: #fafafa;
	border: solid 1px #eee;
	padding: 15px;
}

header.header{
    background-color: #c3cbdc;
    background-image: linear-gradient(147deg, #c3cbdc 0%, #edf1f4 74%);
}

#side-nav-menu{
    background-color: #c3cbdc;
    background-image: linear-gradient(90deg, #dce0e8 0%, #f5f5f5 74%)
}

.card .card-header h3{ font-size: 1.25rem; padding-top: 4px; }

.card .card-header .tools{ float: right; }
a.close.red{ color: red; }
a.close.white{ color: white; }
a.close.round{ background: white; color: red; border-radius: 50%; padding: 0 5px; }
a.close:before {
    content: "×";
}

.hover:hover{
	background: #E0E9EB!important;
}
.hover-light:hover{
	background: #fafafa!important;
}
.hover-darkish:hover{
	background: #eee!important;
}
.hover-dark:hover{
	background: #888!important;
	color: white!important;
}

.row.hover:hover{
	background: #aaa;
}


.multi-checkboxes{
	border: solid 1px #ddd;
	box-shadow: #ccc 2px 2px 3px;
	max-width: 100%;
	height: 300px;
	overflow: auto;
	overflow-x: auto;
	font-size: 14px;
	font-weight: lighter;
}

.multi-checkboxes label{ display: block; padding: 10px; border-bottom: solid 1px #dedede; margin: 0; }

.multi-checkboxes label:hover{
	background: #eee;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
	border: 1px solid #128a3d;
	background: #c5dcc6;
	font-weight: bold;
	color: #5a7509;
}


.btn-icon{
	position: relative;
	border: solid 1px #ccc;
	background: white;
	color: #555;
	padding: 10px;
	font-size: 14px;
	width: 100%;
	max-width: 200px;
	margin: 4px;
}
.btn-icon:hover{
	border: solid 1px #ccc;
	background: #eee;
	color: #555;
}

.btn-icon.active{
	border: solid 1px #09C;
	background: #b1e9f5;
	color: #555;
}
.btn-icon .fa{
	font-size: 20px;
	color: #888;
}
.btn-icon .badge{
	border: solid 1px #ccc;
	position: absolute;
	right: -5px;
	top: -5px;
	border-radius: 50%;
	padding: 7px 9px;
}

.chk-btn{
	background: #eee;
	display: block;
	padding: 4px 10px;
}
.chk-btn:hover{
	background: #ccc;
}
.chk-btn.is_checked{
	background: #74ad76;
	color: white;
}

.chk-btn.blue{
	background: #78aace;
	color: white;
	display: block;
	padding: 4px 10px;
}
.chk-btn.blue:hover{
	background: #7dc3ec;
}
.chk-btn.blue.is_checked{
	background: #2d85c3;
	color: white;
}

.hover-underline{
	padding-bottom: 3px;
	border-bottom: solid 3px transparent;
}

.hover-underline.active, .hover-underline:hover{
	border-bottom: solid 3px #090;
}

	.inform{
		position: fixed;
		bottom: 50px;
		left: 0;
		right: 0;
		z-index: 999;
		text-align: center;
	}
	
	.inform div{
	  display: inline-block;
		padding: 8px;
		border-radius: 8px;
		font-size: 14px;
		background: rgba(0,0,0,0.7);
		color: white;
		max-width: 85%;
		margin-left: auto;
		margin-right: auto;
	}

label{ display: inline-block; }

label.chk-btn{
    padding: 1px 8px;
    background: #CCC;
    color: #555;
    border-radius: 5px;
}
label.chk-btn.is-checked{
    background: #0C3;
    color: white;
}

a{ color: #06C; }
a.dropdown-toggle{ color: inherit; }

.sub-menu li.active > a{
	color: #096;
	font-weight: bold;
}

.table.auto {
    width: auto!important;
}
.table.small td {
    font-size: 14px;
}
tr.selected{ background: #c7f5bf; }


.table-responsive{
	overflow-x:auto;
    max-width: 100%;
    margin-right: -200px;
}

.form-section {
    margin: 15px 0px 20px 0px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
    font-size: 24px;
    color: #444;
}

.clear{ clear: both; }

.male{ color: #00B2DC; }
.female{ color: #DA00C7; }
.undefined{ color: #aaa; }

.console{
	height: 300px;
	background: black;
	color: #aaa;
	font-family: "Lucida Console", Monaco, monospace;
	font-size: 14px;
	padding: 10px;
	overflow: hidden;
	overflow-y: scroll;
}
.console.large{ height: 400px; }


.incident{
	font-size: 12px;
}

.incident-info{
	position: relative;
    margin-left: 113px;
    background: #fafafa;
	padding: 7px 10px;
	padding-bottom: 15px;
}

.incident-info.minor{ border-left: 2px solid #09F; }
.incident-info.cautionary{ border-left: 2px solid #FC0; }
.incident-info.major{ border-left: 2px solid #F00; }
.incident-info.health{ border-left: 2px solid #f90; }

.incident-info > .arrow{
	display: block;
    position: absolute;
    top: 5px;
    left: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

.incident-info.minor > .arrow{
    border-right: 8px solid #09F;
}
.incident-info.cautionary > .arrow{
    border-right: 8px solid #FC0;
}
.incident-info.major > .arrow{
    border-right: 8px solid #F00;
}
.incident-info.health > .arrow{
    border-right: 8px solid #f90;
}


/** sticky notes **/
.sticky_note {
	background: #FEFFBF;
    position: absolute;
    left: 100px;
    top: 200px;
    z-index: 99999;
	cursor: move;
    box-shadow: #000 0px 0px 11px 0px;
}
.sticky_note_options{ cursor: move; padding: 0 5px; }
.sticky_note_options > .caption{
	display: inline-block;
	float: left;
	margin-top: -12px;
}
.sticky_note_options > .caption i{
	font-size: 30px;
    text-shadow: #333333 1px 2px 3px;
}
.sticky_note_options > .tools{
	display: inline-block;
	float: right;
	cursor: pointer;
}

.sticky_note > textarea{
    padding: 5px;
	font-family: cursive, "Courier New", Courier, monospace;
	font-size: 14px;
	line-height: 22px;
	background: transparent;
	border: none;
	resize: none;
	height: 200px;
    overflow: auto;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
	color: inherit;
}

.sticky_note > textarea[readonly]{
	background: transparent!important;
	cursor: default!important;
}

.sticky_note .foot{ padding: 0 5px; }


.sticky_note > textarea::-webkit-scrollbar {
  width: 5px;
  height: 3px;
}
.sticky_note > textarea::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #999a6d;
  border: 0px none #ffffff;
  border-radius: 50px;
}
.sticky_note > textarea::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}
.sticky_note > textarea::-webkit-scrollbar-thumb:active {
  background: #000000;
}
.sticky_note > textarea::-webkit-scrollbar-track {
  background: #cbbc01;
  border: 0px none #ffffff;
  border-radius: 50px;
}
.sticky_note > textarea::-webkit-scrollbar-track:hover {
  background: #989d2f;
}
.sticky_note > textarea::-webkit-scrollbar-track:active {
  background: #92f3fe;
}
.sticky_note > textarea::-webkit-scrollbar-corner {
  background: transparent;
}

.sticky_preset{
	padding: 0 7px!important;
    line-height: 16px;
    background: red;
    border-radius: 7px!important;
    display: inline-block;
    cursor: pointer;
}

.snstandard{ background: #FEFFBF; color: #000000; }
.snimportant{ background: #e25b5b; color: #ffffff; }
.snurgent{ background: #770003; color: #ffffff; }
.sngreen{ background: #F1FFE8; color: #000000; }
.snbright{ background: #FAFF24; color: #000055; }
/** sticky notes end **/

/* From Uiverse.io by Galahhad */ 
.switch .checkbox {
  display: none;
}

.switch .slider {
  width: 60px;
  height: 30px;
  background-color: lightgray;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  border: 4px solid transparent;
  transition: .3s;
  box-shadow: 0 0 10px 0 rgb(0, 0, 0, 0.25) inset;
  cursor: pointer;
}

.switch .slider::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: translateX(-30px);
  border-radius: 20px;
  transition: .3s;
  box-shadow: 0 0 10px 3px rgb(0, 0, 0, 0.25);
}

.switch .checkbox:checked ~ .slider::before {
  transform: translateX(30px);
  box-shadow: 0 0 10px 3px rgb(0, 0, 0, 0.25);
}

.switch .checkbox:checked ~ .slider {
  background-color: #2196F3;
}

.switch .checkbox:active ~ .slider::before {
  transform: translate(0);
}

/*
.switch {
  font-size: 1rem;
  position: relative;
}
.switch input {
  position: absolute;
  height: 1px;
  width: 1px;
  background: none;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  padding: 0;
}
.switch input + label {
  position: relative;
  min-width: calc(calc(2.375rem * .8) * 2);
  border-radius: calc(2.375rem * .8);
  height: calc(2.375rem * .8);
  line-height: calc(2.375rem * .8);
  display: inline-block;
  cursor: pointer;
  outline: none;
  user-select: none;
  vertical-align: middle;
  text-indent: calc(calc(calc(2.375rem * .8) * 2) + .5rem);
}
.switch input + label::before,
.switch input + label::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: calc(calc(2.375rem * .8) * 2);
  bottom: 0;
  display: block;
}
.switch input + label::before {
  right: 0;
  background-color: #dee2e6;
  border-radius: calc(2.375rem * .8);
  transition: 0.2s all;
}
.switch input + label::after {
  top: 2px;
  left: 2px;
  width: calc(calc(2.375rem * .8) - calc(2px * 2));
  height: calc(calc(2.375rem * .8) - calc(2px * 2));
  border-radius: 50%;
  background-color: white;
  transition: 0.2s all;
}
.switch input:checked + label::before {
  background-color: #08d;
}
.switch input:checked + label::after {
  margin-left: calc(2.375rem * .8);
}
.switch input:focus + label::before {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(0, 136, 221, 0.25);
}
.switch input:disabled + label {
  color: #868e96;
  cursor: not-allowed;
}
.switch input:disabled + label::before {
  background-color: #e9ecef;
}
.switch.switch-sm {
  font-size: 0.875rem;
}
.switch.switch-sm input + label {
  min-width: calc(calc(1.9375rem * .8) * 2);
  height: calc(1.9375rem * .8);
  line-height: calc(1.9375rem * .8);
  text-indent: calc(calc(calc(1.9375rem * .8) * 2) + .5rem);
}
.switch.switch-sm input + label::before {
  width: calc(calc(1.9375rem * .8) * 2);
}
.switch.switch-sm input + label::after {
  width: calc(calc(1.9375rem * .8) - calc(2px * 2));
  height: calc(calc(1.9375rem * .8) - calc(2px * 2));
}
.switch.switch-sm input:checked + label::after {
  margin-left: calc(1.9375rem * .8);
}
.switch.switch-lg {
  font-size: 1.25rem;
}
.switch.switch-lg input + label {
  min-width: calc(calc(3rem * .8) * 2);
  height: calc(3rem * .8);
  line-height: calc(3rem * .8);
  text-indent: calc(calc(calc(3rem * .8) * 2) + .5rem);
}
.switch.switch-lg input + label::before {
  width: calc(calc(3rem * .8) * 2);
}
.switch.switch-lg input + label::after {
  width: calc(calc(3rem * .8) - calc(2px * 2));
  height: calc(calc(3rem * .8) - calc(2px * 2));
}
.switch.switch-lg input:checked + label::after {
  margin-left: calc(3rem * .8);
}
.switch + .switch {
  margin-left: 1rem;
}
*/

.contact-fa{
	min-width: 24px;
	text-align: center;
}
.keep-badge{
	color: #fff;
	background-color: #dc3545;
}
.keep-badge.active{
	background-color: #28a745;
}


	/* admin menu */
	aside.left-panel{
		background: #f6f6f6;
	}
	#admin-menu{
		height: 100vh;
	}
	aside.left-panel::-webkit-scrollbar {
		display: none;
	}
	#admin-menu ul.nav{
		margin-bottom: 80px;
		border-bottom: solid 1px #aaa;
	}
	#admin-menu li{
		position: relative;
	}
	
	#admin-menu > ul > li a{
		display: block;
		padding: 10px 10px 10px 60px;
		border-top: solid 1px #ddd;
		color: #666;
	}
	
	.btn-theme{
		padding: 2px 10px;
		cursor: pointer;
		margin-left: 5px;
		border: solid 1px #ccc;
	}
	
    body.dark-theme > .right-panel header.header {
		color: #F5F5F5;
        background-color: #4d4855;
        background-image: linear-gradient(147deg, #4d4855 0%, #323232 74%);

	    border-bottom: 1px solid #333;
	}

	body.dark-theme > .right-panel .navbar-header {
		background: none;
	}
	
	body.dark-theme #admin-menu > ul > li a{
		background: #696969;
        background-color: #4d4855;
        background-image: linear-gradient(247deg, #4d4855 0%, #323232 74%);
		color: #fff;
	}
	body.dark-theme #admin-menu > ul > li.active > a,
	body.dark-theme #admin-menu > ul > li.active > a:hover {
	    background: #28b779;
	}
	
	body.dark-theme #admin-menu .sub-menu li a {
		color: #fff;
		background: #827f7f;
	}
	
	body.dark-theme #admin-menu .sub-menu li.active a {
		background: #64daa7;
		color: #565656;
	}
	
	body.dark-theme #admin-menu > ul > li a:hover{
		background: #333;
	}
	body.dark-theme #admin-menu .sub-menu li a:hover {
		background: #beccc6;
		color: #4c4646;
	}
	
	#menu-scroll-down{
		position: fixed;
		background: rgba(55,55,55,0.8);
		color: white;
		bottom: 3px;
		text-align: center;
		width: 280px;
		height: 20px;
	}
	
	#menu-scroll-up{
		position: fixed;
		background: rgba(55,55,55,0.8);
		color: white;
		top: 50px;
		text-align: center;
		width: 280px;
		height: 20px;
	}
	
	#admin-menu li a:hover{
		border-top: solid 1px #ddd;
		background: #eee;
	}
	#admin-menu li a .menu-icon{
		position: absolute;
		margin-left: -32px;
		margin-top: 4px;
	}
	
	#admin-menu li.open > a{
		background: #eee;
	}
	#admin-menu > ul > li.active > a{
		background: #28b779;
		color: white;
	}
	#admin-menu li.has-children:before{
		content: "";
		position: absolute;
		top: 20px;
		right: 15px;
		width: 8px;
		height: 8px;
		border-style: solid;
		border-width: 1px;
		border-color: #999fa2 #999fa2 transparent transparent;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		-webkit-transition: all .25s ease;
		transition: all .25s ease;
	}
	#admin-menu li.has-children.open:before{
		border-color: #28b779 #28b779 transparent transparent;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	#admin-menu li.has-children.active:before{
		border-color: white white transparent transparent;
		border-width: 3px;
		top: 18px;
		width: 12px;
		height: 12px;
	}
	#admin-menu > ul > li.active:after{
		content: "";
		position: absolute;
		top: 8px;
		z-index: -1;
		right: -10px;
		width: 30px;
		height: 30px;
		border-style: solid;
		background: #28b779;
		border-width: 1px;
		border-color: #28b779 #28b779 transparent transparent;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		-webkit-transition: all .25s ease;
		transition: all .25s ease;
	}
	
	
	#admin-menu .sub-menu{
		display: none;
		padding-left: 0;
	}
	#admin-menu .sub-menu.active{
		display: block;
	}
	#admin-menu .sub-menu li a{
		padding: 7px 8px 7px 40px;
		border-top: solid 1px #eee;
		font-size: 14px;
		color: #888;
		background: white;
	}
	#admin-menu .sub-menu li a .fa{
		margin-right: 14px;
	}
	
	#admin-menu .sub-menu li.active a{
		background: #ddd;
	}
	
	/* menu personalisation: star/pin + A-Z sort control */
	#admin-menu li.menu-controls{
		padding: 0 10px 10px;
		/* a quiet pill tucked under the right of the search box - a full width
		   button here fought with the search button and looked out of place */
		text-align: right;
	}
	#admin-menu li.menu-controls #menu-sort-toggle{
		background: transparent;
		border: solid 1px rgba(255,255,255,0.25);
		border-radius: 20px;
		color: #b0b5b8;
		font-size: 12px;
		line-height: 1;
		padding: 5px 12px;
		white-space: nowrap;
	}
	#admin-menu li.menu-controls #menu-sort-toggle:hover{
		border-color: rgba(255,255,255,0.55);
		color: #fff;
	}
	#admin-menu li.menu-controls #menu-sort-toggle.active{
		border-color: #28b779;
		color: #28b779;
	}
	#admin-menu li.menu-controls #menu-sort-toggle .fa{
		margin-right: 5px;
	}
	/* one button, two labels - swapped on the active class so the control
	   always says what the next click will do */
	#admin-menu li.menu-controls #menu-sort-toggle .menu-sort-on,
	#admin-menu li.menu-controls #menu-sort-toggle.active .menu-sort-off{
		display: none;
	}
	#admin-menu li.menu-controls #menu-sort-toggle.active .menu-sort-on{
		display: inline;
	}
	#admin-menu li.menu-controls #menu-prefs-error{
		text-align: right;
	}
	/* absolutely positioned: the sibling <a> is display:block, so an inline
	   star would drop onto its own line. Kept clear of the accordion chevron
	   at right:15px and the active-section arrow at right:-10px */
	#admin-menu .menu-star{
		position: absolute;
		top: 1px;
		height: calc(1.5em + 20px);
		line-height: calc(1.5em + 20px);
		right: 34px;
		width: 28px;
		text-align: center;
		cursor: pointer;
		color: #b0b5b8;
		opacity: 0;
		z-index: 2;
		transition: opacity .2s ease, color .2s ease;
	}
	#admin-menu li.parent-nav:hover .menu-star{
		opacity: 1;
	}
	#admin-menu .menu-star:hover{
		color: #f0ad4e;
	}
	#admin-menu .menu-star.starred{
		opacity: 1;
		color: #f0ad4e;
	}
	/* divider between the pinned block and the rest of the menu */
	#admin-menu li.parent-nav.starred + li.parent-nav:not(.starred) > a{
		border-top: solid 3px #28b779;
	}
	/* that row's border is 3px rather than 1px, so its star drops by the same 2px */
	#admin-menu li.parent-nav.starred + li.parent-nav:not(.starred) > .menu-star{
		top: 3px;
	}
	/* search results are clones - they must never carry a star */
	#dynamic-menu-items .menu-star{
		display: none;
	}
	/* the collapsed icon-only sidebar has no room for either control */
	.open aside.left-panel #admin-menu li.menu-controls,
	.open aside.left-panel #admin-menu .menu-star{
		display: none;
	}
	/* touch: always visible, bigger hit area, further from the chevron */
	@media(max-width: 950px){
		#admin-menu .menu-star{
			opacity: 1;
			right: 40px;
			width: 40px;
		}
	}
	
	
/* xs */
@media(max-width: 420px){
	.hide-xs{ display: none; }
}

/* sm */
@media(max-width: 575px){
	.hide-sm{ display: none; }
}

/* md */
@media(max-width: 768px){
	.hide-md{ display: none; }
}

/* lg */
@media(max-width: 992px){
	.hide-lg{ display: none; }
}

/* xl */
@media(max-width: 1200px){
	.hide-xl{ display: none; }
}


/* xxl */
@media (min-width: 1400px){
	.col-xxl-6 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
		position: relative;
		width: 100%;
		min-height: 1px;
		padding-right: 15px;
		padding-left: 15px;
	}
}


/* dynamic menu search list item */

.dynamic-menu-item{
    list-style: none;
    margin-left: -30px;
}
.dynamic-menu-item a{
    padding: 10px!important;
    background: #c4dece!important;
}
.dynamic-menu-item a:hover{
    background: green!important;
    color: white!important;
}