/*##################################
	Eingebundene Webfonts
####################################*/


@font-face {
    font-family: 'sarabunextrabold';
    src: url('../ttf/sarabun-extrabold-webfont.woff2') format('woff2'),
         url('../ttf/sarabun-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/*##################################
	Generelle Einstellungen
####################################*/

html{
	max-width: 100vw;
	max-height: 100vw;
}

body{
    display: block;
    position: relative;
    top: -1vw;
    left: -1.35vw;
    width: 99.6vw;
    height: 99vh;
    z-index: 0;
    background: #F23B3F;
    align-items: center;
    justify-content: center;
    padding-bottom: 0.5vw;
    padding-top: 0.25vw;

}

#backgroundContainer {
    display: block;
    position: fixed;
    width: 99.7vw;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    background-image: url('../img/icons/backgroundWeb.png');
    background-repeat: repeat-y;
    background-size: 100%;
}

.fullscreen-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: scroll;
  }
  
  .fullscreen-lightbox img {
    max-width:  95%;
    max-height: 95%;
    object-fit: fill;
    cursor: url('../img//icons/zoomIn.png'), zoom-out;
  }
  

/*
##################################
	Header
##################################
*/


/*
##################################
	Navigationsleiste
##################################
*/

#navigationsleiste{
    z-index: 3;
    display: grid;
    position: relative;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    width: 100%;
    height: 2vw;
    margin-top: 4vw;
    grid-template-columns: 6.66% 6.66% 6.66% 20% 20% 20% 20%;
    grid-template-rows: 28.5% 43% 28.5%;
    align-items: center;
    margin-left: auto;
    margin-right: auto;

}


#navItem_01{
    z-index: 3; 
    display: block;
    position: relative;
    grid-column-start: 4;
    grid-row-start: 2;
    position: relative;
    top: 50%;
    text-decoration: none;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    padding-bottom: 4%;
    margin-left: auto;
    margin-right: auto;
    color: #ffffff;
    text-shadow: -0.12vw -0.12vw #F23B3F;
}

#navItem_02{ 
    z-index: 3;
    display: block;
    position: relative;
    grid-column-start: 5;
    grid-row-start: 2;
    position: relative;
    top: 50%;
    text-decoration: none;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    padding-bottom: 4%;
    margin-left: auto;
    margin-right: auto;
    color: #ffffff;
    text-shadow: -0.12vw -0.12vw #F23B3F;
}

#navItem_03{
    z-index: 3;
    display: block;
    position: relative;
    top: 60%;
    grid-row-start: 2;
    grid-column-start: 1;
    grid-column-end: 4;
    position: relative;
    text-decoration: none;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    padding-bottom: 4%;
    margin-left: auto;
    margin-right: auto;
    
}

#nav_logo{
    z-index: 3;
    width: 8vw;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

#navItem_04{ 
    z-index: 3;
    display: block;
    position: relative;
    grid-column-start: 6;
    grid-row-start: 2;
    position: relative;
    top: 50%;
    text-decoration: none;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    padding-bottom: 4%;
    margin-left: auto;
    margin-right: auto;
    color: #ffffff;
    text-shadow: -0.12vw -0.12vw #F23B3F;
}

#navItem_05{ 
    z-index: 3;
    display: block;
    position: relative;
    grid-column-start: 7;
    grid-row-start: 2;
    position: relative;
    top: 50%;
    text-decoration: none;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    padding-bottom: 4%;
    margin-left: auto;
    margin-right: auto;
    color: #ffffff;
    text-shadow: -0.12vw -0.12vw #F23B3F;
}

#navItem_01:hover, #navItem_02:hover, #navItem_04:hover, #navItem_05:hover {
    color: #ffee02;
}

/*
##################################
	Footer
##################################
*/


#footer{
    z-index: 3;
    display: grid;
    grid-template-columns: 4vw 8vw 6vw 6vw 6vw 1vw 54vw ;
    position:relative;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    width: 100%;
    height: 2vw;
    align-items: flex-start;
    text-decoration: none;

}

#footerImpressum, #footerHome, #footerVerein, #footerGalerie, #footerKontakt{
    z-index: 3;
    display: block;
    text-decoration: none;
    color: #ffffff;
    font-family: 'sarabunextrabold';
    top:0.3vw;
    left:1.2vw;
    font-size: 1vw;
    position:relative;
    width: 100%;
    height: 2vw;
    padding:0.25vw;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
}

#footerAdmin{
    z-index: 3;
    display: none;
    text-decoration: none;
    color: #ffffff;
    font-family: 'sarabunextrabold';
    grid-column-start: 6;
    grid-row-start: 1;
    top: 0.3vw;
    left: 2.2vw;
    font-size: 1vw;
    position: relative;
    width: 10vw;
    height: 2vw;
    padding: 0.25vw;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
}

#footerLoginContainer{
    grid-column-start: 6;
    grid-row-start: 1;
    display: grid;
    grid-gap: 1vw;
    position: relative;
    grid-template-columns: 34% 34% 30%;
    width:17vw;
    margin-left: 7vw;
    margin-right: auto;
    align-items: center;
    top:0.3vw;
    left:42vw; 
}

#footerLogin1{
    grid-column-start: 1;
    width: 5vw;
    height: 0.8vw;
    z-index: 3;
    display: block;
    position: relative;
    top:-0.05vw; 
    text-decoration: none;
    color: #000000;
    font-family: 'sarabunextrabold';
    font-size: 0.8vw;
    padding:0.25vw;
    opacity: 0%;
    margin-left: auto;
    margin-right: auto;
    border:none;
    pointer-events: "auto"; 
    
}

#footerLogin2{
    grid-column-start: 2;
    width: 5vw;
    height: 0.8vw;
    position: relative;
    top:-0.05vw; 
    z-index: 3;
    display: block;
    text-decoration: none;
    color: #000000;
    font-family: 'sarabunextrabold';
    font-size: 0.8vw;
    padding:0.25vw;
    opacity: 0%;
    margin-left: auto;
    margin-right: auto;
    border:none;
    pointer-events: "auto"; 
}

#footerLogin3{
    grid-column-start: 3;
    grid-row-start: 1;
    width: 5vw;
    z-index: 3;
    display: none;
    position: relative;
    text-decoration: none;
    color: #ffffff;
    font-family: 'sarabunextrabold';
    font-size: 1vw;
    padding:0.25vw;
    border:none;
    background: none;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

#footerLogin5{    
    grid-column-start: 8;
    grid-row-start: 1;
    width: 5vw;
    z-index: 4;
    left: -4vw;
    display: none;
    position: relative;
    bottom: 0.7vw;
    text-decoration: none;
    color: #ffffff;
    font-family: 'sarabunextrabold';
    font-size: 1vw;
    padding:0.25vw;
    border:none;
    background: none;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
}

#footerConfirmDelete{
    display: grid;
    position: relative;
    grid-gap: 1vw;
    left: -16vw;
    top: 0.1vw;
    grid-column-start: 8;
    grid-row-start: 1;
    margin-left: auto;
    margin-right: auto;
    width: 30vw;
    grid-template-columns: 55% 10% 15%;
}

#footerLogin6{
    display: none;
    width: 20vw;
    height: auto;
    position: relative;
    left: 2vw;
    top: 0.5vw;
    text-decoration: none;
    color: #ffffff;
    font-family: 'sarabunextrabold';
    font-size: 1vw;
    margin-top: auto; 
}

#footerLogin7{    
    display: none;
    position: relative;
    left: 2vw;
    width: 3vw;
    text-decoration: none;
    color: #ffffff;
    font-family: 'sarabunextrabold';
    font-size: 1vw;
    padding:0.25vw;
    background: none;
    border: none;
    cursor: pointer;
     
}
#footerLogin8{    
    display: none;
    position: relative;
    left: 2vw;
    width: 4vw;
    text-decoration: none;
    color: #ffffff;
    background: none;
    border: none;
    font-family: 'sarabunextrabold';
    font-size: 1vw;
    padding:0.25vw;
    cursor: pointer;
}

#footerAdmin:hover, #footerImpressum:hover, #footerHome:hover, #footerVerein:hover, #footerGalerie:hover, #footerKontakt:hover, #footerLogin3:hover, #footerLogin4:hover, #footerLogin5:hover, #footerLogin7:hover, #footerLogin8:hover{
    color: #ffee02;
}


/*
##################################
Index
##################################
*/

#mainIndex{
    display: grid;
    z-index: 1;
    width: 100%;
    grid-template-columns: 70vw 30vw;
    grid-template-rows: 23vw auto;
    min-height: 54vw;
    height: auto;
    position: relative;
    top: -4.8vw;
    margin-bottom: 2vw;
    padding-top: 2.5vw;
}

#Willkommensbanner{
    display: grid;
    grid-row-start: 1;
    grid-template-columns: 15% 65% 15%;
    grid-template-rows: 100%;
    position: relative;
    width: 62vw;
    height: fit-content;
    top: 6.5vw;
    left: 6.4vw;
    grid-column-start: 1;
    margin-bottom: 8vw;
    margin-right: auto;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    padding-top: 2vw;
    padding-bottom: 2vw;
    justify-content: center;
    align-items: center;
}

#wappenBDK{
    display: block;
    width: 10vw;
    height: auto;
    position: relative;
    grid-column-start: 1;
    grid-row-start: 1;
    margin-left: auto;
    margin-right: auto;
}

#wappenBDKImageEditBN{
    display:none;
    width: 2vw;
    height: 2vw;
    position: relative;
    grid-row-start: 2;
    grid-column-start: 2;
    z-index: 8;
    background-color: #00199990;
    background-image: url("../img//icons/editicon.png");
    background-repeat: no-repeat;
    background-size:1.5vw;
    background-position: center;
    cursor:pointer;
    margin-top: auto;
    margin-bottom: auto;
    margin-right:auto;
    top: -.5vw;
    right: -0.5vw;
}

#wappenBDKImageEditBN:hover{
    background-image: url("../img//icons/editiconHover.png");
}

#wappenBDKChangeImageForm{
    grid-row-start: 1;
    grid-column-start: 1;
    grid-template-rows: 50% 50%;
    display:none;
    grid-gap: 0.5vw;
    width: 10.5vw;
    height: 6vw;
    position: relative;
    z-index: 8;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    opacity: 100%;
    margin-top: auto;
    margin-bottom: auto;
}

#wappenBDKChangeImageNewImageName{
    display: block;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    width: 10vw;
    height: 1vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    font-family: 'sarabunextrabold';
    font-size: 1vw;
    color: #ffffff;
    padding-bottom: 0.55vw;
    padding-top: 0.55vw;
    padding-left: 0.25vw;
    padding-right: 0.25vw;
    margin-left: 0.25vw;
    cursor: pointer;
}
    
#wappenBDKChangeImageNewImageName::-webkit-file-upload-button, #wappenBDKChangeImageNewImageName::file-selector-button{
    width: 1vw;
    background-color: transparent;
    background-image: url("../img//icons/imageFile.png");
    background-repeat: no-repeat;
    background-size:1.2vw;
    background-position: center;
    border: none;
    font-family: 'sarabunextrabold';
    color:#ffffff00;
    grid-row-start: 1;
    grid-row-end: 4;
}

#wappenBDKChangeImageSubmit{
    display: block;
    position: relative;
    grid-row-start: 2;
    grid-column-start: 1;
    width: 2.25vw;
    height: 2.25vw;
    font-size: 0vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    background-image: url("../img//icons/sendIcon.png");
    background-repeat: no-repeat;
    background-size:1.0vw;
    background-position: center;
    border: none;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
}

#wappenBDKChangeImageSubmit:hover{
    background-image: url("../img//icons/sendIcon_hover.png");

}

#wappenBDKDeleteImageSubmit{
    display: block;
    position: relative;
    grid-row-start: 2;
    grid-column-start: 2;
    width: 2.25vw;  
    height: 2.25vw;
    font-size: 0vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    background-image: url("../img/icons/trash.png");
    background-repeat: no-repeat;
    background-size:1vw;
    background-position: center;
    border: none;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
}

#wappenBDKAbortImageChange{
    display: block;
    position: relative;
    grid-row-start: 2;
    grid-column-start: 3;
    width: 2.25vw;  
    height: 2.25vw;
    font-size: 0vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    background-image: url("../img/icons/cross.png");
    background-repeat: no-repeat;
    background-size:1vw;
    background-position: center;
    border: none;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
}

#wappenBPK{
    display: block;
    width: 10vw;
    height: auto;
    position: relative;
    grid-column-start: 3;
    grid-row-start: 1;
    margin-left: auto;
    margin-right: auto;
}

#wappenBPKImageEditBN{
    display:none;
    width: 2vw;
    height: 2vw;
    position: relative;
    grid-row-start: 2;
    grid-column-start: 3;
    z-index: 8;
    background-color: #00199990;
    background-image: url("../img//icons/editicon.png");
    background-repeat: no-repeat;
    background-size:1.5vw;
    background-position: center;
    cursor:pointer;
    margin-top: auto;
    margin-bottom: auto;
    margin-left:auto;
    top: -0.5vw;
    right: -0.5vw;
}

#wappenBPKImageEditBN:hover{
    background-image: url("../img//icons/editiconHover.png");
}

#wappenBPKChangeImageForm{
    grid-row-start: 1;
    grid-column-start: 3;
    grid-template-rows: 50% 50%;
    display:none;
    left: -1vw;
    grid-gap: 0.5vw;
    width: 10.5vw;
    height: 6vw;
    position: relative;
    z-index: 8;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    opacity: 100%;
    margin-top: auto;
    margin-bottom: auto;
}

#wappenBPKChangeImageNewImageName{
    display: block;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    width: 10vw;
    height: 1vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    font-family: 'sarabunextrabold';
    font-size: 1vw;
    color: #ffffff;
    padding-bottom: 0.55vw;
    padding-top: 0.55vw;
    padding-left: 0.25vw;
    padding-right: 0.25vw;
    margin-left: 0.25vw;
    cursor: pointer;
}
    
#wappenBPKChangeImageNewImageName::-webkit-file-upload-button, #wappenBPKChangeImageNewImageName::file-selector-button{
    width: 1vw;
    background-color: transparent;
    background-image: url("../img//icons/imageFile.png");
    background-repeat: no-repeat;
    background-size:1.2vw;
    background-position: center;
    border: none;
    font-family: 'sarabunextrabold';
    color:#ffffff00;
    grid-row-start: 1;
    grid-row-end: 4;
}

#wappenBPKChangeImageSubmit{
    display: block;
    position: relative;
    grid-row-start: 2;
    grid-column-start: 1;
    width: 2.25vw;
    height: 2.25vw;
    font-size: 0vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    background-image: url("../img//icons/sendIcon.png");
    background-repeat: no-repeat;
    background-size:1.0vw;
    background-position: center;
    border: none;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
}

#wappenBPKChangeImageSubmit:hover{
    background-image: url("../img//icons/sendIcon_hover.png");

}

#wappenBPKDeleteImageSubmit{
    display: block;
    position: relative;
    grid-row-start: 2;
    grid-column-start: 2;
    width: 2.25vw;  
    height: 2.25vw;
    font-size: 0vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    background-image: url("../img/icons/trash.png");
    background-repeat: no-repeat;
    background-size:1vw;
    background-position: center;
    border: none;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
}

#wappenBPKAbortImageChange{
    display: block;
    position: relative;
    grid-row-start: 2;
    grid-column-start: 3;
    width: 2.25vw;  
    height: 2.25vw;
    font-size: 0vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    background-image: url("../img/icons/cross.png");
    background-repeat: no-repeat;
    background-size:1vw;
    background-position: center;
    border: none;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
}



#welcomeDesktop{
    grid-row-start: 1;
    font-family: 'sarabunextrabold';
    font-size: 2vw;
    color: #ffffff;
    text-align: center;
}

#welcomeDesktopEditBN{
    display:none;
    width: 2vw;
    height: 2vw;
    position: relative;
    grid-row-start: 2;
    grid-column-start: 2;
    z-index: 8;
    background-color: #00199990;
    background-image: url("../img//icons/editicon.png");
    background-repeat: no-repeat;
    background-size:1.5vw;
    background-position: center;
    cursor:pointer;
    margin-top: auto;
    margin-bottom: auto;
    margin-left:auto;
    margin-right: 4vw;
    top: -0.5vw;
}

#welcomeDesktopEditBN:hover{
    background-image: url("../img//icons/editiconHover.png");
}

#welcomeDesktopChangeTextForm{
    grid-row-start: 1;
    grid-column-start: 2;
    display:none;
    grid-template-columns: 80%;
    grid-template-rows: auto auto;
    grid-gap: 0.5vw;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 8;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    opacity: 100%;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 5vw;
    margin-right: auto;
}

#welcomeDesktopChangeTextInput{
    display: block;
    grid-row-start: 1;
    grid-column-start: 1;
    position: relative;
    width: inherit;
    resize: none;
    color: #000000;
    font-family: 'sarabunextrabold';
    font-size: 2vw;
    line-height: 1.2;
    text-align: center;
}


#welcomeDesktopChangeTextblockSubmit{
    display: block;
    position: relative;
    grid-row-start: 2;
    grid-column-start: 1;
    width: 2.25vw;
    height: 2.25vw;
    font-size: 0vw;
    background-color: transparent;
    background-image: url(../img//icons/sendIcon.png);
    background-repeat: no-repeat;
    background-size: 2vw;
    background-position: center;
    border: none;
    cursor: pointer;
    margin-left: auto;
    margin-right: 4vw;
    margin-top: 0.4vw;
}

#welcomeDesktopChangeTextblockSubmit:hover{
    background-image: url("../img//icons/sendIcon_hover.png");

}

#welcomeDesktopAbortTextChange{
    display: block;
    position: relative;
    grid-row-start: 2;
    grid-column-start: 1;
    width: 2.25vw;
    height: 2.25vw;
    font-size: 0vw;
    background-color: transparent;
    /* outline: 0.25vw solid #ffee02; */
    background-image: url(../img/icons/cross.png);
    background-repeat: no-repeat;
    background-size: 2vw;
    background-position: center;
    border: none;
    cursor: pointer;
    margin-left: auto;
    margin-right: 0vw;
    margin-top: 0.4vw;
}

