/* Oberpositionierung */
#holder_button_1{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

#holder_button_2{
	position: absolute;
	top: 30px;
	left: 250px;
}

#holder_button_popup_login{
	position: absolute;
	left: 50%;
	transform: translate(-50%);
}

#button_holder_update_seite_spalte1{
	position: absolute;
	top: 107px;
	left: 150px;
}

#position_button_I_p1{
	position: absolute;
	top: 175px;
	left: 210px;
	pointer-events: none;
	/* left: 210px; // echter Wert für später */
}

#position_button_II_p1{
	position: absolute;
	top: 475px;
	left: 210px;
	pointer-events: none;
	/* left: 210px; // echter Wert für später */
}

#position_button_III_p1{
	position: absolute;
	top: 715px;
	left: 210px;
	pointer-events: none;
	/* left: 210px; // echter Wert für später */
}

/* Oberpositionierung -> Upload PopUp */
#holder_button_1_upload{
	position: absolute;
	top: 0px;
	left: 80px;
	pointer-events: none;
}
#holder_button_2_upload{
	position: absolute;
	top: 0px;
	right: 40px;
}
#holder_button_3_upload{
	position: absolute;
	top: 0px;
	left: 80px;
	pointer-events: none;
}
#holder_button_4_upload{
	position: absolute;
	top: 0px;
	right: 40px;
}
#holder_button_5_upload{
	position: absolute;
	top: 0px;
	left: 80px;
	pointer-events: none;
}

#submit_upload_datei{
	height: 40px;
	width: 150px;
	z-index: 100;
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

#optionen_auswahlmöglichkeiten{
	position: absolute;
	top: 5px;
	right: 55px;
	width: 45px;
	height: 45px;
	border: none;
	background: none;
}
#optionen_auswahlmöglichkeiten:hover{
	transform: scale(1.05);
  transition-duration: 200ms;
	cursor: pointer;
}

#icon_setting{
	width: 40px;
	height: 40px;
}

.btn-box{
	position: absolute;
	width: 500px;
	height: 80px;
	/*border: 1px solid;*/
}


