:root {
    --main-bg-color: #CDCDCD;
    --main-fr-color: #555064;
    --main-sep-color: #484354;
    --main-fnt-color: #FFFFFF;
    --main-fnt-hover-color: #CDCDCD;
    --main-btt-color: #000000;
    --main-btt-hover-color: #FF0000;
    --main-btt-fnt-color: #FFFFFF;
    --main-btt-fr-color: #FFFFFF;
    --main-btt-fr-deact-color: #CDCDCD;
    --main-btt-ia-color: #444444;
    --main-btt-fnt-ia-color: #AAAAAA;
    --main-btt-fr-ia-color: #AAAAAA;
    --main-inp-fnt-color: #000000;
    --main-border-color: #CDCDCD;
    --impressum-color: #555064;
    --menu-fr-color: #303030;
    --menu-fnt-color: #CDCDCD;
    --menu-fnt-hover-color: #FFFFFF;
    --table-even-rows-color: #C7BCEB;
    --table-odd-rows-color: #D9CCFF;
    --modal-fr-color: #FFFFFF;
    --modal-fnt-color: #000000;
    --modal-hd-color: #555064;
    --modal-list-grey-entry: #DDDDDD;
  }

* {
    box-sizing: border-box;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
}

.menu-grid-container {
    display: grid;
    align-items: center;
    justify-items: center;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    column-gap: 0px;
    row-gap: 10px;
    background-color: var(--menu-fr-color);
    align-self: center;
    grid-template-columns: repeat(12, min-content) ;
}

.itemMenu {
    font-size: 1.2rem;
    padding: 0.2rem;
    color: var(--menu-fnt-color);
    display: inline;
}
.itemMenuText {
    display: none;
    text-decoration: none;
}
.itemMenuTextStandard {
    color: var(--menu-fnt-color);
    padding-bottom: 1rem;
    text-decoration: none;
}
.itemMenuTextHover {
    color: var(--menu-fnt-hover-color);
    padding-bottom: 1rem;
    text-decoration: none;
}

.menuIcon {
    height: 1.4rem;
    padding-left: 1rem;
}

a.buttonLink {
    text-decoration: none;
}
.MEN_homeIcon {
    grid-column: 1;
    grid-row: 1;
}
.MEN_home {
    grid-column: 2;
    grid-row: 1;
}

MEN_aboutUsIcon {
    grid-column: 3;
    grid-row: 1;
}
MEN_aboutUs {
    grid-column: 4;
    grid-row: 1;
}
MEN_danceIcon {
    grid-column: 5;
    grid-row: 1;
}
MEN_dance {
    grid-column: 6;
    grid-row: 1;
}
MEN_contactIcon {
    grid-column: 7;
    grid-row: 1;
}
MEN_contact {
    grid-column: 8;
    grid-row: 1;
}

MEN_impressumIcon {
    grid-column: 9;
    grid-row: 1;
}

MEN_impressum {
    grid-column: 10;
    grid-row: 1;
}

MEN_loginIcon {
    grid-column: 11;
    grid-row: 1;
}

MEN_login {
    grid-column: 12;
    grid-row: 1;
}
.separator {
    height: 0.5rem;
    width: 100%;
    background-color: var(--main-sep-color);
}

.plainHtml {
    text-align: left;
    font-size: 1rem;
    width: 100%;
    color: var(--main-fnt-color);
}
.plainHtml b {
    text-align: left;
    font-size: 1rem;
    font-weight: bold;
    color: var(--main-fnt-color);
}

.quote {
    align-items: left;
    text-align: left;
    width: 100%;
    color: var(--main-fnt-color);
    margin-top: 2rem;
    margin-left: 2rem;
    padding-left: 1rem;
    font-style: italic;
    border-left: 3px;
    border-left-style: solid;
    border-left-color: var(--main-border-color);
}
.tableInfo {
    padding: 0px;
    margin: 0px;
    align-items: center;
    width: 100%;
    color: var(--main-fnt-color);
}


.image {
    align-items: center;
    text-align: center;
    width: 100%;
    color: var(--main-fnt-color);
}

.items {
    align-items: center;
    width: 100%;
    color: var(--main-fnt-color);
}
.items b {
    font-weight: bold;
}


.itemsRight {
    align-items: right;
    text-align: right;
    width: 100%;
    color: var(--main-fnt-color);
}

.itemLabel {
    text-align: left;
    align-content: center;
    font-size: 1rem;
    color: var(--main-fnt-color);
}

.itemLabelLeft {
    text-align: left;
    align-content: center;
    font-size: 1rem;
    color: var(--main-fnt-color);
}
.itemLabelRight {
    text-align: right;
    align-content: center;
    font-size: 1rem;
    color: var(--main-fnt-color);
}
.labelBold {
    font-weight: bold;
}

.itemInfo {
    text-align: left;
    align-content: center;
    font-size: 1rem;
    color: var(--main-fnt-color);
}
.itemInput {
    text-align: left;
    align-content: center;
    font-size: 1rem;
    color: var(--main-inp-fnt-color);
    margin-right: 1rem;
}
.itemButton {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    color: var(--main-inp-fnt-color);
    margin-right: 1rem;
}

.standardInput {
    width: 100%;
}
.standardButtonLink {
    color: var(--main-btt-fnt-color);
}
.standardButtonLink:hover {
    color: var(--main-btt-hover-color);
}