#welcomeDesktopAbortTextChange:hover{
    background-image: url("../img//icons/crossHover.png");

}

/* 
BLOG
##################################
*/

/*
ADD Blog Entry
##################################
*/

#ShowBlogFormBN{
    display: none;
    width: 18vw;
    height: 1.25vw;
    text-align: center;
    position: relative;
    left: 1.5vw;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4vw;
    padding: 1.5vw;
    cursor: pointer;
}

#ShowBlogFormBN:hover{
    color: #ffee02;
}

#addBlogEntry{
    display: none;
    position: relative;
    grid-template-rows:auto;
    grid-gap: 1vw;
    width: 61vw;
    height: auto;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    left: 6.5vw;
    margin-top: 4vw;
}

#BlogTitleInput{
    display: inherit;
    width: 61vw;
    height: 2vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    border: none;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    padding-left:1vw;
    
}

#BlogContentInput{
    display: inherit;
    width: 60vw;
    height: 25vw;
    line-height: 1.2;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    border: none;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    resize: none;
    padding:1vw;
    
}

/*
ADD Blog Image
##################################
*/

#addImageContainer_01, #addImageContainer_02, #addImageContainer_03, #addImageContainer_04, #addImageContainer_05, #addImageContainer_06, #addImageContainer_07, #addImageContainer_08, #addImageContainer_09, #addImageContainer_10{
    display: none;
    grid-template-columns: 20% 70% 10%;
    align-items: center;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    padding-left: 1vw;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
}


.BlogBildNR{
    display: block;
    width: 5vw;
    position: relative;
    grid-column-start: 1;
    
}

.AddBlogImageInputField{
    display: inherit;
    width: 50%;
    grid-column-start: 2;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    cursor: pointer;
}

.AddBlogImageInputField:hover{
    color:#ffee02;
}

.AddBlogImageInputField::-webkit-file-upload-button, .AddBlogImageInputField::file-selector-button{
    width: 3vw;
    height: 3vw;
    background-color: transparent;
    background-image: url("../img//icons/imageFile.png");
    background-repeat: no-repeat;
    background-size:contain;
    background-position: center;
    border: none;
    font-family: 'sarabunextrabold';
    color:#ffffff00;
    cursor: pointer;
}


#blogImage_01_Preview, #blogImage_02_Preview, #blogImage_03_Preview, #blogImage_04_Preview, #blogImage_05_Preview, #blogImage_06_Preview, #blogImage_07_Preview, #blogImage_08_Preview, #blogImage_09_Preview, #blogImage_10_Preview{
    display:none;
    z-index: 4;
    grid-row-start: 1;
    grid-column-start: 2;
    width: auto;
    height: 10vw;
    position: relative;
    align-items: center;
    z-index: 5;
    grid-column-start: 2;
    grid-template-rows: 1;
    padding-top: 1vw;
    padding-bottom: 1vw;

}

.clearBlogimageBN{
    display: none;
    grid-row-start: 1;
    grid-column-start: 2;
    opacity: 70%;
    margin-bottom: auto;
    margin-right: auto;
    z-index: 5;
    left: 0.2vw;
    position: relative;  
    width: 3vw;
    height: 3vw;
    pointer-events: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
    cursor: pointer;
    overflow: hidden; 
    outline: none;
    background-color: transparent;
    background-image: url("../img//icons/removeSignRotSemiTransparent.png");
}

.clearBlogimageBN:hover{
    opacity: 100%;
}

.AddBlogImageBN{
    display: none;
    height: 0.1vw;
    position: relative;
    top: -1.2vw;
    grid-row-start: 2;
    grid-column-start: 2;
    cursor: pointer;
}

.AddBlogImageBN:hover{
    color: #ffee02;
}

#blogSubmitBN{
    display:inherit;
    position: relative;
    width:100%;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    border: none;   
    text-align: center;
    cursor: pointer;
    height: 2vw;
    top:-2vw;
}

#blogResetBN{
    display:inherit;
    position: relative;
    width:100%;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    border: none;   
    text-align: center;
    cursor: pointer;
    height: 2vw;
    top:-2vw;
}


#ShowInput_01{
    display: inherit;
    width: 100%;
    position: relative;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    border: none;
    text-align: center;
    cursor: pointer;
    height: 1vw;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    top: -1vw;
}

#closeBlogForm{
    display:inherit;
    width: 6vw;
    margin-left: auto;
    position: relative;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    border: none;   
    text-align: center;
    cursor: pointer;
    height: 1.8vw;
    padding: 0.5vw;
    top:1.2vw;
}

#blogSubmitBN:hover, #ShowInput_01:hover, #blogResetBN:hover, #closeBlogForm:hover{
    color: #ffee02;
}



/*
Darstellung BLOG auf Index
##################################
*/

#blog{
    display: block;
    position: relative; 
    grid-column-start: 1;
    grid-row-start: 2;
    width: 65vw;
    height: auto;
    margin-right: auto;

}

.showImagesBN{
    display: none;
}

.blogImageGrid_small_06{
    display: grid;
    grid-template-columns: repeat(3, 15vw);
    grid-template-rows: repeat(3, 15vw);
    grid-gap: 0.5vw;
    width: 45vw;
    height: 45vw;
    margin: 0;
    padding: 1vw;
    border-spacing: 0;
    margin-left: auto;
    margin-right: auto;
    padding-bottom:3vw;
  }

.blogImageGrid_small_04{
    display: grid;
    grid-template-columns: repeat(3, 15vw);
    grid-template-rows: repeat(2, 15vw);
    grid-gap: 0.5vw;
    width: 45vw;
    height: 30vw;
    margin: 0;
    padding: 1vw;
    border-spacing: 0;
    margin-left: auto;
    margin-right: auto;
    padding-bottom:3vw;
  }

  .blogImageGrid_small_03{
    display: grid;
    grid-template-columns: repeat(3, 15vw);
    grid-gap: 0.5vw;
    width: 45vw;
    height: 15vw;
    margin: 0;
    padding: 1vw;
    border-spacing: 0;
    margin-left: auto;
    margin-right: auto;
    padding-bottom:3vw;
  }
  
  .blogImageGrid_medium_02{
    display: grid;
    grid-template-columns: repeat(2, 22.5vw);
    grid-gap: 0.5vw;
    width: 45vw;
    height: 22.5vw;
    margin: 0;
    padding: 1vw;
    border-spacing: 0;
    margin-left: auto;
    margin-right: auto;
    padding-bottom:3vw;
  }

  .blogImageGrid_medium_04{
    display: grid;
    grid-template-columns: repeat(2, 22.5vw);
    grid-gap: 0.5vw;
    width: 45vw;
    height: 45vw;
    margin: 0;
    padding: 1vw;
    border-spacing: 0;
    margin-left: auto;
    margin-right: auto;
    padding-bottom:3vw;
  }


  .blogImageGrid_large{
    display: grid;
    grid-template-columns: repeat(1, 45vw);
    grid-gap: 0.5vw;
    width: 45vw;
    height: 45vw;
    margin: 0;
    padding: 0;
    border-spacing: 0;
    margin-left: auto;
    margin-right: auto;
    padding-bottom:3vw;
  }
  
  .blogGridItem{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    align-items:center;
    position: relative;
    z-index: 7;
    justify-content: center;
    margin: 0;
    overflow: hidden;
    background-color: #00000078;
  }
  
  .blogGridImage{
    display: block;
    grid-row-start: 1;
    grid-column-start: 1;
    position: relative;
    z-index: 7;
    padding: 0;
    width: auto;
    height: 100%; 
    object-fit: contain;
    margin: auto;
    cursor: url('../img//icons/zoomIn.png'), zoom-in;
  }

  .blogEditImage{
    display:none;
    width: 2vw;
    height: 2vw;
    position: relative;
    right: 0.5vw;
    bottom: -1vw;
    grid-row-start: 1;
    grid-column-start: 1;
    z-index: 8;
    background-color: #00199990;
    background-image: url("../img//icons/editicon.png");
    background-repeat: no-repeat;
    background-size:1.5vw;
    background-position: center;
    margin-top: auto;
    margin-left: auto;
    cursor:pointer
  }

.blogEditImage:hover{
    background-image: url("../img//icons/editiconHover.png");

  }

  .blogAbortImageChange{
    display: block;
    position: relative;
    left: -2.5vw;
    top: 0.05vw;
    grid-row-start: 1;
    grid-column-start: 4;
    width: 1.75vw;  
    height: 1.75vw;
    font-size: 0vw;
    background-color: #001a99;
    outline: 0.15vw solid #ffee02;
    background-image: url("../img/icons/cross.png");
    background-repeat: no-repeat;
    background-size:1vw;
    background-position: center;
    border: none;
    margin-left:0.25vw;
    cursor: pointer;
  }

  .blogAbortImageChange:hover{
    background-image: url("../img/icons/crossHover.png");

  }

.updateImageForm{
    grid-row-start: 1;
    grid-column-start: 1;
    display:none;
    grid-gap: 0.5vw;
    width: 18vw;
    height: 2vw;
    position: relative;
    z-index: 8;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    opacity: 100%;
    margin-right: auto;
    margin-top: auto;
    bottom:0.5vw;
}

.changeBlogImageFileInput{
display: block;
grid-column-start: 1;
width: 7vw;
height: 1vw;
background-color: #001a99;
outline: 0.15vw solid #ffee02;
font-family: 'sarabunextrabold';
font-size: 0.8vw;
color: #ffffff;
padding-bottom:0.35vw;
padding-top: 0.35vw;
padding-left:0.25vw;
padding-right:0.25vw;
margin-left: 0.25vw;
cursor: pointer;
}

.changeBlogImageFileInput:hover{
    color: #ffee02;
}

.changeBlogImageFileInput::-webkit-file-upload-button, .changeBlogImageFileInput::file-selector-button{
    width: 1vw;
    background-color: transparent;
    background-image: url("../img//icons/imageFile.png");
    background-repeat: no-repeat;
    background-size:1.0vw;
    background-position: center;
    border: none;
    font-family: 'sarabunextrabold';
    color:#ffffff00;
    cursor: pointer;
}

.blogChangeImageSubmit{
display: block;
position: relative;
left: -0.9vw;
grid-row-start: 1;
grid-column-start: 2;
width: 1.75vw;
height: 1.75vw;
font-size: 0vw;
background-color: #001a99;
outline: 0.15vw solid #ffee02;
background-image: url("../img//icons/sendIcon.png");
background-repeat: no-repeat;
background-size:1.0vw;
background-position: center;
border: none;
cursor: pointer;
}

.blogDeleteImageSubmit{
    display: block;
    position: relative;
    left: -2.1vw;
    grid-row-start: 1;
    grid-column-start: 3;
    width: 1.75vw;  
    height: 1.75vw;
    font-size: 0vw;
    background-color: #001a99;
    outline: 0.15vw solid #ffee02;
    background-image: url("../img//icons/trash.png");
    background-repeat: no-repeat;
    background-size:0.6vw;
    background-position: center;
    border: none;
    margin-left:0.25vw;
    cursor: pointer;
}


.blogChangeImageSubmit:hover{
    background-image: url("../img//icons/sendIcon_hover.png")
}

.blogDeleteImageSubmit:hover{
    background-image: url("../img//icons/trashHover.png    ")

}

#Meldung{
    display:block;
    position: relative;
    top: 10em;
    width: 50vw;
    justify-content: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color: #ffffff;
    text-decoration: none;
    font-family: 'sarabunextrabold';
    font-size: 2vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    padding-top: 2vw;
    padding-bottom: 2vw;
}

.blogpost{
    display:grid;
    position: relative;
    left: 1.5vw;
    width: inherit;
    height: auto;
    grid-template-columns: 8% 92%;
    grid-template-rows : 99% 1%;
    justify-content: center;
}

.blogediticon:hover{
    background-image: url("../img//icons/editiconHover.png");
}

.blogdeleteiconForm{
    display: grid;
    position: relative;
    z-index: 7;
    grid-column-start: 2 ;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-template-columns: 70% 15% 15%;
    top:-5.5vw;
    left:1.2vw;
    width: 15vw;
    height: 2vw;
    align-items: center;
    margin-left:auto;
    margin-top: auto;
    justify-content: center;
}
.blogdeleteicon{
    display: none;
    position: relative;
    z-index: 7;
    grid-column-start: 3;
    grid-row-start: 1;
    width: 1.5vw;
    height: inherit;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: 2vw;
    outline: none;
    border: none;
    background: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../img//icons/trash.png");
    cursor: pointer;
    pointer-events: all;
}
.blogDeleteConfirm{
    display: none;
    position: relative;
    grid-column-start: 1;
    grid-row-start: 1;
    z-index: 7;
    width: 10vw;
    height: inherit;
    cursor: none;
    pointer-events: none;
    color: #ffffff;
    text-decoration: none;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: 3vw;
}
.blogDeleteConfirmYes{
    display: none;
    position: relative;
    top: -0.5vw;
    left: -0.5vw;
    grid-column-start: 2;
    grid-row-start: 1;
    width: 1.8vw;
    height: inherit;
    outline: none;
    border: none;
    background: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../img//icons/tick.png");
    cursor: pointer;
    pointer-events: all;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: 3vw;
}

.blogDeleteConfirmNo{
    display: none; 
    position: relative;
    top: -0.5vw;
    grid-column-start: 3;
    grid-row-start: 1;
    width: 1.8vw;
    height: inherit;
    outline: none;
    border: none;
    background: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("../img/icons/cross.png");
    cursor: pointer;
    pointer-events: all;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: 3vw;    
}

.blogDeleteConfirmNo:hover{
    background-image: url("../img/icons/crossHover.png");
}

.blogdeleteicon:hover{
    background-image: url("../img//icons/trashHover.png");

}

.blogDeleteConfirmYes:hover{
    background-image: url("../img//icons/tickHover.png");
}

.blogDeleteConfirmNo:hover{
    background-image: url("../img/icons/crossHover.png");
}

.blogTitle{
    display:block;
    position: relative;
    z-index: 6;
    width: 55vw;
    text-align: center;
    grid-row-start: 1;
    grid-column-start: 1;
    margin-left: auto;
    margin-right: auto;
}

.blogChangeTitleBN{
    display: none;
    width: 2vw;
    height: 2vw;
    position: relative;
    left:57vw;
    top: -0.4vw;
    grid-row-start: 1;
    grid-column-start: 1;
    z-index: 7;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 1.5vw;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    background-color: transparent;
    padding: 1vw;
    background-image: url("../img//icons/editicon.png");
}

.blogChangeTitleForm{
    display: none;
    position: relative;
    top:1vw;
    width: 55vw;
    height: 6vw;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
    margin-left: auto;
    margin-right: auto;
}

.blogChangeTitleInput{
    display: block;
    width: inherit;
    height:2vw;
    text-align: center;
    grid-column-start: 1;
    grid-column-end: 2;
    color: #000000;
    text-decoration: none;
    text-align: center;
    font-family: 'sarabunextrabold';
    font-size: 1.5vw;
}

.blogChangeTitleSubmit{
    display: block;
    width: 2vw;
    height: 2vw;
    grid-row-start: 2;
    grid-column-start: 2;
    position: relative;
    left: 23.5vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 1.5vw;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    background-color: transparent;
    padding: 1vw;
    background-image: url("../img//icons/sendIcon.png");
}

.blogChangeTitleAbort{
    display: block;
    position: relative;
    left: 26vw;
    width: 2vw;
    height: 2vw;
    grid-row-start: 2;
    grid-column-start: 2;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 2vw;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    background-color: transparent;
    padding: 1vw;
    background-image: url("../img//icons/resetIcon.png");
}

.blogChangeTitleBN:hover{
    background-image: url("../img//icons/editiconHover.png");
}

.blogChangeTitleSubmit:hover{
    background-image: url("../img//icons/sendIcon_hover.png");
}

.blogChangeTitleAbort:hover{
    background-image: url("../img//icons/resetIconHover.png");
}

.blogSeperator{
    display: block;
    width:inherit;
    border: 0.1vw solid #ffee02;
}

.blogContent{
    display:block;
    position: relative;
    z-index: 6;
    width: 50vw;
    text-align: center;
    grid-row-start: 3;
    grid-column-start: 1;
    margin-left: auto;
    margin-right: auto;
}

.blogChangeContentBN{
    display: none;
    width: 2vw;
    height: 2vw;
    position: relative;
    left:57vw;
    margin-bottom: auto;
    top: -1vw;
    grid-row-start: 3;
    grid-column-start: 1;
    z-index: 7;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 1.5vw;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    background-color: transparent;
    padding: 1vw;
    background-image: url("../img//icons/editicon.png");
}

.blogChangeContentBN:hover{
    background-image: url("../img//icons/editiconHover.png");

}

.blogChangeContentForm{
    display: none;
    position: relative;
    grid-row-start: 3;
    grid-column-start: 1;
    top: 1.5vw;
    width: 50vw;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 3vw;
}

.blogChangeContentInput{
    display: block;
    position: relative;
    width: inherit;
    resize: none;
    color: #000000;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    line-height: 1.2;
    text-align: center;
}

.blogChangeContentSubmit{
    display: block;
    width: 2vw;
    height: 2vw;
    left:-4.5vw;
    top:0.5vw;
    grid-row-start: 2;
    grid-column-start: 2;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 1.5vw;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    background-color: transparent;
    padding: 1vw;
    background-image: url("../img//icons/sendIcon.png");
}

.blogChangeContentSubmit:hover{
    background-image: url("../img//icons/sendIcon_hover.png");

}

.blogChangeContentAbort{
    display: block;
    position: relative;
    width: 2vw;
    height: 2vw;
    left:-2vw;
    top:0.5vw;
    grid-row-start: 2;
    grid-column-start: 2;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 2vw;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    background-color: transparent;
    padding: 1vw;
    background-image: url("../img//icons/resetIcon.png");
}

.blogChangeContentAbort:hover{
    background-image: url("../img//icons/resetIconHover.png");
}


.blogdate{
    display: block;
    grid-column-start: 1;
    z-index: 4;
    position: relative;
    bottom: 1.2vw;
    width: 4vw;
    height: 2.5vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    font-family: 'sarabunextrabold';
    font-size: 1.5vw;
    padding-top: 0.75vw;
    padding-bottom: 0.75vw;
}

