.ptg-nobreak {
  word-break:keep-all;
}

/* https://stackoverflow.com/questions/12699800/smarter-word-break-in-css */
.ptg-break {
  /*  word-break: break-word;
    overflow-wrap: anywhere;*/
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

/* nie znalazłem metody na wymuszenie js nadania ustawień z pseudostylu :active */
/* w związku z tym stworzyłem styl w którym na chama kopiuję te same ustawienia */
/* dzięki temu podświetla się przycisk 'urodzenia' po kliknięciu 'szukaj' */
input[type="button"].ptg-active {
  background: #7f181b;  /* theme WriteMag */
}

.ptg-search-constraints-box {
    margin-top: 5px;
    margin-bottom: 15px;
    padding: 5px;
    border: 2px solid #555555;
    overflow: auto;
}

.ptg-search-constraints-box input{
    margin: 2px;
}

div.ptg-error {
  background-color: lightpink;
  text-align: center;
}

.ptg-search-constraints-box div{
  display: block;
  margin: 5px;
}

.ptg-label-input-box {
  display: block;
  clear: left;
}

.ptg-label-input-box label {
  float: left;
  margin: 2px 2px 0px;
  clear: left;
}

.ptg-label-input-box input {
  float: right;
  width: 100%;
  clear: right;
}

.ptg-label-input-box input[type='checkbox'] {
  width: 20%;
}


.ptg-search-constraints-btn-group.ptg-bottommost {
  float:left;
  clear:left;
}

.ptg-search-constraints-btn-group.ptg-rightmost {
    float: right;
    height: 100%;
}

.ptg-search-constraints-btn-group.ptg-rightmost input{
  float: right;
  clear: both;
}



.ptg-search-constraints-input-group div.ptg-group-header {
  text-transform: uppercase;
  text-align: center;
}

.ptg-search-constraints-input-group div.ptg-half-width {
  width: 105px;
  clear: none;
  float: left;
}

.ptg-search-constraints-input-group div select{
  width: 100%;
}

.ptg-search-constraints-input-group {
  border: 1px solid;
  padding: 5px;
  float: left;
  width: 245px;
}



.ptg-data-box {
  overflow-x: auto;
}

.ptg-data-box table {
    table-layout: auto;
    width: 100%;
  }

.ptg-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.ptg-pagination__summary {
  margin-right: 6px;
  font-weight: 600;
}

.ptg-pagination__btn {
  border: 1px solid #cccccc;
  border-radius: 3px;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 0.9em;
}

.ptg-pagination__btn--active {
  background: #7f181b;
  border-color: #7f181b;
  color: #ffffff;
  cursor: default;
}

.ptg-pagination__ellipsis {
  padding: 0 4px;
}

/* https://codepen.io/AllThingsSmitty/pen/MyqmdM */
@media screen and (max-width: 780px){
    .ptg-search-constraints-btn-group.ptg-rightmost{
      width: 100%;
    }

    .ptg-search-constraints-btn-group.ptg-rightmost input{
      clear: none;
    }


    .ptg-data-box table thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
      }

      .ptg-data-box table tr {
        border-bottom: 3px solid #ddd;
        display: block;
        margin-bottom: 3.5em;
      }

      .ptg-data-box table td {
        border-bottom: 1px solid #ddd;
        display: block;
        font-size: .8em;
        text-align: right;
        min-height: 3.5em;
      }

      .ptg-data-box table td::before {
        /*
        * aria-label has no advantage, it won't be read inside a table
        content: attr(aria-label);
        */
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
      }

      .ptg-data-box table td:last-child {
        border-bottom: 0;
      }

}