body, html {
    height: 100%;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    overflow: hidden;
    color: white;
}

.scrollable-wrapper {
    height: 100%;
    overflow-y: scroll; /* This enables scrolling on the child element */
    margin-right: -17px; /* Increase/decrease this value to match the scrollbar width */
    box-sizing: content-box; /* This makes the padding push the content width out */
  }
.body-register{

background-image: radial-gradient(100.00% 69.85% at 100% 34.92%, rgba(255, 255, 255, 0) 0%, rgba(53, 25, 0, 0) 0%, rgba(53, 25, 0, 0.10) 64%, rgba(53.07, 25.30, 0, 0.22) 82%, rgba(53.12, 25.50, 0, 0.28) 86%, rgba(53.12, 25.50, 0, 0.30) 100%),
var(--color-black); 
background-color: var(--color-black);
background-size: cover;
background-repeat: no-repeat;

width: 100%; /* Full width of the parent container */
height: 100vh; /* Full height of the viewport, or adjust as needed */
background-position: center; /* Center the image in the container */
overflow: hidden;
display:flex;
flex-direction: column;
justify-content: space-between;
}

.agb-section{
    
    margin-top:50px;
    padding: 0 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
 .agb-section-title {
    color: var(--color-accent);
    font-weight: bold;
    
  }

  
  .agb-section p, .agb-section h1 {
    text-align: center;
    max-width:800px;
  }
  
.body-validation{
    background: radial-gradient(100.00% 69.85% at 50% 50%, rgba(255, 255, 255, 0) 0%, rgba(53, 25, 0, 0) 0%, rgba(53, 25, 0, 0.10) 64%, rgba(53.07, 25.30, 0, 0.22) 82%, rgba(53.12, 25.50, 0, 0.28) 86%, rgba(53.12, 25.50, 0, 0.30) 100%), var(--color-accent);

    }

.brand {
    background-image: url('/img/logo.png'); /* Update with the path to your logo image */
    width: 200px; /* Adjust as needed */
    height: 200px; /* Adjust as needed */
    margin: 0 auto;
    margin-top:24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity:0.8;
}
.registration-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
}

.registration-section h2 {
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 20px;
}
#registration-form{
    display:flex;
    flex-direction: column;
    align-items: center;
}

#form-steps-overview{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}
#form-steps-overview .step {

    color: var(--color-white);
    cursor: pointer;
    padding:24px;

  }
  
  .step {
    text-align:center;
    display:none;
  }

  .step.active{
    display:flex;
  }
  .step.completed{
    display:flex;
  }

  #form-steps-overview:first-child{
    display:flex;
  }
  
  .form-step{
    width:350px;
    display:flex;
    flex-direction:column;
    margin-left: -17px;
  }
  #form-steps-overview .step.active {
    /* Active step style */
    color: var(--color-accent);
    font-weight: bold;
  }
  
  #form-steps-overview .step.completed {
    /* Completed step style */
    color: var(--color-white);
  }
.form-group {
    margin-bottom: 12px;
    display:flex;
    flex-direction: row;
    gap:12px;
    position:relative;
}

.sub-form-group {
 
    display:flex;
    flex-direction: row;

    position:relative;
}

#parent-phone-group{
flex-direction: column;


}


.form-group input {
    width: 100%;
    position:relative;
    padding: 16px 24px;
    border: 1px solid var(--color-white);
    border-radius: 12px;
    background: transparent;
    color: var(--color-white);
    height:39px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px; /* 166.667% */
    max-width:350px;
  

}

.form-group input:focus{
    font-size: 18px; /* Smaller font size */
    line-height: 24px;
    color: var(--color-black); /* Using the accent color for the text */

    font-weight: 600;
    background-color: var(--color-white);
    text-wrap: nowrap;

}
/* Style for label when input is focused */
.form-group.input-focused .input-label,
.form-group .sub-form-group.input-focused .input-label {
    color: var(--color-accent);
    opacity: 1;
    top: 15px; /* Adjust as needed */

    pointer-events: none;
}

/* Hide label when input has content and is not focused */
.form-group.has-content:not(.input-focused) .input-label,
.form-group .sub-form-group.has-content:not(.input-focused) .input-label {
    opacity: 0;
    transition: unset;
    pointer-events: none;
}

.input-label {
    position:absolute;
    font-size: 12px; /* Smaller font size */
    line-height: 20px;
    left: 16px; /* align with input padding */
    top: 50%;
    font-weight: 200;
    transform: translateY(-50%);
    color: var(--color-white);
    transition: all 0.3s ease;

    pointer-events: none;
    z-index: 100;
}



.form-group #birthdayvisual {
    border-radius: 12px;
    height:72px;


}
.elder-message{
    color: var(--color-white);
    font-size: 12px;
    line-height: 20px;
    margin-top:0px;
    text-align: center;
    width:350px;
}

.elder-message p{
    margin: 6px 0;
}