.blogcontent{
    display: grid;
    grid-column-start: 2;
    grid-row-start: 1;
    z-index: 4;
    position: relative;
    top: 0.25vw;
    left: -0.3vw;
    width: 60vw;
    height: auto;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    color: #ffffff;
    text-decoration: none;
    text-align: left;
    font-family: 'sarabunextrabold';
    font-size: 1.5vw;
    line-height: 1.2;
    text-align: center;
    padding: 1vw;
    white-space: pre-wrap;
    margin-bottom: 3vw;
    padding-bottom: 3vw;
}

#BlogContainer{
    display: block;
    position: relative;
    width: inherit;
    height: fit-content;
}

#BlogFooter{
    display: block;
    position: relative;
    left:6.5vw;
    width: 62vw;
    color: #ffffff;
    text-decoration: none;
    text-align: left;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    text-align: center;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    padding-top: 2vw;
    padding-bottom:2vw;
}

#Indexsidebar{
    display: grid;
    position: relative;
    z-index: 4;
    top: 5.5vw;
    grid-template-rows: 6vw 6vw auto auto;
    grid-template-columns: 100%;
    padding-bottom: 2vw;
    width: 28vw;
    height: fit-content;
    grid-column-start: 2;
    grid-row-start: 1;
    grid-row-end: 3;
    align-items: top;
}


#facebookLink{
    display: block;
    position: relative;
    bottom: 1vw;
    z-index: 4;
    width: 3.2vw;
    height: 3.2vw;
    background-color: #001a99;
    outline: 0.20vw solid #ffee02;
    background-image: url("../img/icons/facebook.png");
    background-repeat: no-repeat;
    background-size: 2.5vw;
    background-position: center;
    grid-row-start: 2;
    grid-column-start: 1;   
    margin-left: auto;
    margin-right: 5vw;
    margin-top: auto;
    margin-bottom: auto;
}

#facebookLink:hover{
    background-image: url("../img/icons/facebookHover.png");

}

#instagramLink{
    display: block;
    position: relative;
    z-index: 4;
    width: 3.2vw;
    height: 3.2vw;
    background-color: #001a99;
    outline: 0.20vw solid #ffee02;
    background-image: url("../img/icons/instagram.png");
    background-repeat: no-repeat;
    background-size: 2.5vw;
    background-position: center;
    grid-row-start: 1;
    grid-column-start: 1;
    margin-left: auto;
    margin-right: 5vw;
    margin-bottom: auto;
    margin-top: auto;
}

#instagramLink:hover{
    background-image: url("../img/icons/instagramHover.png");

}

#AnfragenContainer{
    display: flex;
    position: relative;
    grid-row-start: 1;
    grid-column-start: 1;
    z-index: 3;
    width: 18vw;
    height: 4vw;
    transform: scale(0.8, 0.8);
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    animation: buttonBlink 20s infinite;
    animation-delay: 2s;
    animation-timing-function: ease;
    margin: 1vw;
    margin-right: auto;
}

#AnfragenContainer:hover #mailIcon{
    background-image: url("../img/icons/mailHover.png");
    cursor: pointer;
}

#AnfragenContainer:hover #ButtonAnfrage{
    color: #ffee02;
}

#mailIcon{
    display: block;
    position: relative;
    z-index: 4;
    width: 4vw;
    height: 4vw;
    margin-left:1vw;
    background-image: url("../img/icons/mail.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#ButtonAnfrage{
    display: block;
    z-index: 3;
    width: 15vw;
    height: 3.25vw;
    position: relative;
    top: 1vw;
    text-decoration: none;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#MitgliedContainer{
    display: flex;
    position: relative;
    z-index: 3;
    width: 18vw;
    height: 4vw;
    grid-row-start: 2;
    grid-column-start: 1;
    transform: scale(0.8, 0.8);
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    animation: buttonBlink 20s infinite;
    animation-delay: 12s;
    animation-timing-function: ease;
    margin-bottom: 2vw;
    margin-left: 1vw;
    margin-right: auto;
}

#MitgliedContainer:hover #mitgliedIcon{
    background-image: url("../img/icons/mitgliedHover.png");
    cursor: pointer;
}

#MitgliedContainer:hover #ButtonMitglied{
    color: #ffee02;
}

#mitgliedIcon{
    display: block;
    position: relative;
    z-index: 4;
    width: 4vw;
    height: 4vw;
    margin-left:1vw;
    background-image: url("../img/icons/mitglied.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#ButtonMitglied{
    display: block;
    width: 15vw;
    height: 3.25vw;
    position: relative;
    top: 1vw;
    text-decoration: none;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


@keyframes buttonBlink{
  3% { transform: scale(0.4, 0.4);}
  6% { transform: scale(1, 1);}
  9% { transform: scale(0.8, 0.8);}
  100% { transform: scale(0.8, 0.8); }
}

/*
##################################
	Termineübersicht
##################################
*/

#terminePanel{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    position: relative;
    left: 1vw;
    z-index: 4;
    width: 27.5vw;
    height: auto;
    grid-row-start: 3;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    margin-left: auto;
    margin-right: auto;

}

#TitelContainer{
    display: grid;
    grid-template-columns: auto;
    width: 27.5vw;
    height: 5vw;
    position: relative;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

#TermineHeadline{
    display: block;
    z-index: 4;
    text-decoration: none;
    color: #ffffff;
    font-family: 'sarabunextrabold';
    font-size: 1.8vw;
    grid-column-start: 1;
    grid-row-start:1;
    text-align: center;
    width: 27.5vw;
    margin-left: auto;
    margin-right: auto;
}


#editbutton{
    display: none;
    z-index: 5;
    position: relative;
    left: 24.5vw;
    grid-column-start: 1;
    grid-row-start:1;
    width: 1.2vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 1.5vw;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    background-color: transparent;
    padding: 1vw;
    background-image: url("../img//icons/editicon.png");
}

#editbutton:hover{
    background-image: url("../img//icons/editiconHover.png");
}


#ChangeTermineForm{
    grid-row-start: 1;
    display: none;
    grid-template-columns: auto;
    grid-template-rows: 100%;
    width: 2vw;
    position: relative;
    pointer-events: inherit;
    margin-left: auto;
    margin-right: auto;
    left:-10vw;
    top: 2vw
}

#terminBearbeitenInputFeld{
    grid-column-start: 1;
    display: block;
    width: 20vw;
    height: 1.5vw;
    pointer-events: inherit;
    text-align: center;
    font-family: 'sarabunextrabold';
    font-size: 1.4vw;
}

#submitTermineTitleChange{
    display: block;
    width: 1.5vw;
    height: 1.5vw;
    grid-column-start: 2;
    pointer-events: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 1.5vw;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    background-color: transparent;
    padding: 1vw;
    background-image: url("../img//icons/sendIcon.png");
}

#submitTermineTitleChange:hover{
    background-image: url("../img//icons/sendIcon_hover.png");

}

#resetTermineTitleChange{
    display: block;
    position: relative;
    top: -2.4vw;
    left: -1vw;
    width: 1.5vw;
    height: 1.5vw;
    grid-row-start: 1;
    grid-column-start: 3;
    pointer-events: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 1.5vw;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    background-color: transparent;
    padding: 1vw;
    background-image: url("../img//icons/resetIcon.png");
}

#resetTermineTitleChange:hover{
    background-image: url("../img//icons/resetIconHover.png");

}


/*
Einzelner Termineintrag
*/

.Termin{
    display: grid;
    position: relative;
    grid-template-columns: 12% 16% 30% 45% 8%;
    grid-column-start: 1;
    width: 26.5vw;;
    height: 2.2vw;
    left: -2.8vw;
    top:-2vw;
    justify-content: left;
    font-family: 'sarabunextrabold';
    color: #ffffff;
    font-size: 0.9vw;
    align-items: baseline;
    margin-bottom: 0.25vw;
}

.nextAppointment {
    color: #ffee02;
    text-decoration:underline dotted;
}

.DeleteBN{
    display: none;
    width: 1.2vw;
    height: 1.2vw;
    font-family: 'sarabunextrabold';
    font-size: 0.5vw;
    align-items: center;
    text-align: center;
    position: relative;
    grid-column-start: 1;
    grid-row-start: 1;
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;
    color: white;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    outline: 0.15vw solid #ffee02;
    background-color: #001a99;
}

.TerminLine{
    display: grid;
    position: relative;
    left: 3.3vw;   
    grid-template-rows: 100%;
    grid-template-columns: 16% 32% 41% 11%;
    width:27vw;   
    height: inherit;
}

.hiddenID{
    display: block;
    position: relative;
    width: 1.5vw;
    height: 1.5vw;
    grid-column-start: 1;
    grid-row-start: 1;
    text-align: left;
}

.TerminDate{
    display: block;
    position: relative;
    grid-column-start: 2;
    grid-row-start: 1;
    text-align: left;
}

.TerminPlace{
    display: block;
    position: relative;
    grid-column-start: 3;
    grid-row-start: 1;
    text-align: left;
}

.TerminReason{
    display: block;
    position: relative;
    grid-column-start: 4;
    grid-row-start: 1;
    text-align: left;
}

.TerminTime{
    display: block;
    position: relative;
    grid-column-start: 5;
    grid-row-start: 1;
    text-align: left;
}

/*
Neuer Termin Eintrage Form
*/

#TerminEintragen{
    position: relative;
    display: none;
    left: 1vw;
    width: 27.5vw;
    height: 4vw;
    z-index: 3;
    grid-row-start: 4;
    margin-left: auto;
    margin-top: 1vw;
    margin-bottom: auto;
    margin-right: auto;
    color: white;
    border: none;
    pointer-events: none;
    outline: 0.25vw solid #ffee02;
    background-color: #001a99;
    pointer-events: all;
}
#deleteTable{
    display: block;
    position: relative;
    margin: auto;
    z-index: 3;
    font-family: 'sarabunextrabold';
    font-size: 1vw;
    color: #ffffff;
    margin-left: auto;
    margin-top: auto;

}

#addDateForm{
    display: grid;
    position: relative;
    grid-template-columns: 18% 26% 45% 10%;
    z-index: 3;
    height: 2vw;
    left:-0.25vw;
    margin-right: auto;
    margin-left: auto;
    align-items: center;
    justify-content: center;

    
}

#addDate{
    z-index: 3;
    font-family: 'sarabunextrabold';
    font-size: 0.7vw;
    display: block;
    position: relative;
    left:0.3vw;
    width: 4.8vw;
    height: 1.3vw; 
    grid-column-start: 1;
    grid-row-start: 1;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: auto;
    margin-top: 0.25vw;
    color: black;
    border: none;
    outline: inherit;
    cursor: pointer;

}

#addPlace{
    z-index: 3;
    font-family: 'sarabunextrabold';
    font-size: 0.7vw;
    display: block;
    position: relative;
    width: 6.4vw;
    left: 0.2vw;
    height: 1.2vw;
    grid-column-start: 2;
    grid-row-start: 1;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: auto;
    margin-top: 0.25vw;
    color: black;
    border: none;
    outline: inherit;

}

#addReason{
    z-index: 3;
    font-family: 'sarabunextrabold';
    font-size: 0.7vw;
    display: block;
    position: relative;
    left: -0.35vw;
    width: 11vw;
    height: 1.2vw;
    grid-column-start: 3;
    grid-row-start: 1;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: auto;
    margin-top: 0.25vw;
    color: black;
    border: none;
    outline: inherit;
}

#addTime{
    z-index: 3;
    font-family: 'sarabunextrabold';
    font-size: 0.7vw;
    display: block;
    position: relative;
    left:-0.7vw;
    width: 3.5vw;
    height: 1.3vw;
    grid-column-start: 4;
    grid-row-start: 1;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: auto;
    margin-top: 0.25vw;
    color: black;
    border: none;
    outline: inherit;
    cursor: pointer;
}

#submitBN{
    display: block;
    z-index: 3;
    position: relative;
    grid-row-start: 2;
    grid-column-start: 1;
    width: 7vw;
    left: 1vw;
    height: 0.7vw;
    font-family: 'sarabunextrabold';
    color: #ffffff;
    text-align: center;
    text-decoration: underline;
    font-size: 0.7vw;
    background-color: #0000008a;
    outline: none;
    border: none;
    padding-top: 0.75vw;
    padding-bottom: 1.25vw;
    margin-top: 0.25vw;
    cursor: pointer;
}

#submitBN:hover{
    color: #ffee02;
}

#resetBN{
display: block;
    z-index: 3;
    position: relative;
    grid-row-start: 2;
    grid-column-start: 2;
    width: 6vw;
    left: 4vw;
    height: 0.7vw;
    font-family: 'sarabunextrabold';
    color: #ffffff;
    text-align: center;
    text-decoration: underline;
    font-size: 0.7vw;
    background-color:#0000008a;
    outline: none;
    border: none;
    padding-top: 0.75vw;
    padding-bottom: 1.25vw;
    margin-top: 0.25vw;
    cursor: pointer;
}

#resetBN:hover{
    color: #ffee02;
}



/*
Alle Termine Löschen Button
*/

#deleteDateBN{
    display: block;
    z-index: 3;
    position: relative;
    width: 10vw;
    left: 17vw;
    height: 0.7vw;
    font-family: 'sarabunextrabold';
    color: #ffffff;
    text-align: center;
    text-decoration: underline;
    font-size: 0.7vw;
    background-color: #0000008a;
    outline: none;
    border: none;
    padding-top: 0.75vw;
    padding-bottom: 1.25vw;
    margin-top: -0.15vw;
    cursor: pointer;
}

#deleteDateBN:hover{
    color: #ffee02;
}

#dateDeleteForm{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    position: relative;
    height: fit-content;
}
#DeleteConfirm{
    display: none;
    grid-column-start: 1;
    z-index: 3;
    top: 6.8vw;
    position: relative;
    width: 7vw;
    left: 10vw;
    height: 0.7vw;
    font-family: 'sarabunextrabold';
    color: #ffffff;
    text-align: center;
    text-decoration: underline;
    font-size: 0.7vw;
    background-color: #0000008a;
    outline: none;
    border: none;
    padding-top: 0.75vw;
    padding-bottom: 1.25vw;
    margin-top: -0.15vw;
    cursor: pointer;
}

#DeleteConfirm:hover{
    color: #ffee02;
}

#deleteDateAbort{
    display: none;
    z-index: 5;
    position: relative;
    width: 7vw;
    left: 18vw;
    height: 0.7vw;
    grid-row-start: 1;
    grid-column-start: 5;
    font-family: 'sarabunextrabold';
    color: #ffffff;
    text-align: center;
    text-decoration: underline;
    font-size: 0.7vw;
    background-color: #0000008a;
    outline: none;
    border: none;
    padding-top: 0.6vw;
    padding-bottom: 0.6vw;
    margin-top: -0.15vw;
    cursor: pointer;
    margin-top: -2.25vw;
}

#deleteDateAbort:hover{
    color: #ffee02;
}

#dateAskForDelete{
    display: none;
    position: relative;  
    width: 10vw; 
    top: -0.25vw;
    left: 0.5vw; 
    z-index: 8;
    font-family: 'sarabunextrabold';
    font-size: 0.72vw;
    color: #ffffff;
    }


#selectAllDates{
    display: none;
    position: relative;
    margin-top: auto;
    margin-left: auto;
    height: 1.5vw;
    margin-right: auto;
    width: 19vw;
    background-color: #0000008a;
    font-family: 'sarabunextrabold';
    font-size: 1.5vw;
    color: #ffffff;
    padding-top: 1vw;
    padding-bottom: 1vw;
    text-align: center;
    cursor: pointer;
    text-decoration: underline;
    margin-top: -2vw;
    margin-bottom: 0.5vw;
}

#selectAllDates:hover{
    color: #ffee02;
}

#deselectAllDates{
    display: none;
    position: relative;
    margin-top: auto;
    margin-left: auto;
    height: 1.5vw;
    margin-right: auto;
    width: 19vw;
    background-color: #0000008a;
    font-family: 'sarabunextrabold';
    font-size: 1.5vw;
    color: #ffffff;
    padding-top: 1vw;
    padding-bottom: 1vw;
    text-align: center;
    cursor: pointer;
    text-decoration: underline;
    margin-top: -2vw;
    margin-bottom: 0.5vw;
}

#deselectAllDates:hover{
    color: #ffee02;
}

/*
##################################
	Gallerie
##################################
*/

#mainGallerie{
    display: grid;
    width: 100%;
    height: fit-content;
    min-height: 36.3vw;
    grid-template-columns: 20% 80%;
    grid-template-rows: auto;
    margin-top: 4vw;
}

#noAlbumText{
    display: block;
    font-family: 'sarabunextrabold';
    font-size: vw;
    color: #ffffff;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    grid-column-start: 1;
    grid-column-end: 3;
}
/*
Auflistung der Alben
##################################
*/


#albenListeContainer{
    grid-row-start: 1;
    grid-column-start: 1;
    display:block;
    height: fit-content;
}

#auflistungAlben {
    display: grid;
    position: relative;
    grid-auto-rows: 4vw;
    grid-auto-flow: dense;
    width: 20vw;
    left:1vw;
    height: fit-content;
    outline: 0.25vw solid #ffee02;
    background-color: #001a99;
    margin-bottom: 2vw;
}

.albumListeElement{
    display: block; 
    width: 18vw;
    height: 4vw;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    cursor: pointer;
    margin-left:1vw;
    line-height: 1.2;
    
}

.albumListeElement:hover{
    color:#ffee02;
}

#newAlbumFormAndAlbumContainer{
display: block;
grid-column-start: 2;
grid-row-start: 1;
height: auto;
}

/*
Neue Gallerie erstellen
##################################
*/

#NeuesAlbumErstellen{
display: block;
width: inherit;
height: auto;
margin-bottom: 1vw;
position: relative;
z-index: 1;
pointer-events: none;
}

#showCreateNewAlbumFormBN{
    display: none;
    position: relative;
    top: -1vw;
    width: 18vw;
    height: 1.2vw;
    text-align: center;
    position: relative;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1.25vw;
    padding-bottom: 1.25vw;
    cursor: pointer;
}

#showCreateNewAlbumFormBN:hover{
    color: #ffee02;
}