.standardButtonLinkDeact {
    color: var(--main-btt-fnt-ia-color);
}
.standardButton {
    text-align: center;
    width: 100%;
    max-width: 30rem;
    background-color: var(--main-btt-color);
    color: var(--main-fnt-color);
    border: var(--main-btt-fr-color);
    border-style: solid;
    border-width: 0.1em;
}
.standardButtonDeact {
    text-align: center;
    width: 100%;
    max-width: 30rem;
    background-color: var(--main-btt-ia-color);
    color: var(--main-btt-fnt-ia-color);
    border: var(--main-btt-fr-ia-color);
    border-style: solid;
    border-width: 0.1em;
}

img.bttn {
    height: 2rem;
    width: 2rem;
    padding: 0px;
    overflow: hidden;
}
div.bttn {
    padding: 0px;
    margin: 0px;
}

.headLink {
    color: var(--main-fnt-color);
}
.centerHead {
    text-align: center;
}

.pageLink {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    color: var(--main-fnt-color);
}
.pageLink:hover {
    color: var(--main-fnt-hover-color);
}
.plainLink {
    color: var(--main-fnt-color);
}
.plainLink:hover {
    color: var(--main-fnt-hover-color);
}

.pagination {
    width: fit-content;
}

.iconButton {
    height: 90%;
    background: var(--main-btt-fr-color);
    align-content: center;
    display: inline-block;
}

.iconButton:hover {
    background: var(--main-btt-hover-color);
}
.iconButtonDeact {
    height: 90%;
    background: var(--main-btt-fr-deact-color);
    align-content: center;
    display: inline-block;
}

.standardInputMax {
    width: 100%;
}



.myCenter {
    align-content: center;
    height: 100%;
}

.myLeft {
    align-content: center;
    text-align: left;
    height: 100%;
}
thead.list,
tbody.list,
tr.list {
    display: contents;
}
  
th.list,
td.list {
    padding-left: 0.5rem;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: normal;
    font-size: 0.8rem;
}
  
th.list {
    position: sticky;
    top: 0;
    padding-bottom: 0.5rem;
    background: var(--main-fr-color);
    text-align: left;
    font-weight: normal;
    font-size: 1rem;
    color: white;
}
  
th.list:last-child {
    border: 0;
}

td.list {
    background: inherit;
}
  
tr.list:nth-child(even) td {
    background: var(--table-even-rows-color);
}
tr.list:nth-child(odd) td {
    background: var(--table-odd-rows-color);
}


thead.content,
tbody.content,
tr.content {
    display: contents;
}
  
th.content,
td.content {
    padding-bottom: 0px;
    padding-right: 0px;
}
  
th.content {
    top: 0;
    padding-bottom: 0.5rem;
    padding-top: 0px;
    padding-left: 0px;
    text-align: left;
    font-weight: bold;
    font-size: 1rem;
}
td.content {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    border-bottom: 3px;
    border-bottom-style: solid;
    border-bottom-color: var(--main-border-color);
}
td.content b {
    font-weight: bold;
}

th.contentPart,
td.contentPart {
    padding-bottom: 0px;
    padding-right: 0px;
}
  
th.contentPart {
    top: 0;
    padding-bottom: 0.1rem;
    padding-top: 0px;
    padding-left: 0px;
    text-align: left;
    font-weight: bold;
    font-size: 1rem;
}
td.contentPart {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    padding-left: 1rem;
}
td.contentPart b {
    font-weight: bold;
}

.modalItems {
    align-items: left;
    width: 100%;
    color: var(--modal-fnt-color);
}
.modalItemsRight {
    align-items: right;
    text-align: right;
    width: 100%;
    color: var(--modal-fnt-color);
}

.modalItemLabel {
    text-align: right;
    align-content: center;
    width: 100%;
    font-size: 1rem;
    color: var(--modal-fnt-color);
}

.modalHeader {
    text-align: left;
    font-size: 1.5rem;
    color: var(--modal-hd-color);
}
.modalLink {
    color: var(--modal-fnt-color);
}
.modalLink:hover {
    color: var(--main-btt-hover-color);
}
@media screen and (min-width: 900px) {
    .itemMenuText {
        display: inline;
    }
}
@media screen and (min-width: 600px) {
    .itemLabel {
        text-align: right;
        font-size: 1rem;
        color: var(--main-fnt-color);
    }

    .itemInfo {
        text-align: left;
        align-content: center;
        font-size: 1rem;
        color: var(--main-fnt-color);
    }
    .standardInput {
        width: 80%;
        max-width: 30rem;    
    }
    .smallInput {
        max-width: 3rem;    
    }
    .standardButton {
        text-align: center;
        width: 100%;
        max-width: 30rem;
        background-color: var(--main-btt-color);
        color: var(--main-fnt-color);
        border: var(--main-btt-fr-color);
        border-style: solid;
        border-width: 0.1em;
    }
    .standardButtonDeact {
        text-align: center;
        width: 100%;
        max-width: 30rem;
        background-color: var(--main-btt-ia-color);
        color: var(--main-btt-fnt-ia-color);
        border: var(--main-btt-fr-ia-color);
        border-style: solid;
        border-width: 0.1em;
    }
    .standardInput {
        width: 100%;
        max-width: 30rem;
    }
}