* {
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    font-size: medium;
    margin: 0;
    padding: 0;
    background: rgba(231, 226, 226, 0.63);
}

.table {
    border-collapse: collapse;
    width: 95%;
}

th,
td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: lightgray;
    text-align: center;
}

.td_sold {
    background-color: lightsalmon;
}

.td-position {
    text-align: center;
    background-color: lavender;
}

td.player-width {
    width: 130px;
}

.td-tw {
    background-color: whitesmoke;
}
.td-aw {
    background-color: moccasin;
}
.td-mf {
    background-color: oldlace;
}
.td-st {
    background-color: mintcream;
}

td.center {
    text-align: center;
}

.small_logo {
    object-fit: contain;
    width: 25px;
    height: 25px;
}

.hidden-all {
    display: none;
}

.td-gesamt {
    background-color: lightgoldenrodyellow;
}

input[type="checkbox"] {
    transform: scale(2);
}

input[type="search"] {
    border-radius: 4px;
}

button {
    background-color: white;
    color: black;
    border: 2px solid red;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
  margin: 0;
  width: 40px;
}

@media only screen and (width <=350px) {

    .hidden-450 {
        display: none;
    }

    .searchheader {
        grid-column: 1;
        align-self: stretch;
    }

    .owner {
        text-align: center;
        font-size: x-small;
        font-weight: bold;
    }

    .table {
        font-size: xx-small;
        justify-self: auto;
    }

    .grid-container {
        display: grid;
        place-content: start center;
        row-gap: 10px;
        justify-items: stretch;
    }

    .logo-center {
        display: grid;
        gap: 0px;
        place-self: center;
    }
}

@media only screen and (350px < width <=450px) {

    .hidden-450 {
        display: none;
    }

    .searchheader {
        grid-column: 1;
        align-self: stretch;
    }

    .owner {
        text-align: center;
        font-size: small;
        font-weight: bold;
    }

    .table {
        font-size: x-small;
        justify-self: auto;
    }

    .grid-container {
        display: grid;
        place-content: start center;
        row-gap: 20px;
        justify-items: stretch;
    }

    .logo-center {
        display: grid;
        gap: 0px;
        place-self: center;
    }
}

@media only screen and (450px < width <=600px) {

    .hidden-600 {
        display: none;
    }

    .table {
        font-size: x-small;
        justify-self: auto;
    }

    .owner {
        text-align: center;
        font-size: small;
        font-weight: bold;
    }

    .grid-container {
        display: grid;
        place-content: start center;
        row-gap: 10px;
        justify-items: stretch;
    }

    .searchheader {
        grid-column: 1;
        justify-self: stretch;
    }

    .logo-center {
        display: grid;
        gap: 0px;
        place-self: center;
    }

}

@media only screen and (600px < width <=900px) {

    .hidden-900 {
        display: none;
    }

    .searchheader {
        grid-row: 1;
        grid-column: span 2;
    }

    .grid-container {
        display: grid;
        place-content: start center;
        row-gap: 20px;
        grid-template-columns: 360px 360px;
    }

    .table {
        font-size: small;
        justify-self: auto;
    }

    .owner {
        text-align: center;
        font-size: medium;
        font-weight: bold;
    }

    .logo-center {
        display: grid;
        gap: 0px;
        place-self: center;
    }

    .title {
        grid-row: 2;
        grid-column: span 2;
        font-size: x-large;
    }

    .transfer {
        grid-column: span 2;
    }

    .tausch {
        grid-column: span 2;
    }

    .searchresult {
        grid-column: span 2;
    }

    .spieltag {
        grid-column: span 2;
    }

    .title-1 {
        grid-row: 1;
        grid-column: span 2;
    }

    .aufst-form {
        grid-column: span 2;
        display: grid;
        grid-template-columns: 360px 360px;
        place-content: start center;
        row-gap: 20px;
    }

    form.login {
        grid-column: span 2;
        place-content: start center;
    }

}

@media only screen and (900px < width <= 1024px) {

    .hidden-1024 {
        display: none;
    }

    .searchheader {
        grid-row: 1;
        grid-column: span 2;
    }

    .grid-container {
        display: grid;
        place-content: start center;
        grid-template-columns: 360px 360px;
        row-gap: 20px;
    }

    .table {
        font-size: medium;
    }

    .owner {
        text-align: center;
        font-size: large;
        font-weight: bold;
    }

    .title {
        grid-row: 2;
        grid-column: span 2;
        font-size: x-large;
    }

    .transfer {
        grid-column: span 2;
    }

    .tausch {
        grid-column: span 2;
    }

    .searchresult {
        grid-column: span 2;
    }

    .spieltag {
        grid-column: span 2;
    }

    .title-1 {
        grid-row: 1;
        grid-column: span 2;
    }

    .aufst-form {
        grid-column: span 2;
        display: grid;
        grid-template-columns: 360px 360px;
        place-content: start center;
        row-gap: 20px;
    }

    form.login {
        grid-column: span 2;
        place-self: center;
    }
}

@media only screen and (1024px < width) {

    .hidden-1440 {
        display: none;
    }

    .searchheader {
        grid-row: 1;
        grid-column: span 4;
    }

    .grid-container {
        display: grid;
        grid-template-columns: 360px 360px 360px 360px;
        place-content: start center;
        row-gap: 20px;
    }

    .table {
        font-size: medium;
    }

    .owner {
        text-align: center;
        font-size: large;
        font-weight: bold;
    }

    .title {
        grid-row: 2;
        grid-column: span 4;
    }

    .title-1 {
        grid-row: 1;
        grid-column: span 4;
    }

    .title-2 {
        grid-row: 3;
        grid-column: span 4;
    }

    .transfer {
        grid-column: span 4;
    }

    .tausch {
        grid-column: span 4;
    }

    .searchresult {
        grid-column: span 4;
    }

    .spieltag {
        grid-column: span 2;
    }

    .aufst-form {
        grid-column: span 4;
        display: grid;
        grid-template-columns: 360px 360px 360px 360px;
        place-content: start center;
        row-gap: 20px;
    }

    form.login {
        grid-column: 2 / span 2;
        place-self: center;
    }
}