#createNewAlbumForm{
    display: none;
    position: relative;
    z-index: 2;
    grid-template-columns: 50% 50%;
    grid-column-start: 2;
    grid-row-start: 1;
    margin-left: auto;
    margin-right: auto;
    width: 46vw;
    height: auto;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    padding: 2vw;
    grid-gap: 0.5vw;
    margin-bottom: 2vw;
}

#createNewAlbumTitle{
 display: block;
 position: relative;
 z-index: 3;
 grid-column-start: 1;
 grid-row-start: 1;
 width: inherit;
 height: 2vw; 
 font-family: 'sarabunextrabold';
 font-size: 1.2vw;
 color: #000000;
 text-align: center;
 cursor: text;

}


#createNewAlbumImageInputText{
    display: block;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;;
    color:#ffffff;
    grid-row-start: 3;
}


#createNewAlbumImageInput{
    display: inline-block;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;;
    color:#ffffff;
    grid-row-start: 4;
    grid-column-end: 3;
    grid-column-start: 1;
    width:27vw;
    height: 2.5vw;
    cursor: pointer;
    margin-bottom: 1vw;
}

#createNewAlbumImageInput::-webkit-file-upload-button, #createNewAlbumImageInput::file-selector-button{
    width: 2vw;
    height: 2.5vw; 
    background-color: transparent;
    background-image: url("../img//icons/imageFile.png");
    background-repeat: no-repeat;
    background-size:2vw;
    background-position: center;
    border: none;
    font-family: 'sarabunextrabold';
    color:#ffffff00;
    grid-row-start: 4;
    grid-column-start: 1;
    grid-column-end: 3;
    cursor: pointer;
}

.createNewAlbumImagePreview {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 5;
    display: grid;
    grid-template-columns: repeat(5, 8vw);
    grid-auto-rows: auto;
    grid-gap: 0.5vw;
    margin-top: 1vw;
    justify-content: center;
    align-items: center;
    
}

.createNewAlbumImagePreview .createNewImagePreviewContainer {
    width: 8vw;
    height: 8vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
  
.createNewAlbumImagePreview img,
.createNewAlbumImagePreview video {
    width: 8vw;
    height: 8vw;
    object-fit: contain;
    margin: auto;
}

#createNewAlbumSubmit{
    display: block;
    width: 100%;
    height: 2.5vw;
    grid-column-start: 1;
    grid-row-start: 6;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;;
    color:#000000;
    text-align: center;
    cursor: pointer;
}

#createNewAlbumReset{
    display: block;
    width: 100%;
    height: 2.5vw;
    grid-column-start: 2;
    grid-row-start: 6;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;;
    color:#000000;
    text-align: center;
    cursor: pointer;
}


/*

	Album
##################################
*/

#Album{
    display: grid;
    width: 70vw;
    height: auto;
    position: relative;
    top:-1vw;
    margin-left: 2vw;
    margin-right: auto;
    background-color: #001a99;
    padding: 2vw;
    outline: 0.25vw solid #ffee02;
    margin-bottom: 1vw;
    grid-template-columns: 22% 78%;
    grid-template-rows: 100%;
}


#albumGrid{
    display: grid;
    grid-gap: 0.5vw;
    grid-template-columns: 20% 80%;
    grid-template-rows: 12% 88%;
    position: relative;
    left: -1vw;
    top:-1vw;
    width:72vw;
    height: 32vw;
    margin-left: auto;
    margin-bottom: auto;
    margin-right: auto;
    margin-top: auto;
}

#albumTitle{
    display: block;
    font-family: 'sarabunextrabold';
    position: relative;
    top:-1.2vw;
    font-size: 2vw;;
    color:#ffffff;
    grid-row-start: 1;
    grid-column-start: 2;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
}

#albumDate{
    display: block;
    font-family: 'sarabunextrabold';
    position:relative;
    top: 1vw;
    font-size: 0.8vw;;
    color:#ffffff;
    grid-row-start: 1;
    grid-column-start: 2;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
}

#albumMainImage{
    display: block;
    position: relative;
    object-fit: contain;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    grid-row-start: 2;
    grid-column-start: 2 ;
    grid-column-end: 3;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
}

#albumMainImage:hover{
    cursor: url('../img//icons/zoomIn.png'), zoom-in;
}

#thumbnailContainer{
    grid-row-start: 1;
    grid-column-start: 1;
    display: grid;
    position: relative;
    grid-gap: 0.25vw;
    width: 15vw;
    height: 34vw;
    grid-template-columns: repeat(3, 4.7vw);
    grid-template-rows: repeat(6, 4.7vw);
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    justify-items: center;
    align-items: center;
    overflow-y: scroll;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none
    
}

#thumbnailContainer::-webkit-scrollbar{
    display: none;
  }

#thumbnailArrowUp{
    display: none;
    width: 6.5vw;
    height: 6.5vw;
    left: 4.2vw;
    top: -2vw;
    opacity: 0%;
    position: relative;
    z-index: 10;
    grid-row-start: 1;
    grid-column-start: 1;
    pointer-events: none;
}
#thumbnailArrowDown{
    display: none;
    width: 6.5vw;
    height: 6.5vw;
    left: 4.2vw;
    top: 29.6vw;
    opacity: 0%;
    position: relative;
    z-index: 10;
    grid-row-start: 1;
    grid-column-start: 1;
    pointer-events: none;
    margin-bottom: auto;
}

.albumThumbnailElement{
    display: grid;
    position: relative;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
}

.albumThumbnailImage{
    width: 4.5vw;
    height: 4.5vw;
    object-fit: cover;
    position: relative;
    z-index: 4;
    max-width: 4.5vw;
    max-height: 4.5vw;
    grid-column-start: 1;
    grid-row-start: 1;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    overflow: hidden;
    cursor: pointer;
}

.albumImageDeleteBN{
    display: none;
    width: 1.2vw;
    height: 1.2vw;
    font-family: 'sarabunextrabold';
    font-size: 0.5vw;
    align-items: center;
    text-align: center;
    position: absolute;
    z-index: 5;
    grid-column-start: 1;
    grid-row-start: 1;
    margin-bottom: auto;
    margin-right: auto;
    color: white;
    border: none;
    cursor: pointer;
    outline: 0.15vw solid #ffee02;
    background-color: #001a99; 
}

#albumImageDeleteForm{
    display: grid;
    width: 1vw;
}

#albumImageDeleteConfirm{
    display: none;
    position: relative;
    top: 1.2vw;
    width: 10vw;
    left:-1vw;
    grid-row-start: 5;
    font-family: 'sarabunextrabold';
    grid-column-start: 1;
    font-size: 1vw;
    color: #ffffff;
    text-decoration: underline;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    background-color: #0000008a;
    border: none;
    text-align: center;
    cursor: pointer;
    margin-bottom: 0.1vw;
    margin-right: auto;
    border: none;

}

#albumImageDeleteConfirm:hover{
    color: #ffee02;
}

#albumImageDeleteSelectAll{
    display: none;
    position: relative;
    top: 1.2vw;
    width: 10vw;
    left:10vw;
    grid-row-start: 5;
    font-family: 'sarabunextrabold';
    grid-column-start: 1;
    font-size: 1vw;
    color: #ffffff;
    text-decoration: underline;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    background-color: #0000008a;
    border: none;
    text-align: center;
    cursor: pointer;
    margin-bottom: 0.1vw;
    margin-right: auto;
    border: none;
}

#albumImageDeleteSelectAll:hover{
    color:#ffee02
}

#albumImageDeleteDeSelectAll{
    display: none;
    position: relative;
    top: 1.2vw;
    width: 10vw;
    left:10vw;
    grid-row-start: 5;
    font-family: 'sarabunextrabold';
    grid-column-start: 1;
    font-size: 1vw;
    color: #ffffff;
    text-decoration: underline;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    background-color: #0000008a;
    border: none;
    text-align: center;
    cursor: pointer;
    margin-bottom: 0.1vw;
    margin-right: auto;
    border: none;
}

#albumImageDeleteDeSelectAll:hover{
    color:#ffee02
}

#albumImageDeleteConfirm:hover{
    color: #ffee02;
}

#albumImageDeleteSubmit{
    display: none;
    position: relative;
    top: 1.2vw;
    width: 10vw;
    height: 1vw;
    left: -1vw;
    grid-row-start: 4;
    font-family: 'sarabunextrabold';
    grid-column-start: 1;
    font-size: 1vw;
    color: #ffffff;
    text-decoration: underline;
    padding-top: 0.5vw;
    padding-bottom: 1.5vw;
    background-color: #0000008a;
    text-align: center;
    cursor: pointer;
    margin-bottom: 0.2vw;
    margin-right: auto;
    margin-top: 1vw;
    border: none;
}

#albumImageDeleteSubmit:hover{
    color: #ffee02;
}

#albumImageDeleteAbort{
    display: none;
    position: relative;
    top: 2.2vw;
    width: 10vw;
    height: 1vw;
    left:-1vw;
    grid-row-start: 5;
    font-family: 'sarabunextrabold';
    grid-column-start: 1;
    font-size: 1vw;
    color: #ffffff;
    text-decoration: underline;
    padding-top: 0.5vw;
    padding-bottom: 1.5vw;
    background-color: #0000008a;
    border: none;
    text-align: center;
    cursor: pointer;
    margin-bottom: 0.1vw;
    margin-right: auto;
    border: none;
}

#albumImageDeleteAbort:hover{
    color: #ffee02;
}

#showChangeAlbumFormBN{
    display: none;
    width: 1.8vw;
    height: 1.8vw;
    position: absolute;
    top:-1vw;
    right: 1vw;
    z-index: 10;
    background-image: url("../img//icons/editicon.png");
    background-size: 1.8vw;
    background-repeat: no-repeat;
    grid-row-start: 1;
    grid-column-start: 2;
    margin-top: auto;
    cursor: pointer;
}

#showChangeAlbumFormBN:hover{
    background-image: url(../img//icons/editiconHover.png);
}

#changeAlbumForm{
    display:none;
    position: relative;
    top: -1.2vw;
    z-index: 8;
    width: 55vw;
    height: 34vw;
    margin-left: auto;
    margin-right: auto;
    grid-row-start: 1;
    grid-column-start: 2;
    grid-template-columns: 50% 50%;
    grid-template-rows: 9% 9% 9% 64% 9%;
    align-items: center;
}

#albumChangeTitle{
    display: block;
    width: 55vw;
    height: 2vw;
    text-align: center;
    font-family: 'sarabunextrabold';
    position: relative;
    font-size: 1.5vw;;
    color:#000000;
    grid-row-start: 1;
    grid-column-start: 1;
    grid-column-end: 3;
    margin-left: auto;
    margin-right: auto;
}

#albumLoadNewImageInputText{
    display: block;
    width: 15vw;
    height: 2vw;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;;
    color:#ffffff;
    grid-column-start: 1; 
    grid-row-start: 2;
}

#albumLoadNewImageInput{
    display: inline-block;
    font-family: 'sarabunextrabold';
    position: relative;
    font-size: 1.2vw;;
    color:#ffffff;
    grid-row-start: 3;
    grid-column-end: 3;
    grid-column-start: 1;
    width:50vw;
    height: 2.5vw;
    cursor: pointer;
}

#albumLoadNewImageInput::-webkit-file-upload-button, #albumLoadNewImageInput::file-selector-button{
    width: 2vw;
    height: 2.5vw; 
    background-color: transparent;
    background-image: url("../img//icons/imageFile.png");
    background-repeat: no-repeat;
    background-size:2vw;
    background-position: center;
    border: none;
    font-family: 'sarabunextrabold';
    color:#ffffff00;
    grid-row-start: 3;
    grid-column-start: 1;
    grid-column-end: 3;
    cursor: pointer;
}

.albumLoadImagePreview{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 4;
    display: grid;
    width: inherit;
    height: 20vw;
    grid-template-columns: repeat(5, 8vw);
    grid-auto-rows: auto;
    grid-gap: 0.5vw;
    margin-top: 1vw;
    justify-content: center;
    align-items: center;
    overflow-y: scroll;
    overflow-x: hidden;
}

.albumLoadImagePreview::-webkit-scrollbar{
    display: none;
  }

.albumLoadImagePreview .albumLoadImagePreviewContainer {
    width: 8vw;
    height: 8vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.albumLoadImagePreview img{
    width: 8vw;
    height: 8vw;
    object-fit: contain;
    margin: auto;
}

#changeAlbumSubmit{
    display: block;
    position: relative;
    top: 1.2vw;
    width: 10vw;
    left: -19vw;
    grid-row-start: 5;
    font-family: 'sarabunextrabold';
    grid-column-start: 2;
    font-size: 1vw;
    color: #ffffff;
    text-decoration: underline;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    background-color: #0000008a;
    border: none;
    text-align: center;
    cursor: pointer;
    margin-bottom: 0.1vw;
    margin-right: auto;
    border: none;
}

#changeAlbumSubmit:hover{
color: #ffee02;
}

#changeAlbumAbort{
    display: block;
    position: relative;
    top: 1.2vw;
    width: 10vw;
    left: -8vw;
    grid-row-start: 5;
    font-family: 'sarabunextrabold';
    grid-column-start: 2;
    font-size: 1vw;
    color: #ffffff;
    text-decoration: underline;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    background-color: #0000008a;
    border: none;
    text-align: center;
    cursor: pointer;
    margin-bottom: 0.1vw;
    margin-right: auto;
    border: none;
}

#changeAlbumAbort:hover{
color: #ffee02;
}

#deleteAlbumConfirm{
    display: block;
    position: relative;
    top: 0.6vw;
    width: 10vw;
    left: 16vw;
    grid-row-start: 5;
    font-family: 'sarabunextrabold';
    grid-column-start: 2;
    font-size: 1vw;
    color: #ffffff;
    text-decoration: underline;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    background-color: #0000008a;
    border: none;
    text-align: center;
    cursor: pointer;
    margin-bottom: 0.1vw;
    margin-right: auto;
    border: none;
}

#deleteAlbumConfirm:hover{
    color: #ffee02;
}

#deleteAlbumSubmit{
    display: none;
    position: relative;
    top: 1.2vw;
    width: 10vw;
    left: 34vw;
    grid-row-start: 5;
    font-family: 'sarabunextrabold';
    grid-column-start: 1;
    font-size: 1vw;
    color: #ffffff;
    text-decoration: underline;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    background-color: #0000008a;
    border: none;
    text-align: center;
    cursor: pointer;
    margin-bottom: 0.1vw;
    margin-right: auto;
    border: none;
}

#deleteAlbumSubmit:hover{
    color: #ffee02;
}

#deleteAlbumAbort{
    display: none;
    position: relative;
    top:0.6vw;
    width: 10vw;
    left: 18vw;
    grid-row-start: 5;
    font-family: 'sarabunextrabold';
    grid-column-start: 2;
    font-size: 1vw;
    color: #ffffff;
    text-decoration: underline;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    background-color: #0000008a;
    border: none;
    text-align: center;
    cursor: pointer;
    margin-bottom: 0.1vw;
    margin-right: auto;
    border: none;
}

#deleteAlbumAbort:hover{
    color: #ffee02;
}

/*
##################################
	Kontakt
##################################
*/

#kontakteMain{
    z-index: 3;
    display: grid;
    position: relative;
    grid-template-columns: 15% 85%;
    grid-template-rows: auto;
    width: 98.1vw;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2vw;
    padding-top: 3.5vw;
}

#KontaktLinks{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 33% 33% 33%;
    width: 16vw;
    height: 14vw;
    position: sticky;
    top: 0vw;
    left:0.5vw;
    grid-column-start: 1;
    grid-row-start: 1;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
}

#BuchenButton{
    display: flex;
    position: relative;
    font-family: 'sarabunextrabold';
    font-size: 1.5vw;
    grid-row-start: 1;
    z-index: 3;
    width: 14vw;
    height: auto;
    padding-top: 0.8vw;
    padding-bottom: 0.8vw;
    background-color: #001a99;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    margin-right: auto;
    outline: 0.25vw solid #ffee02;
    text-shadow: -0.12vw -0.12vw #F23B3F;
    cursor: pointer;
}

#AnfahrtButton{
    display: flex;
    position: relative;
    font-family: 'sarabunextrabold';
    font-size: 1.5vw;
    grid-row-start: 2;
    z-index: 3;
    width: 14vw;
    height: auto;
    padding-top: 0.8vw;
    padding-bottom: 0.8vw;
    background-color: #001a99;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    margin-right: auto;
    outline: 0.25vw solid #ffee02;
    text-shadow: -0.12vw -0.12vw #F23B3F;
    cursor: pointer;
}

#MitgliedButton{
    display: flex;
    position: relative;
    font-family: 'sarabunextrabold';
    font-size: 1.5vw;
    grid-row-start: 3;
    z-index: 3;
    width: 14vw;
    height: auto;
    padding-top: 0.8vw;
    padding-bottom: 0.8vw;
    background-color: #001a99;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    margin-right: auto;
    outline: 0.25vw solid #ffee02;
    text-shadow: -0.12vw -0.12vw #F23B3F;
    cursor: pointer;
}

#BuchenButton:hover, #AnfahrtButton:hover, #MitgliedButton:hover{
    color: #ffee02
}


#inhalt_buchen{
    z-index: 3;
    display: grid;
    grid-template-columns: 45% 55%;
    grid-template-rows: 100%;
    position: relative;
    grid-row-start: 1;
    grid-column-start: 2;
    top: 0.3vw;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    justify-content:end;
    margin-bottom: 4vw;
    /* outline: 0.25vw solid #ffee02;
    background-color: #001a99; */
}

#Kontakt_01{
    display: grid;
    position: relative;
    z-index: 4;
    width: 34vw;
    height: 22vw;
    grid-column-start: 1;
    grid-row-start: 1;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    margin-left: 1vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
    padding-left: 2vw;
    top:0.5vw

}

#kontaktdaten{
    display: none;
    font-family: 'sarabunextrabold';
    font-size: 1.5vw;
    color: #ffffff;
    white-space: pre-wrap;
    width: inherit;
    height: inherit;
    margin-left: 1vw;
    position: relative;
    z-index: 5;
    grid-row-start: 1;
    grid-column-start: 1;

}