.identification-container{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.passport{
    width:300px;
    height:auto;
    min-height:197px;
    background-image:url('/img/passport_icon.png');
    background-size: 300px auto;
    background-repeat: no-repeat;
    margin: 36px 0;
    display:flex;
    justify-content: center;
    align-items: center;
    position:relative
  }

.passport-img{
    width:100%;
    height:auto;
    position:absolute;
    border-radius: 12px;
    object-fit: cover;
}

#delete-image{
    position:absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height:100%;
    background-color:rgba(0, 0, 0, 0);
    backdrop-filter: blur(12px);
    box-shadow: none;
    border:none;
    
    background-size:24px;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 12px 0 0 12px;

}

.passport-message{
    color: var(--color-white);
    font-size: 12px;
    line-height: 20px;
    margin-top:0px;
    text-align: center;
    width:350px;
}

.passport-message p{
    margin: 6px 0;
}

.required-message{
    color: var(--color-accent);
    font-size: 12px;
    line-height: 20px;
    margin-top:36px;
}
.next-btn {
    background-color: var(--color-accent);
    color: var(--color-white);
    border: none;
    border-radius: 36px;
    padding: 10px 30px;
    cursor: pointer;
    font-weight: bold;
    height:70px;
    width:100%;
    margin-top:68px;

    margin-bottom:172px;
}

.photo-btn {
    background-color: var(--color-accent);
    color: var(--color-white);
    border: none;
    border-radius: 36px;
    padding: 10px 30px;
    cursor: pointer;
    font-weight: bold;
    height:70px;
    width:100%;
    margin-top:36px;
    display:flex;
    justify-content: center;
    align-items: center;

    margin-bottom:72px;
}

.abschliessen-btn{
 
        background-color: var(--color-accent);
        color: var(--color-white);
        border: none;
        border-radius: 36px;
        padding: 10px 30px;
        cursor: pointer;
        font-weight: bold;
        height:70px;
        width:100%;


        margin-bottom:172px;
 
    
}


.terms-text, .agb-text{
    color: var(--color-white);
    text-align: center;

    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px; 
}
.agb-text{
    text-align:left;
    width:100%;
}
.terms-text a{
color:var(--color-white);
text-decoration: solid;
}


.signature-pad {
    position: relative;
    border: 1.5px solid var(--color-white);
    border-radius: 12px;
    background-color: var(--color-black); 
    width: 100%;
    height: 240px;
}
.signature-container{
    width:100%;
    height:240px;
    margin-bottom:10px;
}
.signature-title {
    position: relative;
    top: -230px; /* Adjust if needed */
    left: 25px; /* Adjust if needed */
    color: var(--color-white);
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px; 
}

#clear-signature {
    position: relative;
    left: calc(100% - 120px);
    top: -135px;
    background: url('/img/delete_icon.png') no-repeat center center;
    background-size: contain;
    border: none;
    width: 24px; /* Width of the image */
    height: 24px; /* Height of the image */
    cursor: pointer;
    
}


.agree-btn,
.disagree-btn {
    border: 1.5px solid var(--color-white);
}

#submit-registration{
    display:none;
}
/* Additional styles for the AGB buttons if needed */
.agb-buttons button {
    padding: 10px 20px;
    margin-left: 10px;
    border: none;
    border-radius: 12px;
    border: 1.5px solid var(--color-white);
    background-color: var(--color-black);
    color: var(--color-white);
    cursor: pointer;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px; 
    justify-content: space-between;
    width:84px;
    height:72px;
    min-width:84px;
}


.agb-buttons {
    display:flex;
    flex-direction: row;
    gap: 12px;
    margin: 36px 0;
    align-items: center;
}

.form-group-row{
    flex-direction: column;
    width:350px;
    gap:6px;
    margin-bottom:6px;
    margin-top:36px;

}
.yes-no-buttons {
    display:flex;
    flex-direction: row;
    gap: 12px;

    align-items: center;
  }
  
.yes-no-buttons label{
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px; 
    width:100%;
    flex-basis: 30%;
  }
  .yes-button, .no-button {
    padding: 10px 20px;
 
    border: none;
    border-radius: 12px;
    border: 1.5px solid var(--color-white);
    background-color: var(--color-black);
    color: var(--color-white);
    cursor: pointer;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px; 
    justify-content: space-between;
    width:84px;
    height:72px;
    min-width:84px;
    transition: all 0.2s ease;
    max-width: 84px;
  }
  .agree-btn.active, .disagree-btn.active, .yes-button.active, .no-button.active {
      border: 1.5px solid var(--color-accent); /* Your accent color */
      font-size: 18px;
      font-weight: 600;
      transition: all 0.2s ease;
  }

  #brand {
    transition: transform 1s;
}

