/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
.paginationPage {
  padding: 10px;
  margin-right: 5px;
}
.paginationButton {
  border-radius: 5px;
  margin: 10px;
}

#loader {
  text-align: center;
}

.personType {
  font-size: 25px;
  color: #fff;
}
.localType {
  color: #2966a3;
}

.refugeeType {
  color: #009892;
}
.vermittlerType {
  color: #000000;
}

.filterButtons {
  display: flex;
}

.editButton:hover {
  background-color: #123456;
  color: #2966a3;
}

.locActive {
  color: #fff;
  background-color: #2966a3;
  border: 2px solid #2966a3;
}

.locInActive {
  color: #2966a3;
  background-color: #fff;
  border: 2px dashed #2966a3;
}

.refActive {
  color: #fff;
  background-color: #009892;
  border: 2px solid #009892;
}

.refInActive {
  color: #009892;
  background-color: #fff;
  border: 2px dashed #009892;
}

.verActive {
  background-color: #000;
  color: #fff;
  border: 2px solid #000;
}

.verInActive {
  background-color: #fff;
  border: 2px dashed #000;
  color: #000;
}

.statusButton {
  background-color: #8a8a8a;
  color: #fff;
  border: 2px solid #8a8a8a;
}
.statusInActive {
  background-color: #fff;
  border: 2px dashed #8a8a8a;
  color: #8a8a8a;
}

.manActiveButton {
  background-color: #eb56b6;
  color: #fff;
  border: 2px solid #eb56b6;
}

.manInActiveButton {
  background-color: #fff;
  border: 2px dashed #eb56b6;
  color: #eb56b6;
}

.womanActiveButton {
  background-color: #2824ff;
  color: #fff;
  border: 2px solid #2824ff;
}

.womanInActiveButton {
  background-color: #fff;
  border: 2px dashed #2824ff;
  color: #2824ff;
}

.locActive:hover {
  background-color: #2966a3dd;
}
.refActive:hover {
  background-color: #009892dd;
}
.verActive:hover {
  background-color: #000000dd;
}
.statusButton:hover {
  background-color: #8a8a8add;
}
.manActiveButton:hover {
  background-color: #eb56b6dd;
}
.womanActiveButton:hover {
  background-color: #2824ffdd;
}

.locInActive:hover,
.refInActive:hover,
.verInActive:hover,
.statusInActive:hover,
.manInActiveButton:hover,
.womanInActiveButton:hover {
  background-color: #eee;
}

.locActive,
.locInActive,
.refActive,
.refInActive,
.verActive,
.verInActive,
.statusButton,
.statusInActive,
.manActiveButton,
.manInActiveButton,
.womanActiveButton,
.womanInActiveButton {
  padding: 8px;
  margin: 0px 5px;
  border-radius: 4px;
  text-align: center;
  display: flex;
  align-items: center;
  cursor:pointer;
}

.locActive p,
.locInActive p,
.refActive p,
.refInActive p,
.verActive p,
.verInActive p,
.statusButton p,
.statusInActive p,
.manActiveButton p,
.manInActiveButton p,
.womanActiveButton p,
.womanInActiveButton p {
  margin: 0;
  font-weight: bolder;
}

#modal-background {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0.5;
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  filter: alpha(opacity=50);
  z-index: 1000;
}

#modal-content {
  background-color: white;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  box-shadow: 0 0 20px 0 #222;
  -webkit-box-shadow: 0 0 20px 0 #222;
  -moz-box-shadow: 0 0 20px 0 #222;
  display: none;
  left: 5%;
  padding: 10px;
  position: fixed;
  top: 20%;
  z-index: 1000;
  width: 90%;
  height: 60vh;
  overflow-y: auto;
}

#modal-background.active,
#modal-content.active {
  display: block;
}

#rowCont {
  display: flex;
}

.modalColumn {
  width: 50%;
  padding: 10px;
}
.modalColumn p {
  padding: 10px;
  margin: 0;
  border-bottom: 1px solid #cbcbcb;
  word-wrap: break-word;
}

.personenTable {
  margin-top: 20px;
}

.genderIcondHolder svg {
  width: 30px;
  height: 30px;
}

.criteria{
  display: flex;
}

.criteriaEntry{
  margin: 10px;
}