#kontaktdatenEditTextblockBN{
    display: none;
    width: 2vw;
    height: 2vw;
    position: relative;
    grid-row-start: 1;
    grid-column-start: 1;
    z-index: 8;
    background-color: #00199990;
    background-image: url(../img//icons/editicon.png);
    background-repeat: no-repeat;
    background-size: 1.5vw;
    background-position: center;
    cursor: pointer;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    right: 2vw;
    top:10vw;
}

#kontaktdatenEditTextblockBN:hover{
    background-image: url("../img//icons/editiconHover.png");

}


#kontaktdatenChangeTextblockForm{
    display: none;
    grid-template-columns: 100%;
    grid-row-start: 1;
    grid-column-start: 1;
    position: relative;
    z-index: 5;
    width: 94%;
    height: 22vw;
    position: relative;
    margin-top: 1.5vw;
    margin-bottom: auto;
    margin-left: 1vw;
    margin-right: auto;
    grid-gap:0.5vw;
}

#kontaktdatenChangeTextblockInput{
    display: block;
    /* opacity: 0%; */
    grid-column-start: 1;
    grid-row-start: 1;
    width: 95%;
    height: 19vw;
    max-height: 19vw;
    resize: none;
    text-align: left;
    margin-right: auto;
    font-family: 'sarabunextrabold';
    font-size: 1.5vw;
    white-space: pre-wrap;
    line-height: 1.2;
    color: #000000;
}

#kontaktdatenChangeTextblockSubmit{
    display:block;
    position: relative;
    z-index: 8;
    width: 1.8vw;
    height: 1.8vw;
    grid-column-start: 1;
    grid-row-start: 1;
    border: none;
    background-color: transparent;
    background-image: url("../img//icons/sendIcon.png");
    background-repeat: no-repeat;
    background-size: contain;
    cursor:pointer;
    margin-left: auto;
    right: 4vw;
    margin-top: auto;
}

#kontaktdatenChangeTextblockSubmit:hover{
    background-color: transparent;
    background-image: url("../img//icons/sendIcon_hover.png");
    background-repeat: no-repeat;
    background-size: contain;
}

#kontaktdatenAbortChangeTextblock{
    display:block;
    position: relative;
    z-index: 9;
    width: 1.8vw;
    height: 1.8vw;
    grid-column-start: 1;
    grid-row-start: 1;
    pointer-events: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    background-color: transparent;
    background-image: url("../img//icons/resetIcon.png");
    margin-left: auto;
    margin-top: auto;
    right: 1.5vw;
}

#kontaktdatenAbortChangeTextblock:hover{
    background-image: url("../img//icons/resetIconHover.png");
}



#Kontakt_02{
    z-index: 3;
    width: 45vw;
    height: 22vw;
    max-height: 22vw;
    padding-bottom: 3vw;
    padding-top: 1vw;
    display: grid;
    position: relative;
    top: 0.5vw;
    grid-column-start: 2;
    grid-row-start: 1;
    margin-left: auto;
    margin-right: auto;
    outline: 0.25vw solid #ffee02;
    background-color: #001a99;
}

#AnfrageFormular{
    display: grid;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    grid-template-columns: 50% 50%;
    grid-gap: 0.5vw;
    width: 40vw;
    height: 18vw;
}
#AnfrageName{
    display:block;
    position: relative;
    grid-row-start: 1;
    grid-column-start: 1;
    font-family: 'sarabunextrabold';
    font-size: 1vw;
    color: #000000;
    width: auto;
    height:auto;
    max-height: 2vw;
}

#AnfrageEmail{
    display: block;
    position: relative;
    grid-row-start: 1;
    grid-column-start: 2;
    font-family: 'sarabunextrabold';
    font-size: 1vw; 
    color: #000000;
    width: auto;
    height:auto;
    max-height: 2vw;
}

#AnfrageBetreff{
    display: block;
    position: relative;
    grid-row-start: 2;
    grid-column-start: 1;
    grid-column-end: 3;
    color: #000000;
    font-family: 'sarabunextrabold';
    font-size: 1vw;
    width: auto;
    height:auto;
    max-height: 2vw;
}

#AnfragenText{
    display: block;
    width: auto;
    height:auto;
    min-height: 12vw;
    max-height: 12vw;
    position: relative;
    grid-row-start: 3;
    grid-column-start: 1;
    grid-column-end: 3;
    font-family: 'sarabunextrabold';
    color: #000000;
    font-size: 1vw;
    resize: none;
}

#AnfrageSendenButton{
    display: block;
    position: relative;
    grid-row-start: 4;
    grid-column-start: 1;
    font-family: 'sarabunextrabold';
    font-size: 1vw;
    color: #000000;
    width: auto;
    height:auto;
    cursor: pointer;
    max-height: 2vw;
}

#AnfrageAbbrechenButton{
    display: block;
    position: relative;
    grid-row-start: 4;
    grid-column-start: 2;
    font-family: 'sarabunextrabold';
    font-size: 1vw;
    color: #000000;
    width: auto;
    height:auto;
    cursor: pointer;
    max-height: 2vw;
}

#AnfrageSuccess{
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    height: auto;
    padding-top: 6.4vw;
    padding-bottom: 6.4vw;
    font-family: 'sarabunextrabold';
    font-size: 1.5vw;
    color: #ffffff;
    text-align: center;
    justify-content: center;
    align-items: center;
}

#inhalt_anfahrt{
    z-index: 3;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    position: relative;
    grid-row-start: 2;
    grid-column-start: 2;
    width: 98.2%;
    height: auto;
    margin-left: 1vw;
    margin-right: auto;
    align-items: center;
    justify-content:end;
    margin-bottom: 4vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    padding-bottom: 2vw;
}

#anfahrt_anker{
    z-index: 3;
    display: block;
    width: 70vw;
    height: 0.1vw;
    grid-column-start: 2;
    top:0vw;
    margin-right: auto;
    margin-left: auto;
    margin-top: 7vw;
    font-family: 'sarabunextrabold';
    font-size: 1.5vw;
}


#anfahrt_adresse{
    width: inherit;
    height: 2vw;
    grid-column-start: 1;
    grid-row-start: 1;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
    z-index: 4;
    text-align: center;
    font-family: 'sarabunextrabold';
    font-size: 1.5vw;
    color: #ffffff;
    white-space: pre-wrap;
    line-height: 1.2;

}

#anfahrtEditTextblockBN{
    display: none;
    width: 2vw;
    height: 2vw;
    position: relative;
    grid-row-start: 1;
    grid-column-start: 1;
    z-index: 8;
    background-color: #00199990;
    background-image: url(../img//icons/editicon.png);
    background-repeat: no-repeat;
    background-size: 1.5vw;
    background-position: center;
    cursor: pointer;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    right: 0.5vw;
}

#anfahrtEditTextblockBN:hover{
    background-image: url("../img//icons/editiconHover.png");

}


#anfahrtChangeTextblockForm{
    display: none;
    grid-template-columns: 100%;
    grid-row-start: 1;
    grid-column-start: 1;
    position: relative;
    z-index: 5;
    width: inherit;
    height: 100%;
    position: relative;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 1vw;
    margin-right: auto;
    grid-gap:0.5vw;
    padding-top:1.5vw;
    padding-bottom:1.5vw;

}

#anfahrtChangeTextblockInput{
    display: block;
    grid-column-start: 1;
    grid-row-start: 1;
    width: 80%;
    height: 2vw;
    resize: none;
    text-align: center;
    margin-right: auto;
    margin-left:auto;
    font-family: 'sarabunextrabold';
    font-size: 1.5vw;
    white-space: pre-wrap;
    line-height: 1.2;
    color: #000000;
}

#anfahrtChangeTextblockSubmit{
    display:block;
    position: relative;
    width: 1.8vw;
    height: 1.8vw;
    grid-column-start: 1;
    grid-row-start: 1;
    border: none;
    background-color: transparent;
    background-image: url("../img//icons/sendIcon.png");
    background-repeat: no-repeat;
    background-size: contain;
    cursor:pointer;  
    margin-left: auto;
    right: 5.5vw;
    top: 0.25vw;
}

#anfahrtChangeTextblockSubmit:hover{
    background-color: transparent;
    background-image: url("../img//icons/sendIcon_hover.png");
    background-repeat: no-repeat;
    background-size: contain;
}

#anfahrtAbortChangeTextblock{
    display:block;
    position: relative;
    z-index: 9;
    width: 1.8vw;
    height: 1.8vw;
    grid-column-start: 1;
    grid-row-start: 1;
    pointer-events: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    background-color: transparent;
    background-image: url("../img//icons/resetIcon.png");
    margin-left: auto;
    right: 3vw;
    top: 0.25vw;
}

#anfahrtAbortChangeTextblock:hover{
    background-image: url("../img//icons/resetIconHover.png");
}

#anfahrtskarte{
    display: block;
    position: relative;
    z-index: 7;
    margin-left: auto;
    margin-right: auto;
    width: 74.5vw;
    height: 38vw;
    border: none;
    grid-row-start: 2;
    grid-column-start: 1;
    
}

#mapsEmbeddedLinkEditBN{
    display: none;
    width: 25vw;
    height: 5vw;
    position: relative;
    z-index: 8;
    font-family: 'sarabunextrabold';
    font-size: 2.5vw;
    color: #ffffff;
    background-color: #0000008a;
    grid-row-start: 3;
    grid-column-start: 1;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1vw;
    padding-bottom: 1vw;
    cursor: pointer;
}

#mapsEmbeddedLinkEditBN:hover{
    color: #ffee02;
}

#mapsEmbeddedLinkEditForm{
    display: none;
    grid-template-columns: 10% 90%;
    grid-row-start: 90% 10%;
    position: relative;
    width: 70vw;
    height: fit-content;
    grid-row-start: 3;
    grid-column-start: 1;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    justify-content: center;
    grid-gap: 0.5vw;
    top: 1vw;
}

#mapsEmbeddedLinkTitle{
    display: block;
    position: relative;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    height: 2vw;
    color: #ffffff;
}
#mapsEmbeddedLinkTextInput{
    font-family: 'sarabunextrabold';
    display: block;
    position: relative;
    top: -0.2vw;
    font-size: 1.2vw;
    height: 10vw;
    color: #000000;
    resize: none; 
}

#mapsEmbeddedLinkSubmit{
    display: block;
    position: relative;
    grid-row-start: 2;
    grid-column-start: 2;
    margin-left: auto;
    margin-right: 3vw;
    width: 2vw;
    height: 2vw;
    font-size: 0vw;
    background-color: transparent;
    background-image: url("../img//icons/sendIcon.png");
    background-repeat: no-repeat;
    background-size:2vw;
    background-position: center;
    border: none;
    cursor: pointer;
}

#mapsEmbeddedLinkSubmit:hover{
    background-image: url("../img//icons/sendIcon_hover.png");

}

#mapsEmbeddedLinkReset{
    display: block;
    position: relative;
    grid-row-start: 2;
    grid-column-start: 2;
    width: 2vw;
    height: 2vw;
    font-size: 0vw;
    background-color: transparent;
    background-image: url("../img//icons/resetIcon.png");
    background-repeat: no-repeat;
    background-size:2vw;
    background-position: center;
    border: none;
    cursor: pointer;
    margin-left: auto;
}

#mapsEmbeddedLinkReset:hover{
    background-image: url("../img//icons/resetIconHover.png");

}



#inhalt_mitglied{
    z-index: 3;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    position: relative;
    grid-row-start: 3;
    grid-column-start: 2;
    width: 98.2%;
    height: auto;
    margin-left: 1vw;
    margin-right: auto;
    align-items: center;
    justify-content:end;
    margin-bottom: 4vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    padding-bottom: 2vw;
}

#recruitmentUeberschrift{
    display: block;
    grid-row-start: 1;
    grid-column-start: 1;
    position: relative;
    z-index: 4;
    width: 50vw;
    height: 2vw;
    font-family: 'sarabunextrabold';
    font-size: 2.5vw;
    color: #ffffff;
    text-align: center;
    text-decoration: underline; 
    margin-left: auto;
    margin-right: auto;
}

#recruitmentEditTitleBN{
    display: none;
    opacity: 100%;
    z-index: 10;
    width: 2vw;
    height: 2vw;
    grid-row-start: 1;
    grid-column-start: 1;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 1.5vw;
    cursor: pointer;
    background-image: url("../img//icons/editicon.png");
    margin-left: auto;
    margin-right: 4vw;
    top: 1vw;
}

#recruitmentEditTitleBN:hover{
    background-image: url("../img//icons/editiconHover.png");

}


#recruitmentChangeTitleForm{
    display: none;
    grid-row-start: 1;
    grid-column-start: 1;
    position: relative;
    z-index: 5;
    width: 55vw;
    height: 2vw;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    grid-gap:0.5vw;
    margin-top: 1.8vw;
}

#recruitmentChangeTitleInput{
    display: block;
    grid-row-start: 1;
    grid-column-start: 1;
    grid-column-end: 1;
    width: 50vw;
    height: 2vw;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-family: 'sarabunextrabold';
    font-size: 2vw;
    color: #000000;
    padding-bottom: 0.5vw;
}

#recruitmentChangeTitelSubmit{
    display:block;
    position: relative;
    top:0.5vw;
    width: 2vw;
    height: 2vw;
    grid-column-start: 2;
    grid-row-start: 1;
    border:none;
    background-color: transparent;
    background-image: url("../img//icons/sendIcon.png");
    background-repeat: no-repeat;
    background-size: contain;
    cursor:pointer;
}

#recruitmentChangeTitelSubmit:hover{
    background-color: transparent;
    background-image: url("../img//icons/sendIcon_hover.png");
    background-repeat: no-repeat;
    background-size: contain;
}



#recruitmentAbortChangeTitel{
    display:block;
    position: relative;
    z-index: 9;
    width: 2vw;
    height: 2vw;
    grid-column-start: 3;
    grid-row-start: 1;
    pointer-events: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 2vw;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    top:0.5vw;
    background-color: transparent;
    background-image: url("../img//icons/resetIcon.png");
}

#recruitmentAbortChangeTitel:hover{
    background-image: url("../img//icons/resetIconHover.png");
}


#recruitmentTextblock{
    display: none;
    grid-row-start: 2;
    grid-column-start: 1;
    position: relative;
    z-index: 4;
    width: 65vw;
    height: auto;
    font-family: 'sarabunextrabold';
    font-size: 1.6vw;
    line-height: 1.2;
    white-space: pre-wrap;
    color: #ffffff;
    text-align: center;
    text-decoration: none; 
    margin-left: auto;
    margin-right: auto;   
}

#recruitmentEditTextblockBN{
    display: none;
    opacity: 100%;
    z-index: 10;
    width: 2vw;
    height: 2vw;
    grid-row-start: 2;
    grid-column-start: 1;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 1.5vw;
    cursor: pointer;
    background-image: url("../img//icons/editicon.png");
    margin-left: auto;
    margin-right: 4vw;
    margin-top: auto;
    top:1vw;
}

#recruitmentEditTextblockBN:hover{
    background-image: url("../img//icons/editiconHover.png");

}


#recruitmentChangeTextblockForm{
    display: none;
    grid-template-columns: 100%;
    grid-row-start: 2;
    grid-column-start: 1;
    position: relative;
    z-index: 5;
    width: 65vw;
    height: auto;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    grid-gap:0.5vw;
    margin-top: 1.8vw;
}

#recruitmentChangeTextblockInput{
    display: block;
    grid-column-start: 1;
    grid-row-start: 1;
    width: 65vw;
    height: 28vw;
    resize: none;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-family: 'sarabunextrabold';
    font-size: 1.6vw;
    white-space: pre-wrap;
    line-height: 1.2;
    color: #000000;
    padding-bottom: 0.5vw;
}

#recruitmentChangeTextblockSubmit{
    display:block;
    position: relative;
    top:0.5vw;
    width: 2vw;
    height: 2vw;
    grid-column-start: 1;
    grid-row-start: 2;
    border:none;
    background-color: transparent;
    background-image: url("../img//icons/sendIcon.png");
    background-repeat: no-repeat;
    background-size: contain;
    cursor:pointer;
    margin-left: auto;
    left: -2vw;
}

#recruitmentChangeTextblockSubmit:hover{
    background-color: transparent;
    background-image: url("../img//icons/sendIcon_hover.png");
    background-repeat: no-repeat;
    background-size: contain;
}

#recruitmentAbortChangeTextblock{
    display:block;
    position: relative;
    z-index: 9;
    width: 2vw;
    height: 2vw;
    grid-column-start: 1;
    grid-row-start: 2;
    pointer-events: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 2vw;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    top:0.5vw;
    background-color: transparent;
    background-image: url("../img//icons/resetIcon.png");
    margin-left: auto;
}

#recruitmentAbortChangeTextblock:hover{
    background-image: url("../img//icons/resetIconHover.png");
}


/*
##################################
	Unser Verein
##################################
*/

#UnserVereinMain{
    z-index: 3;
    display:grid;
    position: relative;
    grid-template-columns: 12.5% 80%;
    grid-template-rows: auto;
    width: 98.1vw;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2vw;
    padding-top: 3.5vw;
}

#UnserVereinSidebar{
    z-index: 3;
    display: grid;
    position: sticky;
    top: 0vw;
    grid-column-start: 1;
    grid-row-start: 1;
    width: 16vw;
    height: auto;
    margin-left: 1vw;
    margin-right: auto;
}

#UnserVereinLinks{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 33% 33% 33%;
    width: 16vw;
    height: 14vw;
    position: sticky;
    top: 0vw;
    grid-column-start: 1;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
}

#geschichteButton{
    display: block;
    position: relative;
    font-family: 'sarabunextrabold';
    font-size: 1.5vw;
    grid-row-start: 1;
    z-index: 3;
    width: 14vw;
    height: auto;
    padding-top: 0.8vw;
    padding-bottom: 0.8vw;
    background-color: #001a99;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    margin-right: auto;
    outline: 0.25vw solid #ffee02;
    text-shadow: -0.12vw -0.12vw #F23B3F;
    cursor: pointer;
}

#vorstandButton{
    display: block;
    position: relative;
    font-family: 'sarabunextrabold';
    font-size: 1.5vw;
    grid-row-start: 2;
    z-index: 3;
    width: 14vw;
    height: auto;
    padding-top: 0.8vw;
    padding-bottom: 0.8vw;
    background-color: #001a99;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    margin-right: auto;
    outline: 0.25vw solid #ffee02;
    text-shadow: -0.12vw -0.12vw #F23B3F;
    cursor: pointer;
}