.message-container{
    position:fixed; 
    bottom:0; 
    right:0;
    left:0;
    
    background:rgba(0, 0, 0, 0.75); 
    color:white; 
    text-align:center; 
    padding:10px; 
    z-index:1002;
    height:96px;
    border-radius: 12px 12px 0px 0px;
    background-color: var(--color-accent);
    padding: 12px 24px;
    justify-content: space-between;
    align-items: center;
    
}
.message-text{
    margin-left:24px;
}
.main-btn{
    min-width: 170px;
    max-width: 170px;
}
.new-project-btn{
    min-width: 350px;
    max-width: 350px;
    position: fixed;
    left:50%;
    bottom: 12px;
    transform: translateX(-50%);

}

.validation{
    width:192px;

    height:148.5px;
    background-image: url('/img/user_icon.png');
    background-size:192px;
    background-repeat: no-repeat;
  }

.validation-content{
    display:flex;
    justify-content: center;
    align-items: center;
  
    flex-direction: column;


}
.btn-validation, .btn-spacer{
    min-width: 240px;
    max-width: 240px;
}

.project-list{
    width:80%;
    padding-top:36px;
    padding-bottom:144px;
    height:100%;
    min-width:300px;
}
.project-entry{
    display:flex;
    flex-direction: row;
    padding-left:36px;
    
    justify-content: space-between;
    align-items: center;
    gap:36px;
    margin-bottom: 12px;
}

.project-entry p{
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 133.333% */
    margin-top:0px;
    margin-bottom:0px;
    width:100%
}

.project-header{
    display:flex;
    flex-direction: row;
 
    justify-content: space-between;
    align-items: center;
    margin-bottom:12px;
    padding-left:36px;
    gap:36px;
    
}

.project-header p{
    font-size: 14px;
    font-style: normal;
    font-weight: 200;
    line-height: 24px; /* 133.333% */
    margin-top:0px;
    margin-bottom:0px;
    width:100%;
    color: var(--color-black);
}

.sub-project-container{
    display:flex;
    flex-direction: column;
    gap:12px;
    align-items: center;
    width:100%
}

.form-group-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-group-container .yes-no-buttons {
    display: flex;
    gap: 12px;
    
}

.additional-input {
    width: 100%;
    position: relative;
    padding: 16px 24px;
    border: 1px solid var(--color-white);
    border-radius: 12px;
    background: transparent;
    color: var(--color-white);
    height: 39px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    max-width: 300px!Important;
}

.form-group .input-label {
    position: absolute;
    left: 16px; /* Align with input padding */
    top: 50%; /* Start centered vertically */
    transform: translateY(-50%);
    transition: top 0.3s, font-size 0.3s;
    pointer-events: none;
    font-size: 12px; /* Larger font size initially */
    color: var(--color-white); /* Initial label color */
}

.form-group.input-focused .input-label,
.form-group.has-content .input-label {
    top: 15px; /* Move above the input */
    font-size: 12px;
    color: var(--color-accent); /* Highlight color */
}

.form-group.additional-input-group {
    position: relative;
    order:3;
    
}

.form-group.additional-input-group .input-label {
    top: 50%; /* Centered vertically */
    font-size: 12px; /* Same as input text */
    color: var(--color-white); /* Label color */
}

.form-group.additional-input-group.input-focused .input-label,
.form-group.additional-input-group.has-content .input-label {
    top: 15px; /* Move above the input */
    font-size: 12px; /* Smaller font size when focused or has content */
    color: var(--color-accent); /* Highlight color when active */
}

.additional-input-group.has-content:not(.input-focused) .input-label {
    opacity: 0;
}

.form-group.yes-no-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.form-group.yes-no-buttons .additional-input {
    flex-basis: 100%; /* Forces the input to take full width */
    order: 2; /* Places the input below other elements */

}

/* Optional: Align the buttons and label in a row */
.form-group.yes-no-buttons > label,
.form-group.yes-no-buttons > button {
    order: 1;
    flex-grow: inherit;
}

@media screen and (max-width: 1080px) { 
    
    .brand{
        width: 72px;
        height: 72px;
        background-size: 72px;
    }
}

@media screen and (max-width: 480px) { 
    .agb-section{
    
        
        padding: 0 30px;
        
      }
    .btn-validation, .btn-spacer{
        min-width:150px!important;
        
    }
    .scrollable-wrapper{
        margin-right: 0;
    }
    .project-list{
        width:unset;
    }
    .project-entry{
        flex-wrap:wrap;
        justify-content:center;
        padding-left:0;
        text-align:center;
    }
    .new-project-btn{
        min-width:150px;
    }
}
 
@media screen and (max-width: 390px) { 
    .form-step {
        width: 85%;
    }
    .sub-form-group {
        width:100%;
    }
    .form-group input{
        max-width:none;
    }
    .brand{
        width:100px;
        height:100px;
        background-size:100px;
    }
    .ui-datepicker{
        width: 83%;
        
    }
    .form-group-row{
        width:100%;
    }

    .message-text{
        margin-left:0;
    }
    .form-group.yes-no-buttons .additional-input {
    
    width: calc(100% - 50px);
}
}