body {
	background-color: #014e40;	
	background-image: url(../IMG/back.webp);
	background-attachment: fixed;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.bg-dark{
	background-color: #0e2c27 !important;
}
a {
	color: #009dcb;
}
a:hover {
	color: #2e6170;
}
.country {
	white-space: nowrap;
}
.row-hover:hover>div {
	font-weight: bolder;	
}
.table-hover>tbody>tr{
	cursor: pointer;
	color: rgba(0,0,0,.5);
	font-weight: bolder;
}
.table-hover td {
	vertical-align:middle;
}
.table-hover img{
	opacity:0.8;
}
.table-hover tr:hover td {
	color:#000;
}
.table-hover tr:hover img {
	opacity:1;
}
.doublecolumn {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}
.spacer{
	height: 42px;
}
.spacer2{
	height: 30px;
}
.text-table-self {
	color:#FF8C00 !important;
}
.row4 {
	border-top:1px solid #000;
}
.btn-stand{
	border-color: #777; !important;
	cursor: pointer;
	background-color: #ddd;
}
.flag {
	width: 1.5em;
	height: 1em;
	box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.3);
	border-radius: 50%;
	vertical-align: top;
	border:1px solid #ccc;
}
.modalimg {
	margin-top:0.2em;
}	
.pending {
	border-color:orange;
}
.navbar-nav .show .dropdown-menu {
	background-color:#fefefe
}
.navbar-nav .show a:focus, .dropdown-item.active, .dropdown-item:active{
	background-color: #343a40;
}
.striped, .card >ul {
	background-color: #fafbfc;
}
.navbar-dark, .dropdown-menu, .striped, .alert-danger.card {
	box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.3);	
}
.oranje{
	border: 5px solid #ffaf4d;
}
.error {
	background-color: #f8d7da;
}
.card {
	border: 1px solid rgba(0,0,0,.4);
}
.list {
	list-style-type: none;
}
.item {
	width:10em;
	cursor: s-resize;
	display: block;
	text-align: left;
	border-radius: .25rem;
	border-color: #777;
	background-color:#ddd;
}

.ui-sortable-helper {
  cursor: move;
  box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.3);	
  background-color:white;
}
.flip-card {
	perspective: 2000px;
	overflow: hidden;
}
.flip-card-inner {
  position: relative;
  text-align: center;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}
.flip-card-front, .flip-card-back {
  backface-visibility: hidden;
}
.flip-card-front{
  transform: rotateY(0deg);
}
.flip-card-back {
  position: absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%;  
  transform: rotateY(-180deg);
}
.twisted {
  transform: rotateY(-180deg);
}
.disabled {
	cursor: default !important;
}
hr {
	margin-top:.25rem;
	margin-bottom:.25rem;
}
.card >ul {
	border-radius:.25rem;
}
.overviewImg{
	width:1em;
	height:1em;
	font-size:1.9em;
}
li {
    opacity: 1;
}
.fader.fader.ng-enter {
  -webkit-transition: 1s ease;
  transition: 1s ease;	
  opacity: 0;
}
.fader.ng-enter.ng-enter-active {
  opacity: 1;
}

#navbardrop>img{
	opacity:0.7;
}
#navbardrop:hover>img, #navbardrop[aria-expanded=true]>img, .nav-item.dropdown.active>#navbardrop>img{
	opacity:1;
}
.allways{
	opacity:.5;
	font-size:1rem;
}
.allways.active{
	opacity:1;
}
.allways:hover{
	opacity:1;
}
td.disabled {
	color:#ccc !important;
}
.form-control{
	height:1.5em;
}
.litop{
	color:rgba(255,255,255,.7) !important;
	font-size: 1.5rem;
}
.jumbotron, .cardtransparent{
	background-color: rgba(233,236,239,0.6) !important;
}

@media (prefers-color-scheme: dark) {
	body {
		color: #fff;		
	}
	.jumbotron, .cardtransparent{
		background-color: rgba(17,17,17,0.6) !important;
	}	
	.striped, .card >ul {
		background-color: #0e2d27;
		color: #fff;
	}
	.table-hover td{
		color: #fff;
	}
	.fa-user-circle{
		color: #777;
	}
	.table-hover tr.text-table-self td{
		color: #FF8C00;
	}	
	.card {
		border: 1px solid rgba(0,0,0,.4);
		background-color: #0e2d27;
	}
	.modal-content{
		background-color: #0e2d27;
	}
	.modal-header{
		border-bottom: 1px solid #000;
	}
	.modal-footer{
		border-top: 1px solid #000;
	}
	input[type=text]{
		text-align: right;
		background-color: #333;
		border-top: 1px solid #343a40;
		border-bottom: 1px solid #343a40;
		color: #fff;
	}
	input[type=text]:focus {
		background-color: #333;
		color: #fff;
	}
	input[type=text]:disabled{
		text-align: right;
		background-color: #333;
		border-top: 1px solid #343a40;
		border-bottom: 1px solid #343a40;
		color: #aaa;
	}
	textarea[type=text]{
		background-color: #333;
		border-top: 1px solid #343a40;
		border-bottom: 1px solid #343a40;
		color: #fff;
	}
	textarea[type=text]:focus {
		background-color: #333;
		color: #fff;
	}	
	.form-control{
		background-color: #333;
		border-top: 1px solid #343a40;
		border-bottom: 1px solid #343a40;
		color: #fff;
		height:1.5em;
	}	
	.form-control:focus{
		background-color: #333;
		color: #fff;
	}
	.btn-link{
		color: #1472d9;
	}
	.table-hover tr:hover td {
		color:#fff;
		background-color: rgba(255,255,255,.075);		
	}	
	.row4{
		border-top:1px solid #fff;
	}
	.switch {
		background-color: #212529 !important;
	}
	.switch.checked {
		background-color: #64bd63 !important;
	}
	.switch small {
		background-color: #383d41 !important;
	}
	.item {
		background-color:#333;
		color:#fff;
		border-color:#555;
	}
	.btn-stand {
		background-color:#333;
		color:#fff;
		border-color:#555;
	}	
	.btn-outline-secondary{
		color:#dee2e6;
		border-color: #dee2e6;
	}
	.table .thead-light th {
		color: #fff;
		background-color: #343a40;
		border-color: #777;
	}
	.table td, .table th {
		color: #fff;
	}
	.datepicker{
		background-color:#0e2d27;
		color:#fff;
	}
	.new.day, .old.day{
		color:#ccc !important;
	}
	.datepicker .day:hover, .datepicker .month:hover, .datepicker-switch:hover, .datepicker .next:hover, .datepicker .prev:hover{
		background-color:#555 !important;
	}
	.day.disabled {
		color:#777777 !important;
	}	
	.day.disabled:hover, .month.disabled:hover {
		background-color:#0e2d27 !important;
	}
	.datepicker .active:hover{
		background-color:#204d74 !important;
	}
	.datepicker .month.focused{
		background-color:#6c757d;
	}
}