#mitgliederButton{
    display: block;
    position: relative;
    font-family: 'sarabunextrabold';
    font-size: 1.5vw;
    grid-row-start: 3;
    z-index: 3;
    width: 14vw;
    height: auto;
    padding-top: 0.8vw;
    padding-bottom: 0.8vw;
    background-color: #001a99;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #ffffff;
    margin-right: auto;
    outline: 0.25vw solid #ffee02;
    text-shadow: -0.12vw -0.12vw #F23B3F;
    cursor: pointer;
}


#geschichteButton:hover, #vorstandButton:hover, #mitgliederButton:hover{
    color: #ffee02
}

#Vereinsinhalte{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    position: relative;
    top:0.5vw;
}


/*
Vereinsgeschichte 
############################################################
*/

#Vereinsgeschichte{
    display: grid;
    grid-template-columns: 100%;
    grid-row-start: 1;
    position: relative;
    width: 80vw;
    left: 5vw;
    height: auto;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2vw;
    padding-bottom: 1.3vw;
    align-items: baseline;
}

#vereinsgeschichteUeberschrift{
    display: block;
    grid-row-start: 1;
    grid-column-start: 1;
    position: relative;
    z-index: 4;
    width: 50vw;
    height: 2vw;
    font-family: 'sarabunextrabold';
    font-size: 2vw;
    color: #ffffff;
    text-align: center;
    text-decoration: underline; 
    margin-left: auto;
    margin-right: auto;   
}

#vereinsgeschichteEditTitleBN{
    display: none;
    opacity: 100%;
    z-index: 10;
    width: 2vw;
    height: 2vw;
    grid-row-start: 1;
    grid-column-start: 1;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 1.5vw;
    cursor: pointer;
    background-image: url("../img//icons/editicon.png");
    margin-left: auto;
    margin-right: 5vw;
}

#vereinsgeschichteEditTitleBN:hover{
    background-image: url("../img//icons/editiconHover.png");

}


#vereinsgeschichteChangeTitleForm{
    display: none;
    grid-row-start: 1;
    grid-column-start: 1;
    position: relative;
    z-index: 5;
    width: 55vw;
    height: 2vw;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    grid-gap:0.5vw;
    margin-top: 1.8vw;
}

#vereinsgeschichteChangeTitleInput{
    display: block;
    grid-row-start: 1;
    grid-column-start: 1;
    grid-column-end: 1;
    width: 50vw;
    height: 2vw;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-family: 'sarabunextrabold';
    font-size: 2vw;
    color: #000000;
    padding-bottom: 0.5vw;
}

#vereinsgeschichteChangeTitelSubmit{
    display:block;
    position: relative;
    top:0.5vw;
    width: 2vw;
    height: 2vw;
    grid-column-start: 2;
    grid-row-start: 1;
    border:none;
    background-color: transparent;
    background-image: url("../img//icons/sendIcon.png");
    background-repeat: no-repeat;
    background-size: contain;
    cursor:pointer;
}

#vereinsgeschichteChangeTitelSubmit:hover{
    background-color: transparent;
    background-image: url("../img//icons/sendIcon_hover.png");
    background-repeat: no-repeat;
    background-size: contain;
}



#vereinsgeschichteAbortChangeTitel{
    display:block;
    position: relative;
    z-index: 9;
    width: 2vw;
    height: 2vw;
    grid-column-start: 3;
    grid-row-start: 1;
    pointer-events: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 2vw;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    top:0.5vw;
    background-color: transparent;
    background-image: url("../img//icons/resetIcon.png");
}

#vereinsgeschichteAbortChangeTitel:hover{
    background-image: url("../img//icons/resetIconHover.png");
}


#vereinsgeschichteTextblock{
    display: none;
    grid-row-start: 2;
    grid-column-start: 1;
    position: relative;
    z-index: 4;
    width: 65vw;
    height: auto;
    font-family: 'sarabunextrabold';
    font-size: 1.6vw;
    line-height: 1.2;
    white-space: pre-wrap;
    color: #ffffff;
    text-align: center;
    text-decoration: none; 
    margin-left: auto;
    margin-right: auto;   
}

#vereinsgeschichteEditTextblockBN{
    display: none;
    opacity: 100%;
    z-index: 10;
    width: 2vw;
    height: 2vw;
    grid-row-start: 2;
    grid-column-start: 1;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 1.5vw;
    cursor: pointer;
    background-image: url("../img//icons/editicon.png");
    margin-left: auto;
    margin-right: 5vw;
    margin-top: auto;
    top:1vw;
}

#vereinsgeschichteEditTextblockBN:hover{
    background-image: url("../img//icons/editiconHover.png");

}


#vereinsgeschichteChangeTextblockForm{
    display: none;
    grid-template-columns: 100%;
    grid-row-start: 2;
    grid-column-start: 1;
    position: relative;
    z-index: 5;
    width: 65vw;
    height: auto;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    grid-gap:0.5vw;
    margin-top: 1.8vw;
}

#vereinsgeschichteChangeTextblockInput{
    display: block;
    grid-column-start: 1;
    grid-row-start: 1;
    width: 65vw;
    height: 25vw;
    resize: none;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-family: 'sarabunextrabold';
    font-size: 1.6vw;
    white-space: pre-wrap;
    line-height: 1.2;
    color: #000000;
    padding-bottom: 0.5vw;
}

#vereinsgeschichteChangeTextblockSubmit{
    display:block;
    position: relative;
    top:0.5vw;
    width: 2vw;
    height: 2vw;
    grid-column-start: 1;
    grid-row-start: 2;
    border:none;
    background-color: transparent;
    background-image: url("../img//icons/sendIcon.png");
    background-repeat: no-repeat;
    background-size: contain;
    cursor:pointer;
    margin-left: auto;
    left: -2vw;
}

#vereinsgeschichteChangeTextblockSubmit:hover{
    background-color: transparent;
    background-image: url("../img//icons/sendIcon_hover.png");
    background-repeat: no-repeat;
    background-size: contain;
}

#vereinsgeschichteAbortChangeTextblock{
    display:block;
    position: relative;
    z-index: 9;
    width: 2vw;
    height: 2vw;
    grid-column-start: 1;
    grid-row-start: 2;
    pointer-events: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 2vw;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    top:0.5vw;
    background-color: transparent;
    background-image: url("../img//icons/resetIcon.png");
    margin-left: auto;
}

#vereinsgeschichteAbortChangeTextblock:hover{
    background-image: url("../img//icons/resetIconHover.png");
}


/*
Vorstandsblock
#########################################
*/

#vorstand{
    display: grid;
    position: relative;
    grid-template-columns: 25% 50% 25%;
    width: 80vw;
    left: 5vw;
    height: auto;
    grid-column-start: 1;
    grid-row-start: 2;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2vw;
    padding-bottom: 2vw;
    align-items: baseline;
}

/*
Vorstand Titel
*/

#vorstandUeberschrift{
    display:block;
    width: 100%;
    height: 4vw;
    grid-column-start: 2;
    grid-row-start: 1;
    text-align: center;
    font-family: 'sarabunextrabold';
    font-size: 2vw;
    text-decoration: underline;
    color: #ffffff;
    margin-top:auto;
    margin-bottom:auto;
    padding-top: 1vw;
    padding-bottom: 1vw;
}

#vorstandEditTitleBN{
    display: none;
    opacity: 100%;
    z-index: 8;
    width: 2vw;
    height: 2vw;
    position: relative;
    grid-column-start: 2;
    grid-row-start:1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 1.5vw;
    cursor: pointer;
    background-image: url("../img//icons/editicon.png");
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
}

#vorstandEditTitleBN:hover{
    background-image: url("../img//icons/editiconHover.png");

}

#vorstandChangeTitleForm{
    grid-column-start: 2;
    grid-row-start: 1;
    display: none;
    width: auto;
    height: 4vw;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    grid-gap:0.5vw;
    padding-top: 1vw;

}

#vorstandChangeTitleInput{
    display: block;
    position: relative;
    grid-column-start: 1;
    grid-row-start: 1;
    width: 30vw;
    height: 2vw;
    text-align: center;
    font-family: 'sarabunextrabold';
    font-size: 2vw;
    padding-bottom: 0.5vw;
}

#vorstandChangeTitelSubmit{
    display:block;
    position: relative;
    width: 2vw;
    height: 2vw;
    grid-column-start: 2;
    pointer-events: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 2vw;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    top:0.5vw;
    background-color: transparent;
    background-image: url("../img//icons/sendIcon.png");
}

#vorstandChangeTitelSubmit:hover{
    background-image: url("../img//icons/sendIcon_hover.png");
}

#vorstandAbortChangeTitel{
    display:block;
    position: relative;
    width: 2vw;
    height: 2vw;
    grid-column-start: 3;
    pointer-events: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 2.1vw;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    top:0.5vw;
    background-color: transparent;
    background-image: url("../img//icons/resetIcon.png");
}

#vorstandAbortChangeTitel:hover{
    background-image: url("../img//icons/resetIconHover.png");

}

/*
Vorstand Textblock Links
*/

#vorstandTextblockLinks{
    grid-column-start: 1;
    grid-row-start: 2;
    display: block;
    position:relative;
    top:-1.2vw;
    z-index: 7;
    width: 18vw;
    height:100%;
    text-align: center;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    margin-bottom: auto;
    margin-left:auto;
    margin-right: auto;
    white-space: pre-wrap;
}

#vorstandEditTextblockLinksBN{
    display: none;
    width: 2vw;
    height: 2vw;
    position: relative;
    grid-row-start: 3;
    grid-column-start: 1;
    z-index: 8;
    background-color: #00199990;
    background-image: url(../img//icons/editicon.png);
    background-repeat: no-repeat;
    background-size: 1.5vw;
    background-position: center;
    cursor: pointer;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    top: -2.5vw;
    right: 0.5vw;
}

#vorstandEditTextblockLinksBN:hover{
    background-image: url(../img//icons/editiconHover.png);

}

#vorstandChangeTextblockLinksForm{
    display: none;
    grid-column-start: 1;
    grid-row-start: 2;
    grid-template-rows: 92% 7%;
    position: relative;
    z-index: 8;
    width: 18vw;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    margin-bottom: auto;
}

#vorstandChangeTextblockLinksInput{
    text-align: center;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #000000;
    white-space: pre-wrap;
    resize: none;
}

#vorstandChangeTextblockLinksSubmit{
    display:block;
    grid-row-start: 2;
    position: relative;
    right:2.5vw;
    width: 2vw;
    height: 2vw;
    grid-column-start: 1;
    grid-row-start: 2;
    pointer-events: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 2vw;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    top:0.5vw;
    background-color: transparent;
    background-image: url("../img//icons/sendIcon.png");
    margin-left: auto;
}

#vorstandChangeTextblockLinksSubmit:hover{
    background-image: url("../img//icons/sendIcon_hover.png");
}

#vorstandAbortChangeTextblockLinks{
    display:block;
    grid-row-start: 2;
    grid-row-start: 2;
    position: relative;
    width: 2vw;
    height: 2vw;
    grid-column-start: 1;
    pointer-events: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 2vw;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    top:0.5vw;
    background-color: transparent;
    background-image: url("../img//icons/resetIcon.png");
    margin-left:auto;
}

#vorstandAbortChangeTextblockLinks:hover{
    background-image: url("../img//icons/resetIconHover.png")
}


/*
Vorstand Textblock Rechts
*/

#vorstandTextblockRechts{
    grid-column-start: 3;
    grid-row-start: 2;
    display: block;
    position:relative;
    top:-1.2vw;
    z-index: 7;
    width: 18vw;
    height:100%;
    text-align: center;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    margin-bottom: auto;
    margin-left:auto;
    margin-right: auto;
    white-space: pre-wrap;
}

#vorstandEditTextblockRechtsBN{
    display: none;
    width: 2vw;
    height: 2vw;
    position: relative;
    grid-row-start: 3;
    grid-column-start: 3;
    z-index: 8;
    background-color: #00199990;
    background-image: url(../img//icons/editicon.png);
    background-repeat: no-repeat;
    background-size: 1.5vw;
    background-position: center;
    cursor: pointer;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    top: -2.5vw;
    right: 0.5vw;
}

#vorstandEditTextblockRechtsBN:hover{
    background-image: url(../img//icons/editiconHover.png);

}

#vorstandChangeTextblockRechtsForm{
    display: none;
    grid-column-start: 3;
    grid-row-start: 2;
    grid-template-rows: 92% 7%;
    position: relative;
    z-index: 8;
    width: 18vw;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    margin-bottom: auto;
}

#vorstandChangeTextblockRechtsInput{
    text-align: center;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #000000;
    white-space: pre-wrap;
    resize: none;
}

#vorstandChangeTextblockRechtsSubmit{
    display:block;
    grid-row-start: 2;
    position: relative;
    right:2.5vw;
    width: 2vw;
    height: 2vw;
    grid-column-start: 1;
    grid-row-start: 2;
    pointer-events: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 2vw;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    top:0.5vw;
    background-color: transparent;
    background-image: url("../img//icons/sendIcon.png");
    margin-left: auto;
}

#vorstandChangeTextblockRechtsSubmit:hover{
    background-image: url("../img//icons/sendIcon_hover.png");
}

#vorstandAbortChangeTextblockRechts{
    display:block;
    grid-row-start: 2;
    grid-row-start: 2;
    position: relative;
    width: 2vw;
    height: 2vw;
    grid-column-start: 1;
    pointer-events: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 2vw;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    top:0.5vw;
    background-color: transparent;
    background-image: url("../img//icons/resetIcon.png");
    margin-left:auto;
}

#vorstandAbortChangeTextblockRechts:hover{
    background-image: url("../img//icons/resetIconHover.png")
}

/*
Vorstand Bild
*/

#vorstandImage{
    display: block;
    grid-column-start: 2;
    grid-row-start: 2;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 7;
    cursor: url('../img//icons/zoomIn.png'), zoom-in;
}

#vorstandImageEditBN{
    display:none;
    width: 2vw;
    height: 2vw;
    position: relative;
    grid-row-start: 3;
    grid-column-start: 2;
    z-index: 8;
    background-color: #00199990;
    background-image: url("../img//icons/editicon.png");
    background-repeat: no-repeat;
    background-size:1.5vw;
    background-position: center;
    cursor:pointer;
    margin-top: auto;
    margin-bottom: auto;
    margin-left:auto;
    top: -2.5vw;
    right: 0.5vw;
}

#vorstandImageEditBN:hover{
    background-image: url("../img//icons/editiconHover.png");
}

#vorstandChangeImageForm{
    grid-row-start: 2;
    grid-column-start: 2;
    display:none;
    grid-gap: 0.5vw;
    width: 18vw;
    position: relative;
    z-index: 8;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    opacity: 100%;
    margin-top: auto;
    bottom:0.7vw;
}

#vorstandChangeImageNewImageName{
    display: block;
    grid-column-start: 1;
    width: 16vw;
    height: 1vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    font-family: 'sarabunextrabold';
    font-size: 1vw;
    color: #ffffff;
    padding-top:0.5vw;
    padding-bottom: 1.5vw;
    padding-left: 0.25vw;
    padding-right: 0.25vw;
    margin-left: 0.25vw;
    cursor: pointer;
}

#vorstandChangeImageNewImageName:hover{
    color: #ffee02;
}


    
#vorstandChangeImageNewImageName::-webkit-file-upload-button, #vorstandChangeImageNewImageName::file-selector-button{
    width: 2vw;
    height: 2vw;
    background-color: transparent;
    background-image: url("../img//icons/imageFile.png");
    background-repeat: no-repeat;
    background-size:contain;
    background-position: center;
    border: none;
    font-family: 'sarabunextrabold';
    color:#ffffff00;
}

#vorstandChangeImageSubmit{
    display: block;
    position: relative;
    left: 1vw;
    grid-row-start: 1;
    grid-column-start: 2;
    width: 3vw;
    height: 3vw;
    font-size: 0vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    background-image: url(../img//icons/sendIcon.png);
    background-repeat: no-repeat;
    background-size: 2vw;
    background-position: center;
    border: none;
    cursor: pointer;
}

#vorstandChangeImageSubmit:hover{
    background-image: url("../img//icons/sendIcon_hover.png");

}

#vorstandDeleteImageSubmit{
    display: none;
    position: relative;
    left: -2.1vw;
    grid-row-start: 1;
    grid-column-start: 3;
    width: 1.25vw;  
    height: 1.25vw;
    font-size: 0vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    background-repeat: no-repeat;
    background-size:0.6vw;
    background-position: center;
    border: none;
    margin-left:0.25vw;
    cursor: pointer;
}

#vorstandAbortImageChange{
    display: block;
    position: relative;
    left: 2vw;
    grid-row-start: 1;
    grid-column-start: 3;
    width: 3vw;
    height: 3vw;
    font-size: 0vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    background-image: url(../img/icons/cross.png);
    background-repeat: no-repeat;
    background-size: 2vw;
    background-position: center;
    border: none;
    cursor: pointer;
}

#vorstandAbortImageChange:hover{
    background-image: url(../img/icons/crossHover.png);

}


/*
Mitglied Hinzufügen
############################################################
*/


#mitgliedHinzufuegen{
    display: none;
    position: relative;
    width: 20vw;
    height: 0.25vw;
    left: 5vw;
    grid-column-start: 1;
    grid-row-start: 4;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    margin-bottom: 0vw;
    margin-top: 5.5vw;
    padding: 0vw;
    margin-left: auto;
    margin-right: auto;
    align-items: center;

}

#addNewMitgliedText1{
    display: block;
    position: relative;
    width: inherit;
    text-align: center;
    font-family: 'sarabunextrabold';
    font-size: 1.5vw;;
    color:#ffffff;
    top:-2.4vw;
    cursor: pointer;
}

#addNewMitgliedText1:hover{
    color:#ffee02;
}

#addNewMitgliedText2{
    display: none;
    position: relative;
    width: inherit;
    text-align: center;
    font-family: 'sarabunextrabold';
    font-size: 1.5vw;;
    color:#ffffff;
    top:-1vw;
}

