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; }
.orange{ color:#da6631 }

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

.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; }

.maxh100{ max-height: 100px; }
.maxh150{ max-height: 150px; }
.maxh200{ max-height: 200px; }
.maxh250{ max-height: 250px; }
.maxh300{ max-height: 300px; }

.pointer{ cursor: pointer; }

.text-darkish{ color: #aaa; }


.portal-header a{ color: #f18c5e; }

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

.fa.align{ width: 20px; text-align: center; }

.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;
}

.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;
}

.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; }




.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;
}



	/* admin menu */
	aside.left-panel{
		
	}
	#admin-menu{
		height: 100vh;
		background: #fafafa;
	}
	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;
		background: #fafafa;
		color: #666;
	}
	
	.btn-theme{
		padding: 2px 10px;
		cursor: pointer;
		margin-left: 5px;
		border: solid 1px #ccc;
	}
	
	
	body.dark-theme #admin-menu{ background: #545454; }
	body.dark-theme > .right-panel header.header {
		background: #545454;
		color: #F5F5F5;
	    border-bottom: 1px solid #333;
	}
	
	body.dark-theme > .right-panel .navbar-header {
		background: none;
	}
	
	body.dark-theme #admin-menu > ul > li a{
		background: #696969;
		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;
	}
	
	
/* xs */
@media(max-width: 420px){
	.hide-xs{ display: none; }
}

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

/* 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;
	}
}