.button_mk_simple {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  border-radius: 6px;
  border: none;
  color: #fff;
  background: linear-gradient(180deg, #0061A1 0%, #367AF6 100%);
  background-origin: border-box;
  box-shadow: 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  }
  .button_mk_simple:hover{
  cursor: pointer;
  background: linear-gradient(180deg, #0061A1 0%, #0f306d 100%);
  }
  .button_mk_simple:focus {
  box-shadow: inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2), 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), 0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
  outline: 0;
  }

  .button_mk_simple2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
    border-radius: 6px;
    border: none;

    background: #6E6D70;
    box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12);
    color: #DFDEDF;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }

  .button_mk_simple2:focus {
    box-shadow: inset 0px 0.5px 0px -0.25px rgba(255, 255, 255, 0.5), 0px 0.5px 1px rgba(0, 0, 0, 0.5), 0px 0px 0px 3.5px rgba(85, 22, 25, 0.671);
    outline: 0;
    cursor: pointer;
  }
  .button_mk_simple2:hover{
    cursor: pointer;
    background: linear-gradient(180deg, #0061A1 0%, #0f306d 100%);
    }

    .button_mk_simple3 {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 6px 14px;
      font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
      border-radius: 6px;
      border: none;
  
      background: #6E6D70;
      box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12);
      color: #DFDEDF;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
    }
  
    .button_mk_simple3:focus {
      box-shadow: inset 0px 0.5px 0px -0.25px rgba(255, 255, 255, 0.5), 0px 0.5px 1px rgba(0, 0, 0, 0.5), 0px 0px 0px 3.5px rgba(85, 22, 25, 0.671);
      outline: 0;
      cursor: pointer;
    }
    .button_mk_simple3:hover{
      cursor: pointer;
      background: linear-gradient(180deg, #0061A1 0%, #0f306d 100%);
      }

      .button_mk_simple5 {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 3px 7px;
        /* font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif; */
        border-radius: 6px;
        border: none;
        background: #0061A1;
        box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.1), inset 0px 0.5px 0.5px rgba(255, 255, 255, 0.5), 0px 0px 0px 0.5px rgba(0, 0, 0, 0.12);
        color: #DFDEDF;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
      }
    
      /* .button_mk_simple5:focus {
        box-shadow: inset 0px 0.5px 0px -0.25px rgba(255, 255, 255, 0.5), 0px 0.5px 1px rgba(0, 0, 0, 0.5), 0px 0px 0px 3.5px rgba(85, 22, 25, 0.671);
        outline: 0;
        cursor: pointer;
      } */
      .button_mk_simple5:hover{
        cursor: pointer;
        background: linear-gradient(180deg, #0061A1 0%, #656e80 100%);
        }

.MK_button {
  display: inline-flex;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
  height: 40px;
  width: 100px;
  border: 2px solid #BFC0C0;
	border-radius: 5px;
  color: #BFC0C0;
  text-transform: uppercase;
  text-decoration: none;
  font-size: .8em;
  letter-spacing: 1.5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
	z-index: 10;
}

.MK_button_klein {
  display: inline-flex;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
  height: 20px;
  width: 100px;
  border: 2px solid #BFC0C0;
	border-radius: 5px;
  color: #0061A1;
  text-transform: uppercase;
  text-decoration: none;
  font-size: .8em;
  letter-spacing: 1.5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
	z-index: 10;
}

.MK_button_klein_2 {
  display: inline-flex;
	position: absolute;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
  height: 25px;
  width: 200px;
  border: 2px solid #BFC0C0;
	border-radius: 5px;
  color: #0061A1;
  text-transform: uppercase;
  text-decoration: none;
  font-size: .7em;
  letter-spacing: 1.5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
	z-index: 10;
}

.button_clean {
  position: absolute;
  top: 25px;
  left: 70px;
  display: inline-flex;
  height: 20px;
  width: 100px;
  border: 2px solid #BFC0C0;
	border-radius: 5px;
  /*margin: 0px 20px 0px 20px;*/
  color: #BFC0C0;
  text-decoration: none;
  font-size: 0.8em;
  letter-spacing: 1.5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.circle_button_anchor{
	color: #BFC0C0;
	text-decoration: none;
	letter-spacing: 1px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}

.arrow_button_anchor{
	color: #BFC0C0;
	text-decoration: none;
	letter-spacing: 1px;
}

.rahmen{
  position: relative;
  top: 0;
  left: 0;
  width: 150px;
  height: 60px;
  border: 2px solid;
  border-color: #7c8491;
  border-radius: 10px;
  /* z-index: 3; */
}

.box_effekt{
	height: 64px; /* rahmen height x [2 x Margin MK Button] + [2 x border MK_button] */
	width: 190px; /* rahmen width x [2 x Margin MK Button] + [2 x border MK_button] */
	/* border: 2px solid; */
}

.border_lo{
  position: absolute;
  top: -8px;
  left: -4px;
  width: 120px; /* widthh rahmen - 20px */
  height: 40px;
  /*background-color: #fff;*/
  border-radius: 15px;
  z-index: 0;
  transition: 500ms;
}
.border_lo::before{
  position: absolute;
  background: #fff;
  z-index: 2;
  transition: 500ms;
  content: '';
}
.border_lo::before {
  width: 120px; /* widthh rahmen - 20px */
  height: 50px;
}
.border_lo::after {
  height: 0px;
  width: 0px;
}

.border_rb{
  position: absolute;
  bottom: -10px;
  left: 35px;
  width: 120px; /* widthh rahmen - 20px */
  height: 40px;
  /*background-color: #fff; */
  border-radius: 15px;
  z-index: 0;
  transition: 500ms;
}
.border_rb::before{
  position: absolute;
  background: #fff;
  z-index: 2;
  transition: transform 500ms;
  transform: scale(1, 1);
  transform-origin: bottom right;
  content: '';
}
.border_rb::before {
  width: 120px; /* widthh rahmen - 20px */
  height: 40px;
}
.border_rb::after {
  height: 0px;
  width: 0px;
}

/*  Animation */
.box_effekt:hover  .border_lo::before {
	width: 0px;
	height: 0px;
}
.box_effekt:hover  .border_rb::before {
	transform: scale(0, 0);
}

/*  $$$$$$$$$$$$$$$$$$  */
/*    Design Button 1   */
/*  $$$$$$$$$$$$$$$$$$  */
.button_1{
	position: relative;
	overflow: hidden;
	cursor: pointer;
}
.button_1 a {
  position: relative;
  transition: all .45s ease-Out;
}
.button_1 p {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  font-family:UniBT;
  font-size: 18px;
  transition: all .45s ease-Out;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
}
.button_1 .circle_button {
  width: 0%;
  height: 0%;
  opacity: 0;
  line-height: 40px;
  border-radius: 50%;
  background: #0061A1;
  position: absolute;
  transition: all .5s ease-Out;
  top: 20px;
  left: 70px;
}
.button_1 .circle_button_red {
  width: 0%;
  height: 0%;
  opacity: 0;
  line-height: 40px;
  border-radius: 50%;
  background: #8B0000;
  position: absolute;
  transition: all .5s ease-Out;
  top: 20px;
  left: 70px;
}
.button_1:hover .circle_button {
  width: 200%;
  height: 500%;
  opacity: 1;
  top: -70px;
  left: -70px;
}
.button_1:hover .circle_button_red {
  width: 200%;
  height: 500%;
  opacity: 1;
  top: -70px;
  left: -70px;
}
.button_1:hover a {
	color: #fff;
}
.button_1:hover p {
	color: #fff;
}

/*  $$$$$$$$$$$$$$$$$$  */
/*    Design Button 2   */
/*  $$$$$$$$$$$$$$$$$$  */
.button_2 {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.button_2 a {
  position: relative;
  transition: all .45s ease-Out;
}
.button_2 p {
  position: relative;
  transition: all .45s ease-Out;
}
.translate_button {
  transform: rotate(50deg);
  width: 100%;
  height: 300%;
  left: -200px;
  top: -20px;
  background: #0061A1;
  position: absolute;
  transition: all .3s ease-Out;
}
.button_2:hover .translate_button {
  left: 0;
}
.button_2:hover a {
  color: #fff;
}
.button_2:hover p {
  color: #fff;
}

/*  $$$$$$$$$$$$$$$$$$  */
/*    Design Button 3   */
/*  $$$$$$$$$$$$$$$$$$  */

.button_3 {
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.button_3  a {
	position: relative;
	transition: all .45s ease-Out;
}

.spin_button {
	width: 0;
	height: 0;
	  opacity: 0;
	  left: 70px;
	  top: 20px;
	  transform: rotate(0deg);
	  background: none;
	  position: absolute;
	  transition: all .5s ease-Out;
}

	.button_3:hover .spin_button {
	  width: 200%;
	  height: 500%;
	  opacity: 1;
	  left: -70px;
	  top: -70px;
	  background: #0061A1;
	  transform: rotate(80deg);
	}

	.button_3:hover a {
	  color: #2D3142;
	}


/* Button 4 */

.button_4 {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.button_4 a {
  position: relative;
  left: 0;
  transition: all .35s ease-Out;
	color: #0061A1;
}

.dub-arrow_button {
  width: 100%;
  height: 100%;
  background: #009260;
  left: -200px;
  position: absolute;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .35s ease-Out;
  bottom: 0;
}

.button_4 img {
  width: 20px;
  height: auto;
}

.button_4:hover .dub-arrow_button {
  left: 0;
}

.button_4:hover a {
  left: 150px;
}