#newMitgliedForm{
    display: none;
    align-items: center;
    grid-gap:0.5vw;
    grid-template-columns: 50% 50%;
    width: 80%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.newMitgliedTextinput{
    display: inline-block;
    position: relative;
    width: 15vw;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;;
    color:#000000;
    text-align: center;
}

#addNewMitgliedImage{
    width: 50vw;
    height: 2vw;
    align-items: center;
    display: grid;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;;
    color:#ffffff;
    grid-column-end: 2;
}

#newMitgliedImage{
    display: inline-block;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;;
    color:#ffffff;
    grid-column-start: 2;
    width:27vw;
    height: 2vw;
    cursor: pointer;
}

#newMitgliedImage:hover{
    color: #ffee02;
}

#newMitgliedImage::-webkit-file-upload-button, #newMitgliedImage::file-selector-button{
    width: 2vw;
    height: 2vw; 
    background-color: transparent;
    background-image: url("../img//icons/imageFile.png");
    background-repeat: no-repeat;
    background-size:2vw;
    background-position: center;
    border: none;
    font-family: 'sarabunextrabold';
    color:#ffffff00;
    grid-column-start: 2;
    cursor: pointer;
}

#newMitgliedImage_Preview{
    display:none;
    z-index: 4;
    grid-row-start: 3;
    grid-column-start: 2;
    width: auto;
    height: 10vw;
    position: relative;
    align-items: center;
    z-index: 5;
    grid-column-start: 2;
    grid-template-rows: 1;
    padding-top: 1vw;
    padding-bottom: 1vw;

}

#clearNewMitgliedImageInputBN{
    display: none;
    grid-row-start: 3;
    grid-column-start: 2;
    opacity: 70%;
    margin-bottom: auto;
    margin-right: auto;
    z-index: 5;
    left: 0.2vw;
    position: relative;  
    width: 3vw;
    height: 3vw;
    pointer-events: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
    cursor: pointer;
    overflow: hidden; 
    outline: none;
    background-color: transparent;
    background-image: url("../img//icons/removeSignRotSemiTransparent.png");
}

#addNewMitgliedStatus{
    display: block;
    width: 15vw;
    height: 2vw;
    grid-row-start: 4;
    grid-column-start: 1;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;;
    color:#ffffff;

}

.newMitgliedStatusAktiv{
    display: block;
    position: relative;
    top:-0.6vw;
    margin-top: auto;
    margin-bottom: auto;
    grid-row-start: 4;
    grid-column-start: 2;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;;
    color:#ffffff;
}

#newMitgliedStatusAktiv{
    display: inline-block;
    position: relative;
    top:0.25vw;
    width: 1.5vw;
    height: 1.5vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    margin-left:0.8vw;
    cursor: pointer;
}

.newMitgliedStatusPassiv{
    display: block;
    display:block;
    position: relative;
    left: 8vw;
    top:-0.6vw;
    grid-row-start: 4;
    grid-column-start: 2;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;;
    color:#ffffff;
}

#newMitgliedStatusPassiv{
    display: inline-block;
    position: relative;
    top:0.25vw;
    width: 1.5vw;
    height: 1.5vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    margin-left:0.8vw;
    cursor: pointer;
}

#newMitgliedSubmit{
    display: block;
    width: 15vw;
    height:2.4vw;
    grid-row-start: 5;
    grid-column-start: 1;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;;
    color:#000000;
    cursor: pointer;
}

#newMitgliedReset{
    display: block;
    width: 15vw;
    height:2.4vw;
    grid-row-start: 5;
    grid-column-start: 2;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;;
    color:#000000;
    cursor: pointer;
}


/*
Mitglieder Text Panel
############################################################
*/

#mitgliederFliesstextblock{
    display: grid;
    grid-template-columns: 100%;
    position: relative;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    width: 80vw;
    left: 5vw;
    height: auto;
    grid-column-start: 1;
    grid-row-start: 3;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2vw;
    padding-bottom: 2vw;
    align-items: baseline;
}

#mitgliedUeberschrift{
    display: block;
    grid-row-start: 1;
    grid-column-start: 1;
    position: relative;
    z-index: 4;
    width: 50vw;
    height: 2vw;
    font-family: 'sarabunextrabold';
    font-size: 2vw;
    color: #ffffff;
    text-align: center;
    text-decoration: underline; 
    margin-left: auto;
    margin-right: auto;   
}

#mitgliedEditTitleBN{
    display: none;
    opacity: 100%;
    z-index: 10;
    width: 2vw;
    height: 2vw;
    grid-row-start: 1;
    grid-column-start: 1;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 1.5vw;
    cursor: pointer;
    background-image: url("../img//icons/editicon.png");
    margin-left: auto;
    margin-right: 5vw;
}

#mitgliedEditTitleBN:hover{
    background-image: url("../img//icons/editiconHover.png");

}


#mitgliedChangeTitleForm{
    display: none;
    grid-row-start: 1;
    grid-column-start: 1;
    position: relative;
    z-index: 5;
    width: 55vw;
    height: 2vw;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    grid-gap:0.5vw;
    margin-top: 1.8vw;
}

#mitgliedChangeTitleInput{
    display: block;
    grid-row-start: 1;
    grid-column-start: 1;
    grid-column-end: 1;
    width: 50vw;
    height: 2vw;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-family: 'sarabunextrabold';
    font-size: 2vw;
    color: #000000;
    padding-bottom: 0.5vw;
}

#mitgliedChangeTitelSubmit{
    display:block;
    position: relative;
    top:0.5vw;
    width: 2vw;
    height: 2vw;
    grid-column-start: 2;
    grid-row-start: 1;
    border:none;
    background-color: transparent;
    background-image: url("../img//icons/sendIcon.png");
    background-repeat: no-repeat;
    background-size: contain;
    cursor:pointer;
}

#mitgliedChangeTitelSubmit:hover{
    background-color: transparent;
    background-image: url("../img//icons/sendIcon_hover.png");
    background-repeat: no-repeat;
    background-size: contain;
}



#mitgliedAbortChangeTitel{
    display:block;
    position: relative;
    z-index: 9;
    width: 2vw;
    height: 2vw;
    grid-column-start: 3;
    grid-row-start: 1;
    pointer-events: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 2vw;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    top:0.5vw;
    background-color: transparent;
    background-image: url("../img//icons/resetIcon.png");
}

#mitgliedAbortChangeTitel:hover{
    background-image: url("../img//icons/resetIconHover.png");
}


#mitgliedTextblock{
    display: none;
    grid-row-start: 2;
    grid-column-start: 1;
    position: relative;
    z-index: 4;
    width: 65vw;
    height: auto;
    font-family: 'sarabunextrabold';
    font-size: 1.6vw;
    line-height: 1.2;
    white-space: pre-wrap;
    color: #ffffff;
    text-align: center;
    text-decoration: none; 
    margin-left: auto;
    margin-right: auto;   
}

#mitgliedEditTextblockBN{
    display: none;
    opacity: 100%;
    z-index: 10;
    width: 2vw;
    height: 2vw;
    grid-row-start: 2;
    grid-column-start: 1;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 1.5vw;
    cursor: pointer;
    background-image: url("../img//icons/editicon.png");
    margin-left: auto;
    margin-right: 5vw;
    margin-top: auto;
    top:1vw;
}

#mitgliedEditTextblockBN:hover{
    background-image: url("../img//icons/editiconHover.png");

}


#mitgliedChangeTextblockForm{
    display: none;
    grid-template-columns: 100%;
    grid-row-start: 2;
    grid-column-start: 1;
    position: relative;
    z-index: 5;
    width: 65vw;
    height: auto;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    grid-gap:0.5vw;
    margin-top: 1.8vw;
}

#mitgliedChangeTextblockInput{
    display: block;
    grid-column-start: 1;
    grid-row-start: 1;
    width: 65vw;
    height: 15vw;
    resize: none;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-family: 'sarabunextrabold';
    font-size: 1.6vw;
    white-space: pre-wrap;
    line-height: 1.2;
    color: #000000;
    padding-bottom: 0.5vw;
}

#mitgliedChangeTextblockSubmit{
    display:block;
    position: relative;
    top:0.5vw;
    width: 2vw;
    height: 2vw;
    grid-column-start: 1;
    grid-row-start: 2;
    border: none;
    background-color: transparent;
    background-image: url("../img//icons/sendIcon.png");
    background-repeat: no-repeat;
    background-size: contain;
    cursor:pointer;
    margin-left: auto;
    left: -2vw;
}

#mitgliedChangeTextblockSubmit:hover{
    background-color: transparent;
    background-image: url("../img//icons/sendIcon_hover.png");
    background-repeat: no-repeat;
    background-size: contain;
}

#mitgliedAbortChangeTextblock{
    display:block;
    position: relative;
    z-index: 9;
    width: 2vw;
    height: 2vw;
    grid-column-start: 1;
    grid-row-start: 2;
    pointer-events: inherit;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 2vw;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
    top:0.5vw;
    background-color: transparent;
    background-image: url("../img//icons/resetIcon.png");
    margin-left: auto;
}

#mitgliedAbortChangeTextblock:hover{
    background-image: url("../img//icons/resetIconHover.png");
}


/*
Mitglieder Auflistung
*/

#Mitglieder{
    display:grid;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    top: 0.4vw;
    left: 2.5vw;
    grid-column-start: 1;
    grid-row-start: 5;
    grid-template-rows: 10% 50%;
    grid-template-columns: 33.3% 33.3% 33.3%;
    grid-gap: 3vw;
    grid-template-rows: auto;
    width: 74vw;
    height: auto;
}

#mitgliederSortingForm{
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 13% 63% 27%;
    position: relative;
    grid-row-start: 4;
    grid-column-start: 1;
    width: 78vw;
    left: 5vw;
    height: 1.2vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    margin-bottom: 2vw;
    padding-left: 2vw;
    margin-left: auto;
    margin-right: auto;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    padding-top: 1vw;
    padding-bottom: 1vw;
    align-items: center;
}

#sort_option{
    display: block;
    width: 10vw;
    grid-column-start: 2;
    grid-row-start: 1;
    background-color: transparent;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    border:none;
    outline: 0.15vw solid #ffee02;
    cursor: pointer;
}

#mitgliederCount{
    display: block;
    width: 18vw;
    grid-column-start: 3;
    grid-row-start: 1;
}

.mitgliederSortoption{
    background-color: #001a99;
}

.mitgliedsblock{
    z-index: 3;
    display:grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    position: relative;
    width: 21vw;
    padding-top:2vw;
    padding-left:2vw;
    padding-right:2vw;
    padding-bottom: 2vw;
    height: auto;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    margin-left: auto;
    margin-right: auto 
}

.mitgliedContainer{
    display: grid;
    width: 100%;
    height: auto;
    opacity: 100%;
    grid-row-start: 1;
    grid-column-start: 1;
    grid-template-columns: auto;
    grid-template-rows: auto;
    position: relative;
    z-index: 3;
    align-items: center;
    align-items: center;
}

.mitgliedsBild{
    z-index: 3;
    display: block;
    position: relative;
    opacity: 100%;
    width: auto;
    height: auto;
    max-width: 18vw;
    max-height: 18vw;
    margin-left: auto;
    margin-right: auto;
    cursor: url('../img//icons/zoomIn.png'), zoom-in;
}

.mitgliedsName{
    display: block;
    position: relative;
    width: inherit;
    height: 1,8vw;
    font-family: 'sarabunextrabold';
    font-size: 1.6vw;
    color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    text-align: center;

}

.mitgliedsInstrument{
    display: block;
    position: relative;
    width: inherit;
    height: 1.8vw;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    text-align: center;

}

.mitgliedsPosition{
    display: block;
    position: relative;
    width: inherit;
    height: 1.8vw;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    text-align: center;
}

.mitgliedsStatus{
    display: block;
    width: inherit;
    position: relative;
    height: auto;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    text-align: center;
}

.showChangeMitgliedForm{
    display:none;
    width: 2vw;
    height: 2vw;
    position: absolute;
    grid-row-start: 2;
    top:-1vw;
    z-index: 8;
    background-color: #00199990;
    background-image: url("../img//icons/editicon.png");
    background-repeat: no-repeat;
    background-size:1.5vw;
    background-position: center;
    cursor:pointer;
    margin-top: auto;
    margin-left: 22vw;
}

.showChangeMitgliedForm:hover{
    background-image: url("../img//icons/editiconHover.png");
}

.changeMitgliedPanelForm{
    display: none;
    grid-template-columns: 50% 50%;
    grid-template-rows: 15% 15% 15% 10% 10% 10% 4% 4%;
    grid-row-start: 1;
    grid-column-start: 1;
    position: relative;
    z-index: 6;
    align-items: center;
    justify-content: center;
    grid-gap:0.5vw;
    width: inherit  ;
    height: 100%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.changeMitgliedImageContainer{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 4;
    width:fit-content;
    margin-left: auto;
    margin-right: auto;
}


.changeMitgliedImage{
    display: none;
    width: 20vw;
    height: 5vw;
    position: relative;
    z-index: 7;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
    cursor: pointer;
}

.changeMitgliedImage:hover{
    color: #ffee02;
}

.changeMitgliedImage::-webkit-file-upload-button, .changeMitgliedImage::file-selector-button{
    width: 5vw;
    height: 5vw;
    background-color: transparent;
    background-image: url("../img//icons/imageFile.png");
    background-repeat: no-repeat;
    background-size:5vw;
    background-position: center;
    border: none;
    font-family: 'sarabunextrabold';
    color:#ffffff00;
    cursor: pointer;
}

.changeMitgliedImage_Preview{
    display:flex;
    position: relative;
    z-index: 7;
    max-width: 22vw;
    height: auto;
    max-height: 14vw;
    margin-left:auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}

.clearChangeMitgliedImageInputBN{
    display:block;
    position: absolute;
    z-index: 9;
    width: 2vw;
    height: 2vw;
    background-image: url("../img//icons/removeSignRotSemiTransparent.png");
    background-size: 2.1vw;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: 0.25vw transparent;
    border-radius: 0.3vw;
    margin-top: auto;
    cursor: pointer;
    margin:0.1vw;
    padding:0.2vw;
}


.changeMitgliedTextVorname{
    display:block;
    width: 10vw;
    height: 2vw;
    grid-row-start: 4;
    grid-column-start:1;
    position: relative;
    font-family: 'sarabunextrabold';
    color: #000000;
    font-size: 1vw;
    text-align: center;
}

.changeMitgliedTextNachname{
    display:block;
    width: 10vw;
    height: 2vw;
    grid-row-start: 4;
    grid-column-start:2;
    position: relative;
    font-family: 'sarabunextrabold';
    color: #000000;
    font-size: 1vw;
    text-align: center;
}

.changeMitgliedTextInstrument{
    display:block;
    width: 15vw;
    height: 2vw;
    grid-row-start: 5;
    grid-column-start:1;
    grid-column-end: 3;
    position: relative;
    font-family: 'sarabunextrabold';
    color: #000000;
    font-size: 1vw;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.changeMitgliedTextPosition{
    display:block;
    width: 15vw;
    height: 2vw;
    grid-row-start: 6;
    grid-column-start:1;
    grid-column-end: 3;
    position: relative;
    font-family: 'sarabunextrabold';
    color: #000000;
    font-size: 1vw;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.changeMitgliedStatusAktiv{
    display: block;
    position: relative;
    width: 10vw;
    height: auto;
    z-index: 8;
    grid-row-start: 7;
    grid-column-start: 1;
    margin-top: 4vw;
    font-family: 'sarabunextrabold';
    color: #ffffff;
    font-size: 1.2vw;
    top: -1vw;
}

.changeMitgliedStatusAktivCheckbox{
    position: relative;
    width: 1.5vw;
    height: 1.5vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    top:0.25vw;
    margin-left:0.8vw;
    cursor: pointer;
}

.changeMitgliedStatusPassivCheckbox{
    position: relative;
    width: 1.5vw;
    height: 1.5vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    top:0.25vw;
    margin-left:0.8vw;
    cursor: pointer;
}

.changeMitgliedStatusPassiv{
    display: block;
    position: relative;
    width: 10vw;
    height: auto;
    z-index: 8;
    grid-row-start: 7;
    grid-column-start: 2;
    margin-top: 4vw;
    font-family: 'sarabunextrabold';
    color: #ffffff;
    font-size: 1.2vw;
    top: -1vw;
}

.changeMitgliedSubmit{
    display:block;
    position: relative;
    width: 8vw;
    height: auto;
    z-index: 8;
    grid-row-start: 8;
    grid-column-start: 1;
    margin-top: 4vw;
    font-family: 'sarabunextrabold';
    color: #000000;
    font-size: 1vw;
    cursor: pointer;

}

.changeMitgliedReset{
    display:block;
    position: relative;
    width: 8vw;
    height: auto;
    z-index: 8;
    grid-row-start: 8;
    grid-column-start: 2;
    margin-top: 4vw;
    font-family: 'sarabunextrabold';
    color: #000000;
    font-size: 1vw;
    cursor: pointer;
    right: 2vw;

}

.showDeleteMitgliedForm{
    display: block;
    width: 2vw;
    height: 2vw;
    position: relative;
    z-index: 9;
    grid-row-start: 8;
    grid-column-start: 2;
    margin-top: 4vw;    
    background-image: url("../img//icons/trash.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: auto;
    cursor: pointer;
}

.showDeleteMitgliedForm:hover{
    background-image: url("../img//icons/trashHover.png");
}

.deleteMitgliedForm{
    grid-row-start: 1;
    grid-column-start: 1;
    display: none;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50% ;
    margin-top: auto;
    margin-bottom: auto;
    width: inherit;
    height: 50%;
    position: relative;
    z-index: 10;
}

.askDeleteMitgliedConfirm{
    display: block;
    grid-row-start: 1;
    grid-column-start: 1;
    grid-column-end: 3;
    margin-top: auto;
    margin-bottom: auto;
    width: inherit;
    height: inherit;
    position: relative;
    z-index: 10;
    font-family: 'sarabunextrabold';
    color: #ffffff;
    font-size: 2vw;
    text-align: center;
}

.deleteMitgliedConfirm{
    display: block;
    grid-row-start: 3;
    grid-column-start: 1;
    width: 10vw;
    height: 2vw;
    font-family: 'sarabunextrabold';
    color: #000000;
    font-size: 1vw;
    cursor: pointer;
}

.deleteMitgliedAbort{
    display: block;
    grid-row-start: 3;
    grid-column-start: 2;
    width: 10vw;
    height: 2vw;
    font-family: 'sarabunextrabold';
    color: #000000;
    font-size: 1vw;
    cursor: pointer;
}



/*
##################################
	Impressum
##################################
*/

#mainImpressum{
    display: block;
    background-color: #001a99;
    z-index: 3;
    position: relative;
    top: 4vw;
    outline: 0.25vw solid #ffee02;
    max-width: 80%;
    min-height: 27vw;
    padding: 3vw;
    margin-right: auto;
    margin-left: auto;
    height: auto;
    text-decoration: none;
    font-family: 'sarabunextrabold';
    color: #ffffff;
    font-size: 0.9vw;
    text-align: left;
    margin-bottom: 15vw;
}

.impressum{
    display: grid;
    position: relative;
    width: 50vw;
    height: auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 50% 50%;
    font-family: 'sarabunextrabold';
    color: #ffffff;
    font-size: 1vw;
    white-space: pre-wrap;
}

#impressumTitle{
    display: block;
    width: inherit;
    grid-row-start: 1;
}

#impressumText{
    display: block;
    width: inherit;
    position: relative;
    grid-row-start: 2;
}

#impressumTextEditBN{
    display:none;
    width: 2vw;
    height: 2vw;
    position: relative;
    grid-row-start: 3;
    grid-column-start: 2;
    z-index: 8;
    background-color: #00199990;
    background-image: url("../img//icons/editicon.png");
    background-repeat: no-repeat;
    background-size:1.5vw;
    background-position: center;
    cursor:pointer;
    margin-top: auto;
    margin-bottom: auto;
    margin-left:auto;
    top: -2.5vw;
    left:15vw;
}

