.instructionimg{
  font-size: 1000%;
  color: #612d91;
}



.mjeshtercontenthome{
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
}
.mjeshterheader{
  margin: auto;
}

.container-fluid {
  position: relative;
    left: 50%;
    top: 490px;
    height: 50vh;
    transform: translateY(-50%) translateX(-50%);
    width: 100%;
    padding: 3.5%;
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: nowrap;
    justify-content: center;
    

}
.media {
  background-position: center center;
  position: absolute;
  transition: all 0.3s ease 0s;
  width: 80%;
  background: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #ffffff;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    border-radius: 30px;

}
figure {
  height: inherit;
  overflow: hidden;
  position: relative;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.figcaptionbackground{
  border-radius: 30px !important;
    background-color: #0000008a;
}

figure a {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
}
figcaption {
  color: #252830;
  
  margin: 15px;
  
  position: absolute;
  top: 12.5%;
  width: 250px;
}
.mjeshterheaderbody {
  background-color: white;
  bottom: 0;
  padding: 15px;
  position: absolute;
  width: 100%;

  border-radius: 30px;
}
svg {
  height: inherit;
  width: 100%;
}
svg text {
  text-anchor: middle;
}
svg #alpha {
  fill: white;
}
svg .title {
  font-size: 19px;
    font-family: system-ui;
    font-weight: 650;
    letter-spacing: 2px;
}
svg #base {
  fill: white;
  -webkit-mask: url(#mask);
  mask: url(#mask);
}


/* bis hier */

.startcontainer{
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
}
.clienthomecontent{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  background-color: #fa9d00;
}



.Headline-Instruction {
  text-align:-webkit-center;
  margin-top: 15%;
}

.HI-h2{
  color: #612d91;
}

.Instruction{
  display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    justify-content: flex-start;
}

table {
  border-spacing: 40px;
}

.tr{
  display: flex !important;  
flex-direction: column !important;
}

th, td {
  
  padding: 5px;
  text-align: center;
  box-shadow: 2px 2px 15px -2px rgb(50 50 50);
  border-radius: 30px;
  padding: 10px;
  margin: 10px;
  border-spacing: 30px;
  height:350px;
}

@media(min-width: 851px){
  th, td{
    width: 50%;
  }
 
}



@media(max-width: 1500px){
  th, td {
    height:250px;
  }
}

@media(max-width: 850px){
  th, td {
    height:200px;
  }
}


@media(max-width: 850px){
  th, td {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  th, td {
    justify-content: center;
  }
}


.selectedborder{
  box-shadow: inset 0 0 10px #612d91;
}

.left{
  float: left;
  width: fit-content;
  margin-left: 11px;
}
.right{
  float: right;
  width: fit-content;
  margin-right: 11px;
}

.removewp {
  color: red;
  font-size: 20px;
  font-weight: bold;
  
  cursor: pointer;
}

#output {
  padding: 20px;
  display: block;
}

form {
  margin-top: 20px;
}

select {
  width: 300px;
}


.selectauswahl{
  border-radius: 100px;
  border: 1.5px solid #000000;
  padding: 8px;
  margin: 3px;
  width: 200px;
  text-align: center;
  margin:0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}



/* Orangene Farbe: #fa9d00 */
.selectfieldmodify {
    width: 100% !important;
    
    
    padding: 12px 20px;
      margin: 8px 0;
      
      border: 1px solid #ccc;
      box-sizing: border-box;
  
      
  }
  
  .header{
      
      box-shadow: 0px 7px 5px rgba(34, 30, 30, 0.473);
      background: #612d91;
      color: #000000;
      font-family: Catamaran;
      width:100%;
      /* zentrieren vom headerinhalt */
      display: flex;
      z-index: 3;   
      flex-direction: row;
      justify-content: space-between;
      align-items: center
  }
  
  .header>a{
    margin:0%;
    padding: 0%;
  }
  
  
  .headerbutton1{
    
    align-items: right;
    justify-content: right;
  }
  
  
  .headerbutton{
    
    border: 2px solid #fa9d00;
    border-radius: 10px;
    color: #ffffff;
    background-color: #612d91;
    font-family: Catamaran;
    font-size: x-large;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 8px 8px;   
    cursor: pointer;
    width: 174.84px;
  }

  .headerbuttoninimg{
    border: 2px solid #fa9d00;
    border-radius: 10px;
    color: #ffffff;
    background-color: #612d91;
    font-family: Catamaran;
    font-size: xx-large;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 8px 8px;
    cursor: pointer;
    width: 203.84px;
  }

  .headerbuttontop{
     
    border: 2px solid #fa9d00;
    border-radius: 10px;
    color: #ffffff;
    background-color: #612d91;
    font-family: Catamaran;
    font-size: x-large;
    padding-top: 5px;
    padding-bottom: 5px;
    margin: 8px 8px;   
    cursor: pointer;
    width: fit-content;
  }
  
  @media screen and (max-width: 480px) {
    .headerbutton{
      border: 2px solid #fa9d00;
      border-radius: 10px;
      color: #ffffff;
      background-color: #612d91;
      font-family: Catamaran;
      font-size: medium;
      padding-top: 5px;
      padding-bottom: 5px;
      margin: 8px 8px;   
      cursor: pointer;
      width: 131.23px;
    }
  }
  
  @media screen and (max-width: 380px) {
    .headerbutton{
      border: 2px solid #fa9d00;
      border-radius: 10px;
      color: #ffffff;
      background-color: #612d91;
      font-family: Catamaran;
      font-size: 15px;
      padding-top: 5px;
      padding-bottom: 5px;
      margin: 8px 8px;   
      cursor: pointer;
      width: 125.78px;
    }
  }
  
  /* Page content */
  .content {
    
    position:relative;
    
    }
  
    /* The sticky class is added to the header with JS when it reaches its scroll position */
  .sticky {
      position: fixed;
      top: 0px;
      left: 0px;
      right: 0px;
      width: 100%;
    }
  
    /* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
  
  
  .Einladung{
        margin-top: 120px;
        font-family: Arial;
        height: 80%;
        position:relative;
        z-index: 1;
        
    } 
  
  img{
      size:inherit;
      box-shadow: lightgray;
      
    }
    
  .column {
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      
  
   }
  
   .btntxt{
    position: absolute;
    margin-left:0%;
    margin-top:-18%;
   
    background: rgb(0, 0, 0); /* Fallback color */
    background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
   
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
     }
  
  .btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: #24262b;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
  }
  
  .btn:hover {
    background-color: black;
  }
  
  
  .client1{
    width: 100%;
    
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
     
  .mjeshter1{
    width: 100%;
    
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
    @media screen and (min-width: 960px) {
    
      .row {
        display: flex;
       
      }
      
      /* Create two equal columns that sits next to each other */
      .column {
        
        flex: 50%;
       
        
        /*height: 300px;*/ /* Should be removed. Only for demonstration */
     }
    
    }
  
    @media screen and (max-width: 959px) {
    
      .row {
        display: flex;
        
      }
      
      /* Create two equal columns that sits next to each other */
      .column {
        
        flex: 50%;
        
        display: flex;
      }
      .mjeshter1{
        width: 100%;
        min-width: 360px;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .client1{
        width: 100%;
        min-width: 360px;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
    
    }
    @media screen and (max-width: 360px) {
    
      .row {
        display: flex;
        
      }
      
      /* Create two equal columns that sits next to each other */
      .column {
        
        flex: 50%;
        
        display: flex;
      }
      .mjeshter1{
        width: 100%;
        min-width: 181px;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .client1{
        width: 100%;
        min-width: 181px;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
    
    }
  
  
  
  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
  .flip-card {
    background-color: transparent;
    width: 300px;
    height: 150px;
    border: 1px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 300px;
    height: 150px;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: #bbb;
    color: black;
  }
  
  /* Style the back side */
  .flip-card-back {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
  }
  /* Footer */
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
  body{
      line-height: 1.5;
      font-family: 'Poppins', sans-serif;
  }
  *{
      margin:0;
      padding:0;
      box-sizing: border-box;
  }
  .container{
      max-width: 1170px;
      margin:auto;
  }
  .row{
      display: flex;
      flex-wrap: wrap;
  }
  ul{
      list-style: none;
  }
  .footer{
      background-color: #24262b;
      padding: 70px 0;
  }
  .footer-col{
     width: 25%;
     padding: 0 15px;
  }
  .footer-col h3{
      font-size: 18px;
      color: #ffffff;
      text-transform: capitalize;
      margin-bottom: 35px;
      font-weight: 500;
      position: relative;
  }
  .footer-col h3::before{
      content: '';
      position: absolute;
      left:0;
      bottom: -10px;
      background-color: #fa9d00;
      height: 2px;
      box-sizing: border-box;
      width: 50px;
  }
  .footer-col ul li:not(:last-child){
      margin-bottom: 10px;
  }
  .footer-col ul li a{
      font-size: 16px;
      text-transform: capitalize;
      color: #ffffff;
      text-decoration: none;
      font-weight: 300;
      color: #bbbbbb;
      display: block;
      transition: all 0.3s ease;
  }
  .footer-col ul li a:hover{
      color: #ffffff;
      padding-left: 8px;
  }
  .footer-col .social-links a{
      display: inline-block;
      height: 40px;
      width: 40px;
      background-color: rgba(255,255,255,0.2);
      margin:0 10px 10px 0;
      text-align: center;
      line-height: 40px;
      border-radius: 50%;
      color: #ffffff;
      transition: all 0.5s ease;
  }
  .footer-col .social-links a:hover{
      color: #24262b;
      background-color: #ffffff;
  }
  
  /*responsive*/
  @media(max-width: 767px){
    .footer-col{
      width: 50%;
      margin-bottom: 30px;
    } 
    
  }
  @media(max-width: 574px){
    .footer-col{
      width: 100%;
  }
  }
  
  .footer_bottom {
    background: #24262b;
    width: 100%;
    padding: 20px 0;
    text-align: center;
}

.footer_bottom p {
    font-size: 14px;
    word-spacing: 2px;
    
    color: #b5b5b5;
}

.footer_bottom span {
    color: #612d91;
    font-weight: bolder;
}
  
  form {
      border: 3px solid #f1f1f1;
    }
    
    /* Full-width inputs */
    input[type=text], input[type=password] {
      width: 100%;
      padding: 12px 20px;
      margin: 8px 0;
      display: inline-block;
      border: 1px solid #ccc;
      box-sizing: border-box;
    }
    
    /* Set a style for all buttons */
    button {
      background-color: #4CAF50;
      color: white;
      padding: 14px 20px;
      margin: 8px 0;
      border: none;
      cursor: pointer;
      width: 100%;
    }
  
  
    
    
    /* Add a hover effect for buttons */
    button:hover {
      opacity: 0.8;
    }
    
    /* Extra style for the cancel button (red) */
    .cancelbtn {
      width: auto;
      padding: 10px 18px;
      background-color: #f44336;
    }
    
    /* Center the avatar image inside this container */
    .imgcontainer {
      text-align: center;
      margin: 24px 0 12px 0;
    }
    
    /* Avatar image */
    img.avatar {
      width: 40%;
      border-radius: 30px;
    }
    
    /* Add padding to containers */
    .container {
      padding: 16px;
    }
    
    /* The "Forgot password" text */
    span.psw {
      float: right;
      padding-top: 16px;
    }
    
    /* Change styles for span and cancel button on extra small screens */
    @media screen and (max-width: 300px) {
      span.psw {
        display: block;
        float: none;
      }
      .cancelbtn {
        width: 100%;
      }
    }
  
    /* The Modal (background) */
  .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 3; /* Sit on top */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
      padding-top: 60px;
  
    }
    
    /* Modal Content/Box */
    .modal-content {
      background-color: #fefefe;
      margin: 5px auto; /* 15% from the top and centered */
      border: 1px solid #888; 
      padding-top: 10px;
      border-radius: 25px;
      
      width: 80%; /* Could be more or less, depending on screen size */
    }
    
    /* The Close Button */
    .close {
      /* Position it in the top right corner outside of the modal */
      position: absolute;
      right: 25px;
      top: 0;
      color: red;
      font-size: 35px;
      font-weight: bold;
    }
    
    /* Close button on hover */
    .close:hover,
    .close:focus {
      color: red;
      cursor: pointer;
    }
    
    /* Add Zoom Animation */
    .animate {
      -webkit-animation: animatezoom 0.6s;
      animation: animatezoom 0.6s
    }
  
    .btnbtn-primarybtn-lg{
      color: #000;
    }
  
    .textbox{
      width: 100%;
    }
















.welcomemjeshter{
  display: flex;
    width: 100%;
    align-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
    
}

.welcomeheader {
  position: absolute;
  color: white;
  text-align: center;
}
.welcomeh1 {
  text-transform: uppercase;
    margin: 0;
    font-size: 1.3rem;
}
.welcomep {
  margin: 0;
    font-size: 1.1rem;
    margin-bottom: 25px;
}

.welcomemjeshterimg{
  width: 90%;
    border-radius: 40px;
    margin-top: 20px;
    box-shadow: 2px 2px 15px -2px rgb(50 50 50);
}