#impressumTextEditBN:hover{
    background-image: url("../img//icons/editiconHover.png");
    
}

#impresumTextEditForm{
    display: none;
    width: inherit;
    height: auto;
    grid-row-start: 2;
    margin-left: auto;
    margin-right: auto;
    grid-column-start: 1;
    grid-column-end: 3;
}

#impressumEditTextInput{
    width: inherit;
    height: 75vw;
    font-family: 'sarabunextrabold';
    color: #000000;
    font-size: 1vw;
    white-space: pre-wrap;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    resize: none;
}

#impressumEditTextSubmit{
    display:block;
    position: relative;
    z-index: 4;
    right: 6vw;
    width: 10vw;
    grid-row-start: 5;
    font-family: 'sarabunextrabold';
    font-size: 1vw;
    color: #000000;
    border-radius: 0.1vw;
    padding: 0.1vw;
    background-color: #ffffff;
    outline: 0.05vw solid #000000;
    text-align: center;
    cursor: pointer;
    margin-top: 0.5vw;
    margin-right: auto;
    margin-left: auto;
    grid-column-start: 1;
}

#impressumEditTextReset{
    display:block;
    position: relative;
    left:6vw;
    z-index: 5;
    width: 10vw;
    grid-row-start: 5;
    font-family: 'sarabunextrabold';
    font-size: 1vw;
    color: #000000;
    border-radius: 0.1vw;
    padding: 0.1vw;
    background-color: #ffffff;
    outline: 0.05vw solid #000000;
    text-align: center;
    cursor: pointer;
    margin-top: 0.5vw;
    margin-right: auto;
    margin-left: auto;
    grid-column-start: 1;
}


/*
///////////////////////////////////////////////////////////////////////////////////
Adminseite
//////////////////////////////////////////////////////////////////////////////////
*/


#mainAdmin{
    display: grid;
    z-index: 1;
    width: 100%;
    min-height: 54vw;
    height: fit-content;
    position: relative;
    margin-bottom: 2vw;
    margin-top: 2vw;
    padding-top: 2.5vw;
    grid-template-columns: 60% 40%;
    grid-template-rows: auto;
    grid-gap: 4vw;
}

#AdminChanges{
    display: grid;
    position: relative;
    left: -5vw;
    width: inherit;
    height: fit-content;
    grid-gap: 1.5vw;
    align-items:center;
    grid-column-start: 2;
}

#adminRegistration{
    display: block;
    position: relative;
    width: 34.5vw;
    height: 10vw;
    margin-left: 3vw;
    margin-right: auto;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    padding: 1vw
}

#registrationHeadline{
    font-size: 5vw;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
}

#registrationForm{
    display: grid;
    position: relative;
    width: 95%;
    height: fit-content;
    font-family: 'sarabunextrabold';
    font-size: 1vw;
    color: #ffffff;
    grid-template-columns:50% 50%;
    grid-template-rows: 33% 33% 33%;
    grid-gap: 0.5vw;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

#registrationInputUsername{
    display: block;
    width: 14vw;
    height: 2vw;
}

#registrationInputPassword{
    display: block;
    width: 14vw;
    height: 2vw;
}

#registrationSubmit{
    display: block;
    border: none;
    width: 12vw;
    height: 1vw;
    padding-top: 1vw;
    padding-bottom: 2vw;
    background-color: #0000008a;
    font-family: 'sarabunextrabold';
    font-size: 1vw;
    color: #ffffff;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1vw;
}

#registrationSubmit:hover{
    color:#ffee02
}

#registrationAbort{
    display: block;
    border: none;
    width: 12vw;
    height: 1vw;
    padding-top: 1vw;
    padding-bottom: 2vw;
    background-color: #0000008a;
    font-family: 'sarabunextrabold';
    font-size: 1vw;
    color: #ffffff;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1vw;
}

#registrationAbort:hover{
    color:#ffee02
}

#userTable{
    display: grid;
    width: 36.5vw;
    height: fit-content;
    margin-left: 3vw;
    margin-right: auto;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    padding: 1vw;
}

.userName{
    display: inline-block;
    width: 10vw;
    height: 1vw;
    padding-top: 1.1vw;
    font-family: 'sarabunextrabold';
    font-size: 1vw;
    color: #ffffff;
    margin-right: 2vw;
}

.userEdit{
    display: grid;
    margin-top: -2vw;
    margin-left: 12.4vw;
    grid-column-start: 2;

}

.userEditForm{
    display: grid;
    position: relative;
    left: 2vw;
    width: 20vw;
    height: 3vw;
    grid-template-rows: 100%;
    grid-template-columns: 20% 45% 25%;
    align-items: center;
    justify-content: left;
    grid-gap: 2vw;

}

.userStatus{
    display: block;
    position: relative;
    width: 2vw;
    height: 2vw;
    grid-column-start: 1;
    grid-row-start: 1;
}

.userUnlockBN{
    display: block;
    position: relative;
    width: 8vw;
    height: 1vw;
    grid-column-start: 2;
    grid-row-start: 1;
    cursor: pointer;
    border: none;
    background-color: #0000008a;
    text-align: center;
    text-decoration: underline;
    font-family: 'sarabunextrabold';
    font-size: 1vw;
    color: #ffffff;
    padding-top:0.8vw;
    padding-bottom: 0.8vw;
}

.userUnlockBN:hover{
    color: #ffee02;
}

.userUnlockName{
    display: none;
    position: relative;
    left: -14.5vw;
    width: 13vw;
    height: 2vw;
    grid-column-start: 1;
}

.userUnlockPassword{
    display: none;
    position: relative;
    left: -6.5vw;
    width: 13vw;
    height: 2vw;
    grid-column-start: 2;
}

.userEditSubmit{
    display: none;
    position: relative;
    grid-column-start: 3;
    left: -3vw;
    width: 2vw;
    height: 2vw;
    border: none;
    background-color: transparent;
    background-image: url(../img/icons/tick.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
}

.userEditSubmit:hover{
    background-image: url(../img/icons/tickHover.png);
}

.userUnlockAbort{
    display: none;
    position: relative;
    grid-column-start: 4;
    left:-7vw;
    width: 2vw;
    height: 2vw;
    border: none;
    background-color: transparent;
    background-image: url(../img/icons/cross.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
}

.userUnlockAbort:hover{
    background-image: url(../img/icons/crossHover.png);
}

.userDeleteIcon{
    display: block;
    position: relative;
    width: 2.5vw;
    height: 2.5vw;
    grid-column-start: 3;
    grid-row-start: 1;
    background-image: url("../img/icons/trash.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}

.userDeleteIcon:hover{
    background-image: url("../img/icons/trashHover.png");
}

.deleteUserForm{
    display: none;
    position: relative;
    left: -3vw;
    width: 21vw;
    height: 3vw;
    grid-template-columns: 77% 27% 25%;
    grid-template-rows: 100%;
    grid-column-start: 1;
}


.deleteUserConfirm{
    display: block;
    width: 20vw;
    height: 1.2vw;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;
}

.userDeleteSubmit{
    display: block;
    width: 3vw;
    height: 3vw;
    border: none;
    grid-column-start: 2;
    grid-row-start: 1;
    background-color: transparent;
    background-image: url("../img/icons/tick.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
}
.userDeleteSubmit:hover{
    background-image: url("../img/icons/tickHover.png");

}

.userDeleteAbort{
    display: block;
    width: 3vw;
    height: 3vw;
    border: none;
    grid-column-start: 3;
    grid-row-start: 1;
    background-color: transparent;
    background-image: url("../img/icons/cross.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
}

.userDeleteAbort:hover{
    background-image: url("../img/icons/crossHover.png");

}

.userTrennlinie{
    display: block;
    width: 34vw;
    height: 0.1vw;
    background-color: #ffee02;
}

#contactEmail{
    display: block;
    width: 34.5vw;
    height: 14vw;
    margin-left: 3vw;
    margin-right: auto;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    padding: 1vw;
}

#currentMailHeadline{
    display: block;
    width: inherit;
    height: 2vw;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;

}

#currentMail{
    display: block;
    width: inherit;
    height: 2vw;
    font-family: 'sarabunextrabold';
    font-size: 1.2vw;
    color: #ffffff;

}

#changeContactMailForm{
    display: grid;
    position: relative;
    width: 95%;
    height: fit-content;
    font-family: 'sarabunextrabold';
    font-size: 1vw;
    color: #ffffff;
    grid-template-columns:50% 50%;
    grid-template-rows: 33% 33% 33%;
    grid-gap: 0.5vw;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

#changeContactMailInput{
    display: block;
    width: inherit;
    height: 2vw;
    grid-column-start: 1;
    grid-column-end: 3;
}

#changeContactMailSubmit{
    display: block;
    border: none;
    width: 12vw;
    height: 1vw;
    padding-top: 1vw;
    padding-bottom: 2vw;
    background-color: #0000008a;
    font-family: 'sarabunextrabold';
    font-size: 1vw;
    color: #ffffff;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1vw;
}

#changeContactMailSubmit:hover{
    color:#ffee02
}

#changeContactMailAbort{
    display: block;
    border: none;
    width: 12vw;
    height: 1vw;
    padding-top: 1vw;
    padding-bottom: 2vw;
    background-color: #0000008a;
    font-family: 'sarabunextrabold';
    font-size: 1vw;
    color: #ffffff;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1vw;
}

#changeContactMailAbort:hover{
    color:#ffee02;
}

/*

//////////////////////////////////
    Statistics
/////////////////////////////////

*/

#statistics{
    display: grid;
    width: 100%;
    height: fit-content;
    grid-column-start: 1;
    grid-row-start: 1;
    grid-template-columns: 100%;
    grid-template-rows: auto;
}

#statisticsHeadline{
    display: block;
    position: relative;
    width: 57.5vw;
    height: 1vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    font-family: 'sarabunextrabold';
    font-size: 2vw;
    color: #ffffff;
    text-align: center;
    padding-top: 1vw;
    padding-bottom: 2vw;
    margin-left: 2vw;
    margin-bottom: 2vw;
    margin-top: 0vw;
    grid-row-start: 1;
}

#mitgliederStatistiken{
    display: grid;
    position: relative;
    height: fit-content;
    grid-row-start: 2;
    outline: 0.25vw solid #ffee02;
    background-color: #001a99;
    margin-bottom: 2vw;
    margin-left: 2vw;
    padding: 2vw;
}

#mitgliederStatisticsContainer{
    display: grid;
    position: relative;
    grid-auto-rows: 3.2vw;
    grid-auto-flow: dense;
    grid-template-columns: 87% 10% 1%;
    width: 53.5vw;
    height: fit-content;
    font-family: 'sarabunextrabold';
    font-size: 2vw;
    color: #ffffff;
    align-items: center;
    justify-content: center;

}


.mitgliederStatisticsZahl{
    display: inherit;
    position: relative;
    width: 2vw;
    height:2vw;
    grid-column-start: 2;
    text-align: right;
    margin-left: auto;
}

.mitgliederStatisitsName{
    display: inherit;
    position: relative;
    width: 2vw;
    height:2vw;
    grid-column-start: 1;
    text-align: right;
    text-align: right;
    margin-left: auto;
}

.mitgliederStatisticsLine{
    display: block;
    position: relative;
    top: 0.45vw;
    left: -52vw;
    width: 52vw;
    height: 0.1vw;
    color: #ffee02;
    font-family: 'sarabunextrabold';
    font-size: 2vw;
    grid-column-start: 3;
}

/*

Month

*/

#month{
    display: grid;
    position: relative;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    grid-row-start: 4;
}

#chartsMonth{
    display: block;
    position: inherit;
    width: 56vw;
    height: 33vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    padding-top: 0;
    padding-right: 1vw;
    padding-left: 0.5vw;
    padding-bottom: 0.5vw;
    margin-left: 2vw;
    margin-right: auto;
}

#chartsMonthHeader{
    display: grid;
    position: relative;
    z-index: 2;
    width: 50vw;
    height: 2vw;
    grid-template-columns: 10% 80% 10%;
    grid-template-rows: 100%;
    align-items: center;
    justify-content: center;
    margin-left: 4vw;
    padding-top: 2vw;
    padding-bottom: 1vw;
}

#chartMonthArrowLeft{
    display: block;
    height: 4vw;
    width: 4vw;
    position: inherit;
    font-family: 'sarabunextrabold';
    font-size: 4vw;
    color: #ffffff;
    text-align: center;
    grid-column-start: 1;
    grid-row-start: 1;
    padding: 0.5vw;
    cursor: pointer;
}

#chartMonthArrowLeft:hover{
    color: #ffee02;
}

#chartMonthHeadline{
    display: block;
    height: 2vw;
    position: inherit;
    font-family: 'sarabunextrabold';
    font-size: 2vw;
    color: #ffffff;
    text-align: center;
    grid-column-start: 2;
    grid-row-start: 1;
}

#chartMonthArrowRight{
    display: block;
    height: 4vw;
    width: 4vw;
    position: inherit;
    font-family: 'sarabunextrabold';
    font-size: 4vw;
    color: #ffffff;
    text-align: center;
    grid-column-start: 3;
    grid-row-start: 1;
    padding: 0.5vw;
    cursor: pointer;
}

#chartMonthArrowRight:hover{
    color: #ffee02;
}

#chartWrapperCurrentMonthChartIndex{
    display: grid;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
}

#chartWrapperCurrentMonthChartUnserVerein{
    display: none;
}

#chartWrapperCurrentMonthChartGalerie{
    display: none;
}

#chartWrapperCurrentMonthChartKontakt{
    display: none;
}

/*

Week


*/

#week{
    display: grid;
    position: relative;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    margin-top: 2vw;
    grid-row-start: 5;
}

#chartsWeek{
    display: block;
    position: inherit;
    width: 56vw;
    height: 33vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    padding-top: 0;
    padding-right: 1vw;
    padding-left: 0.5vw;
    padding-bottom: 0.5vw;
    margin-left: 2vw;
    margin-right: auto;
}

.chartsHeader{
    display: grid;
    position: relative;
    z-index: 2;
    width: 50vw;
    height: 2vw;
    grid-template-columns: 10% 80% 10%;
    grid-template-rows: 100%;
    align-items: center;
    justify-content: center;
    margin-left: 4vw;
    padding-top: 2vw;
    padding-bottom: 1vw;
}

.chartArrowLeft{
    display: block;
    height: 4vw;
    width: 4vw;
    position: inherit;
    font-family: 'sarabunextrabold';
    font-size: 4vw;
    color: #ffffff;
    text-align: center;
    grid-column-start: 1;
    grid-row-start: 1;
    padding: 0.5vw;
    cursor: pointer;
}

.chartArrowLeft:hover{
    color: #ffee02;
}

.chartsHeadline{
    display: block;
    height: 2vw;
    position: inherit;
    font-family: 'sarabunextrabold';
    font-size: 2vw;
    color: #ffffff;
    text-align: center;
    grid-column-start: 2;
    grid-row-start: 1;
}

.chartArrowRight{
    display: block;
    height: 4vw;
    width: 4vw;
    position: inherit;
    font-family: 'sarabunextrabold';
    font-size: 4vw;
    color: #ffffff;
    text-align: center;
    grid-column-start: 3;
    grid-row-start: 1;
    padding: 0.5vw;
    cursor: pointer;
}

#chartWeekArrowRight:hover{
    color: #ffee02;
}

#chartWrapperCurrentWeekChartIndex{
    display: grid;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
}

#chartWrapperCurrentWeekChartUnserVerein{
    display: none;
}

#chartWrapperCurrentWeekChartGalerie{
    display: none;
}

#chartWrapperCurrentWeekChartKontakt{
    display: none;
}

/*

Year


*/

#year{
    display: grid;
    position: relative;
    grid-template-columns: 100%;
    margin-bottom: 2vw;
    grid-row-start: 3;
}

#chartsYear{
    display: block;
    position: inherit;
    width: 56vw;
    height: 33vw;
    background-color: #001a99;
    outline: 0.25vw solid #ffee02;
    padding-top: 0;
    padding-right: 1vw;
    padding-left: 0.5vw;
    padding-bottom: 0.5vw;
    margin-left: 2vw;
    margin-right: auto;
}

#chartYearArrowRight:hover{
    color: #ffee02;
}

#chartWrapperCurrentYearChartIndex{
    display: grid;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
}

#chartWrapperCurrentYearChartUnserVerein{
    display: none;
}

#chartWrapperCurrentYearChartGalerie{
    display: none;
}

#chartWrapperCurrentYearChartKontakt{
    display: none;
}