.left-bg {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/left.jpg);
    background-position: left 14px top;
}
.right-bg {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/right.jpg);
    background-position: right 14px top;
}

.left-bg-desktop, .right-bg-desktop {
    background-size: cover;
    min-height: 100px; /* Adjust this as per your requirement */
}
.left-bg-desktop {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/desktop_left.png);
    background-position: right 0px top;
    background-repeat: no-repeat;
}
.right-bg-desktop {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/desktop_right.png);
    background-position: left 0px top;
    background-repeat: no-repeat;
}

.next-arrow-bg {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/next-arrow.png) !important;
    background-position: right 14px top 14px !important;
    background-repeat: no-repeat !important;
    padding-right: 50px !important;
    margin-right: 15px;
}

.pupils-footer-bg-1 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/pupils_footer_1.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: bottom !important;
    padding-bottom: 40px;
    background-size: contain;
}
.pupils-footer-bg-2 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/pupils_footer_2.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: bottom !important;
    padding-bottom: 40px;
    background-size: contain;
}
.pupils-footer-bg-3 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/pupils_footer_3.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: bottom !important;
    padding-bottom: 40px;
    background-size: contain;
}
.pupils-footer-bg-4 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/pupils_footer_4.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: bottom !important;
    padding-bottom: 40px;
    background-size: contain;
}
.pupils-footer-bg-5 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/pupils_footer_5.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: bottom !important;
    padding-bottom: 40px;
    background-size: contain;
}
.pupils-footer-bg-6 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/pupils_footer_6.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: bottom !important;
    padding-bottom: 40px;
    background-size: contain;
}
.pupils-footer-bg-7 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/pupils_footer_7.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: bottom !important;
    padding-bottom: 40px;
    background-size: contain;
}
.pupils-footer-bg-8 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/pupils_footer_8.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: bottom !important;
    padding-bottom: 40px;
    background-size: contain;
}
.pupils-footer-bg-9 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/pupils_footer_9.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: bottom !important;
    padding-bottom: 40px;
    background-size: contain;
}
.pupils-footer-bg-10 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/pupils_footer_10.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: bottom !important;
    padding-bottom: 40px;
    background-size: contain;
}
.pupils-footer-bg-11 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/pupils_footer_11.jpg) !important;
    background-repeat: no-repeat !important;
    background-position: bottom !important;
    padding-bottom: 40px;
    background-size: contain;
}
.pupils-top-paper-holes {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/top-paper-holes.png);
    background-repeat: no-repeat !important;
    background-position: top !important;
    background-size: contain !important;
    background-color: #ffffff !important;
    font-size: 16px !important
}
.pupils-face-icon-1 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/face-icon-1.png);
    background-repeat: no-repeat !important;
    background-position: left 8px center !important;
    background-size: 30px 30px !important;
}
.pupils-face-icon-2 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/face-icon-2.png);
    background-repeat: no-repeat !important;
    background-position: left 8px center !important;
    background-size: 30px 30px !important;
}
.pupils-face-icon-3 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/face-icon-3.png);
    background-repeat: no-repeat !important;
    background-position: left 8px center !important;
    background-size: 30px 30px !important;
}
.pupils-face-icon-4 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/face-icon-4.png);
    background-repeat: no-repeat !important;
    background-position: left 8px center !important;
    background-size: 30px 30px !important;
}
.pupils-experience-icon-1 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/prev_work_1.png);
    background-repeat: no-repeat !important;
    background-position: left 8px center !important;
    background-size: 30px 30px !important;
}
.pupils-experience-icon-2 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/prev_work_2.png);
    background-repeat: no-repeat !important;
    background-position: left 8px center !important;
    background-size: 30px 30px !important;
}
.pupils-spacial-need-icon-1 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/no.png);
    background-repeat: no-repeat !important;
    background-position: left 8px center !important;
    background-size: 30px 30px !important;
}
.pupils-spacial-need-icon-2 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/yes.png);
    background-repeat: no-repeat !important;
    background-position: left 8px center !important;
    background-size: 30px 30px !important;
}
.foto-icon-1 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/foto-icon-1.png);
    background-repeat: no-repeat !important;
    background-position: left 8px center !important;
    background-size: 30px 30px !important;
}
.math-icon-1 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/math-icon.png);
    background-repeat: no-repeat !important;
    background-position: 15px 0 !important;
    background-size: 30px 30px !important;
}
.sport-icon-1 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/sport-icon.png);
    background-repeat: no-repeat !important;
    background-position: 15px 0 !important;
    background-size: 30px 30px !important;
}
.mitarbeit-icon-1 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/mitarbeit-icon.png);
    background-repeat: no-repeat !important;
    background-position: 15px 0 !important;
    background-size: 30px 30px !important;
}
.betragen-icon-1 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/betragen-icon.png);
    background-repeat: no-repeat !important;
    background-position: 15px 0 !important;
    background-size: 30px 30px !important;
}

.record-video-btn {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/youtube.png);
    background-repeat: no-repeat;
    background-position: center left 10px;
    padding-left: 65px !important;
    height: 64px !important;
    padding-top: 18px !important;
}
.desktop_footer_1 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/footer_1_desktop.png) !important;
    background-repeat: no-repeat !important;
    background-position: bottom left !important;
    padding-bottom: 40px;
    background-size: 100%;
}

.desktop_footer_2 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/footer_2_desktop.png) !important;
    background-repeat: no-repeat !important;
    background-position: bottom left !important;
    padding-bottom: 40px;
    background-size: 100%;
}

.desktop_footer_3 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/footer_3_desktop.png) !important;
    background-repeat: no-repeat !important;
    background-position: bottom left !important;
    padding-bottom: 40px;
    background-size: 100%;
}

.desktop_footer_4 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/footer_4_desktop.png) !important;
    background-repeat: no-repeat !important;
    background-position: bottom left !important;
    padding-bottom: 40px;
    background-size: 100%;
}

.desktop_footer_5 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/footer_5_desktop.png) !important;
    background-repeat: no-repeat !important;
    background-position: bottom left !important;
    padding-bottom: 40px;
    background-size: 100%;
}

.desktop_footer_6 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/footer_6_desktop.png) !important;
    background-repeat: no-repeat !important;
    background-position: bottom left !important;
    padding-bottom: 40px;
    background-size: 100%;
}

.desktop_footer_7 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/footer_7_desktop.png) !important;
    background-repeat: no-repeat !important;
    background-position: bottom left !important;
    padding-bottom: 40px;
    background-size: 100%;
}

.desktop_footer_8 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/footer_8_desktop.png) !important;
    background-repeat: no-repeat !important;
    background-position: bottom left !important;
    padding-bottom: 40px;
    background-size: 100%;
}

.desktop_footer_9 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/pupils_footer_desctop_9.png) !important;
    background-repeat: no-repeat !important;
    background-position: bottom left !important;
    padding-bottom: 40px;
    background-size: 100%;
}

.desktop_footer_10 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/footer_10_desktop.png) !important;
    background-repeat: no-repeat !important;
    background-position: bottom left !important;
    padding-bottom: 40px;
    background-size: 100%;
}

.desktop_footer_11 {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/footer_11_desktop.png) !important;
    background-repeat: no-repeat !important;
    background-position: bottom left !important;
    padding-bottom: 40px;
    background-size: 100%;
}

select {
    background-image: url(//www.deichmann-karriere.de/wp-content/themes/de/assets/pupils-forms/images/arrow-down.png);
}

.pipeRecordRTC {
    display: none;
}
.piperecorder {
    margin-bottom: 40px;
    display: none
}

#pipeRecordRTC-custom-id {
    width: 500px!important;
    height: 390px!important;
}
video, canvas {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
    background-color:rgb(246, 246, 246);
    position: relative;
}
.center-button {
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    left: 50%;
    top : 40%;
    transform: translate(-50%, -50%);
    display: flex;
    padding: 10px 20px;
    border-radius: 5px;
}
.center-button i, .center-button-upload-photo i {
    font-size: 20px;
    margin-right: 10px; /* To give some space between the icon and the text */
}
button#capture {
    display: none;
    justify-content: center;
}
.record-back-button {
        display: flex;
}
.video-record, .popup-option, .video-cross-button {
    display: block !important;
}
#show-error {
    margin-top: 100px;
}
/* Responsive Styles */
@media only screen and (max-width: 768px) {
    video, canvas {
        max-width: 900px;
        height: 400px;
        object-fit: cover; /* This ensures the video maintains its aspect ratio */
    }
    .center-button, .center-button-upload-photo {
        font-size: 0.9rem;
        padding: 5px 10px;
    }
    .center-button i , .center-button-upload-photo i {
        font-size: 25px;
    }

    .record-back-button {
        display: flex;
    }
    .video-record , .popup-option, .video-cross-button {
        display: block!important;
    }
}
video, canvas {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
    background-color:rgb(246, 246, 246);
    position: relative;
}
.center-button {
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    border-radius: 5px;
}
.center-button-upload-photo {
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 5px;
}
.center-button i, .center-button-upload-photo i {
    font-size: 20px;
    margin-right: 10px; /* To give some space between the icon and the text */
}
.video-record {
    display: block !important;
}
button#capture {
    display: none;
    justify-content: center;
}
button#recapture,button#save {
    display: none;
}
.popup-option {
    color: black;
    background: inherit;
    width: 96%;
    text-align: left;
}
.popup-options {
    background: white;
}
.video-icons {
    max-width: 9%;
    float: right;
}
.video-record{
    margin-bottom: 5%;
}

/* Responsive Styles */
@media only screen and (max-width: 768px) {
    video, canvas {
        max-width: 900px;
        height: 400px;
        object-fit: cover; /* This ensures the video maintains its aspect ratio */
    }
    .center-button, .center-button-upload-photo {
        font-size: 0.9rem;
        padding: 5px 10px;
    }
    .center-button i, .center-button-upload-photo i {
        font-size: 25px;
    }

    .video-record , .popup-option {
        display: block!important;
    }
    .video-record{
        margin-bottom: 5%;
    }
    .popup-option {
        color: black;
        background: inherit;
        width: 96%;
        text-align: left;
    }
    .popup-options {
        background: white;
    }
    .video-icons {
        max-width: 9%;
        float: right;
    }
    button#recapture,button#save {
        display: none;
    }
}
body {
    font-family: 'Poppins', sans-serif;
}
.bg-color-green {
    background-color: #009661;
    color: #1E1E1E;
}
.left-bg, .right-bg {
    background-size: cover;
    min-height: 100px; /* Adjust this as per your requirement */
}



.navbar-expand-lg-bg-green {
    background-color: #009661 !important;
}

.modal-green-btn-arrow-bg, .modal-green-btn-arrow-bg:hover {
    margin-right: 15px;
    border: 0 !important;
    background-color: #009661;
    border: 0;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    border-radius: 30px;
    box-shadow: 0 5px 0 #CBD300;
    cursor: pointer !important;
    margin-top: 10px !important;
}
.modal-yellow-btn-arrow-bg, .modal-yellow-btn-arrow-bg:hover {
    margin-right: 15px;
    border: 0 !important;
    background-color: #CBD300;
    border: 0;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    border-radius: 30px;
    box-shadow: 0 5px 0 #000;
    cursor: pointer !important;
    margin-top: 10px !important;
}

.modal-yellow-btn-arrow-bg-2, .modal-yellow-btn-arrow-bg-2:hover {
    margin-right: 15px;
    border: 0 !important;
    background-color: #CBD300;
    border: 0;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    border-radius: 30px;
    box-shadow: 0 5px 0 #000;
    cursor: pointer !important;
    margin-top: 10px !important;
}


.modal-white-btn-arrow-bg, .modal-white-btn-arrow-bg:hover {
    margin-right: 15px;
    background-color: #fff;
    border: 2px solid #009661;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: bold;
    color: #009661;
    border-radius: 30px;
    box-shadow: 0 5px 0 #CBD300;
    cursor: pointer !important;
    margin-top: 10px !important;
}
.text-style-1 {
    font-family: 'poppins';
    font-size: 20px;
    font-weight: bold;
    align-self: center; /* To vertically center the text */
}
.bg-white {
    background-color: #fff;
}
.green-btn, .green-btn2 {
    background-color: #009661;
    border: 0;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    border-radius: 30px;
    box-shadow: 0 5px 0 #CBD300;
    cursor: pointer;
    width: fit-content;
    margin: auto;
    margin-bottom: 15px;
}
.white-btn, .white-btn2 {
    background-color: #fff;
    border: 2px solid #009661;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    border-radius: 30px;
    box-shadow: 0 5px 0 #CBD300;
    cursor: pointer;
    width: fit-content;
    margin: auto;
    margin-bottom: 15px;
}

.green-btn2 a {
    font-size: 20px;
}

.gree-btn-extra {
    padding: 10px 82px !important;
}


.green-btn {
    padding: 9px 30px;
}
.green-btn2 {
    padding: 9px 18px;
}
.white-btn {
    padding: 9px 30px;
}
.white-btn2 {
    padding: 9px 18px;
}
.link-in-text {
    font-size: 16px;
    color: #009661;
}
#save-load-btn-area {
    display:none !important;
}
.job-application-form {
    background-color: #009661;
}
.text-yellow {
    color: #D6DF33;
}
.white-text {
    color:#fff;
}
.bg-green {
    background-color: #009661;
}
.pupils-top-back-btm {
    background-color: transparent !important;
    border: 0 !important;
    font-size: 18px !important;
    box-shadow: none !important;
    color: #009661 !important;
    font-weight: bold !important;
}
.pupils-top-back-img {
    width: 30px;
    height: 30px;
    margin: 0 0 8px 0;
}
.pupils-map-back-btm {
    background-color: transparent !important;
    border: 0 !important;
    font-size: 18px !important;
    box-shadow: none !important;
    color: #009661 !important;
    font-weight: bold !important;
}
.form-control {
    background-color: #E5F4EE !important;
    border:0 !important;
    height: 48px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 0 #D6DF33 !important;
    font-size: 16px !important;
    color:#009661 !important;
    font-weight: bold !important;
}
.form-control:focus {
    background-color: #E5F4EE !important;
    border:0 !important;
    height: 48px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 0 #D6DF33 !important;
    font-size: 16px !important;
    color:#009661 !important;
    font-weight: bold !important;
}
.form-control-div {
    background-color: #E5F4EE !important;
    border:0 !important;
    /* height: 48px !important; */
    border-radius: 8px !important;
    box-shadow: 0 4px 0 #D6DF33 !important;
    font-size: 16px !important;
    color:#009661 !important;
    /* padding: 8px 0 0 50px !important; */
    padding: 16px 0 16px 50px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    line-height: 1.2 !important;
}
.form-control-div-64 {
    background-color: #E5F4EE !important;
    border:0 !important;
    /* height: 64px !important; */
    border-radius: 8px !important;
    box-shadow: 0 4px 0 #D6DF33 !important;
    font-size: 16px !important;
    color:#009661 !important;
    padding: 18px 20px 18px 60px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
}
.form-control-div-64-noicon {
    background-color: #E5F4EE !important;
    border:0 !important;
    /* height: 45px !important; */
    border-radius: 8px !important;
    font-size: 15px !important;
    color:#009661 !important;
    padding: 10px 0 10px 20px; 
    font-weight: bold !important;
    cursor: pointer !important;
}
.form-control-div-118-item {
    background-color: #fafbe5 !important;
    border:0 !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    color:#000000 !important;
    padding: 10px 0 10px 20px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    min-height: 118px !important;
}
.form-control-div-80 {
    background-color: #E5F4EE !important;
    border:0 !important;
    height: 80px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 0 #D6DF33 !important;
    font-size: 16px !important;
    color:#000000 !important;
    padding: 0 50px !important;
    font-weight: bold !important;
    cursor: pointer !important;
}

.title-left-padding {
    padding-left: 0px;
}

.mobile-line-height-1 {
    line-height:inherit;
}

@media only screen and (max-width: 576px) {
    .form-control-div-80 {
        height: 120px !important;
        padding: 0 10px !important;
    }
    .title-left-padding {
        padding-left: 50px;
    }
    .mobile-line-height-1 {
        line-height:1;
    }

    .gree-btn-extra {
        padding: 0px 62px !important;
    }

    .green-btn2 a {
        font-size: 14px;
    }
    
}

@media (min-width: 577px) and (max-width: 1788px) {
    .form-control-div-80 {
        height: 80px !important;
        padding: 0 10px !important;
    }
    .title-left-padding {
        padding-left: 50px;
    }
    .mobile-line-height-1 {
        line-height:1;
    }
}

.form-label {
    color: #000000 !important;
}
.next-btn a {
    background-color: #009661 !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 0 #D6DF33;
    text-transform: uppercase;
}

#submit-btn_pupils_verkauf_without_docs {
    background-color: #009661 !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 0 #D6DF33;
    text-transform: uppercase;
}

#submit-btn_pupils_zentrale {
    background-color: #009661 !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 0 #D6DF33;
    text-transform: uppercase;
}

.font-size-26 {
    font-size: 26px;
}
#wizard .actions li a {
    font-size: 16px;
}

.checkmark {
    float: right;
    right: 14px;
    position: relative;
}
.upload-checkmark {
    right: 14px;
    position: relative;
    display: inline-block;
}
.video-record-display {
    background-color: #ffff99!important;
    display: flex;
}
.icons-size-25 {
    width:25px;
    height:25px;
}
.icons-size-20 {
    width:20px;
    height:10px;
}

/* Moz Range Track */
input[type="range"]::-moz-range-track {
    background: #008E54;
    height: 4px;
}

/* Webkit Slider Runnable Track */
input[type="range"]::-webkit-slider-runnable-track {
    background: #008E54 !important;
    height: 4px !important;
    margin: 12px 0 0 0 !important;
}

input[type="range"] {
    -webkit-appearance: none;
    height: 25px;
    width: 25px;
    background: transparent !important;
    cursor: pointer;
    margin-top: -8px;
    box-shadow: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    margin-top: -14px !important;
    border: 15px solid #008E54 !important;
    background-color: #008E54 !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
}

/* Moz Range Thumb */
input[type="range"]::-moz-range-thumb {
    height: 5px;
    width: 5px;
    background-color: #CBD300;
    border-radius: 50%;
    border: 10px solid #008E54;
}
.multiple-buttons {
    background-color: #E5F4EE;
    margin: 4px;
    padding: 4px 14px;
    border-radius: 30px;
    border: 0;
    font-size: 15px;
    color: #009661;
}

.multiple-buttons.active {
    background-color: #009661;
    color: #fff;
}

.multiple-math-buttons {
    background-color: #E5F4EE;
    margin: 4px;
    padding: 4px 14px;
    border-radius: 30px;
    border: 0;
    font-size: 15px;
    color: #009661;
    border: 1px solid;
    min-width: 40px;
}

.multiple-math-buttons.active {
    background-color: #009661;
    color: #fff;
}

.multiple-sport-buttons {
    background-color: #E5F4EE;
    margin: 4px;
    padding: 4px 14px;
    border-radius: 30px;
    border: 0;
    font-size: 15px;
    color: #009661;
    border: 1px solid;
    min-width: 40px;

}

.multiple-sport-buttons.active {
    background-color: #009661;
    color: #fff;
}

.multiple-mitarbeit-buttons {
    background-color: #E5F4EE;
    margin: 4px;
    padding: 4px 14px;
    border-radius: 30px;
    border: 0;
    font-size: 15px;
    color: #009661;
    border: 1px solid;
    min-width: 40px;
    min-width: 40px;
}

.multiple-mitarbeit-buttons.active {
    background-color: #009661;
    color: #fff;
}

.multiple-betrage-buttons {
    background-color: #E5F4EE;
    margin: 4px;
    padding: 4px 14px;
    border-radius: 30px;
    border: 0;
    font-size: 15px;
    color: #009661;
    border: 1px solid;
    min-width: 40px;
    min-width: 40px;
}

.multiple-betrage-buttons.active {
    background-color: #009661;
    color: #fff;
}

@media only screen and (max-width: 576px) {
    .multiple-math-buttons {
        min-width: 32px;
        padding: 4px 8px;
    }
    .multiple-sport-buttons {
        min-width: 32px;
        padding: 4px 8px;
    }
    .multiple-mitarbeit-buttons {
        min-width: 32px;
        padding: 4px 8px;
    }
    .multiple-betrage-buttons {
        min-width: 32px;
        padding: 4px 8px;
    }
}

.isSelected {
    background-color: #009661 !important;
    color: #fff !important;
}

.wizard-topper .wizard-progress .progress {
    height: 18px !important;
    border: 0 !important;
    background-color: #ddd !important;
}

.wizard-topper .wizard-progress .progress .progress-bar {
    top: 0px !important
}

.modal {
   /* top: 130px; */
}

.modal-header {
    border-bottom: 0 !important;
}

.modal-footer {
    border-top: 0 !important;
    padding-top: 10px !important;
    justify-content: left !important
}

.modal-content {
    padding: 10px 15px 30px 15px !important;
    border-radius: 10px !important;
    border: 0 !important;
}

.close span {
    font-size: 40px;
    color: #009661;
    font-weight: bold;
    font-family: initial;
}

.modal-dropdown {
    background-color: #e5f4ee;
    border-radius: 8px;
    border: 0;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #009660;
    background-size: auto;
    box-shadow: 0 4px 0 #D6DF33 !important;
}

.select-options {
    background-color: #fff;
    color: #000 !important;
}

.form-step-section {
    min-height: 500px;
}

#joblist {
    border-collapse: separate;
    border-spacing: 0 15px;
}

#joblist td {
    background-color: #F2F2F2
}

#selected-jobs {
    border-collapse: separate;
    border-spacing: 0 15px;
}

#selected-jobs td {
    background-color: #E5F4EE !important;
}

#wizard table tbody tr:hover {
    box-shadow: none !important;
}

.additional-jobs {
    font-size: 16px;
    margin-top: -10px;
}

.multiple-buttons {
    font-weight: bold;
}

.bg-color-none {
    background: none !important;
}

.leaflet-container {
    border-radius: 10px !important;
}

.jobs-eintrag {
    border: 0 !important;
}

.img-w24 {
    width: 24px !important;
    min-width: 24px !important;
}

.img-w30 {
    width: 30px !important;
    min-width: 30px !important;
}

.font-14 {
    font-size: 14px;
    font-weight: normal;
    text-align: left;
    line-height: 1.3;
    margin: 6px 10px 0 10px;
    max-width: 160px;
}

.font-14-inline {
  font-size: 14px;
  font-weight: normal;
  text-align: left;
  line-height: 1.3;
  margin: 6px 10px 0 10px;
  width: 260px;
}

.font-15 {
    font-size: 15px !important;
} 

.max-85 {
    max-width: 85%;
    margin: auto;
}

.bottom-btn-modal {
    height: 84px;
    /* border: 1px solid; */
    position: absolute;
    bottom: 0;
    width: 100%;
    cursor: pointer;
}

@media only screen and (min-width: 576px) {

    .bottom-btn-modal {
        height: 120px;
        /* border: 1px solid; */
        position: absolute;
        bottom: -470px;
        width: 100%;
        cursor: pointer;
    }

}

@media (min-width: 993px) and (max-width: 1366px) {
    #wizard .actions li.next-btn, #wizard .actions li.finish-btn {
        margin-right: 40px !important;
    }

    #wizard .actions ul {
        margin: auto auto auto 170px !important;
    }
}

@media (min-width: 1367px) and (max-width: 1680px) {
    #wizard .actions li.next-btn, #wizard .actions li.finish-btn {
        margin-right: 40px !important;
    }

    #wizard .actions ul {
        margin: auto auto auto 200px !important;
    }
}

.modal {
    overflow-y: auto !important;
    max-height: 100vh !important;
}

@media (max-width: 768px) {
    #wizard table tbody tr td a.btn {
    padding: 6px 2px;
    font-size: 7px;
    }
}

@media (max-width: 767px) {
    .modal {
        max-height: 100vh;
        margin: 0;
    }
}

#wizard form label.form-label {
    font-size: 15px;
    font-weight: bold;
}

/* fix progreess bar visibility when modal apears */
.title-and-progress-bar {
    z-index: 1029 !important;
}

/* overide dropzone css */
.dropzone {
    min-height: 120px !important;
    border: none !important;
    background: #E5F4EE !important;
    padding: 20px 20px;
}

#wizard .dropzone .dz-button {
    font-size: 15px !important;
    color: #009560 !important;
    font-weight: bold;
}

.dz-button {
    line-height:24px !important;
    display: flex !important;
}

#work-experience-modal {
    top: 0 !important;
}
#pupilsFormSelectStudies:hover {
    color: #009661 !important;
}

.mobile-logo {
    border: 1px solid #fff !important;
}

p {
    line-height: 22px !important;
    font-size: 16px !important;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #009661 !important;
    opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #009661 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
    color: #009661 !important;
}

.ui-datepicker-close.ui-state-default.ui-priority-primary.ui-corner-all {
    border: 0 !important;
    margin-right: 15px;
    border: 0 !important;
    background: #009661 !important;
    border: 0;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    border-radius: 30px;
    box-shadow: 0 5px 0 #CBD300;
    cursor: pointer !important;
    margin-top: 10px !important;
}

.ui-datepicker-current.ui-state-default.ui-priority-secondary.ui-corner-all {
    border: 0 !important;
    margin-right: 15px;
    border: 0 !important;
    background: #009661 !important;
    border: 0;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    border-radius: 30px;
    box-shadow: 0 5px 0 #CBD300;
    cursor: pointer !important;
    margin-top: 10px !important;
}

.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all {
    background: none !important;
    border: 0 !important;
}

#ui-datepicker-div {
    padding: 10px !important;
    min-width: 300px !important;
}

#pupils-left-menu-title {
    margin-top: 40px;
    line-height: 1.4;
}

#wizard a[href="#previous"] {
    background: #fff !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 0 #D6DF33;
    text-transform: uppercase;
    color: #009661 !important;
    border: 1px solid #009661 !important;
}

.min-width-90 {
    min-width: 90px !important;
}

.margin-top-40px {
    margin-top: -40px !important;
}

#save {
  background-color: #008e54;
  color: #fff;
  padding: 6px 20px;
  border: 0 !important;
  border-radius: 30px !important;
  box-shadow: 0 4px 0 #D6DF33;
  text-transform: uppercase;
  font-weight: bold;
}

#capture {
  background-color: #008e54;
  color: #fff;
  padding: 6px 20px;
  border: 0 !important;
  border-radius: 30px !important;
  box-shadow: 0 4px 0 #D6DF33;
  text-transform: uppercase;
  font-weight: bold;
}

#save-video {
  background-color: #008e54;
  color: #fff;
  padding: 6px 20px;
  border: 0 !important;
  border-radius: 30px !important;
  box-shadow: 0 4px 0 #D6DF33;
  text-transform: uppercase;
  font-weight: bold;
}

#recapture {
  background-color: #008e54;
  color: #fff;
  padding: 6px 20px;
  border: 0 !important;
  border-radius: 30px !important;
  box-shadow: 0 4px 0 #D6DF33;
  text-transform: uppercase;
  font-weight: bold;
}

.center-button {
  background-color: #008e54 !important;
}

.flatpickr-monthSelect-months {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* This splits the grid into four equal columns */
    gap: 8px; /* This adds some spacing between each month */
    padding: 10px !important;
    margin: 10px 0 !important;
}

.flatpickr-monthSelect-month {
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
    border-radius: 25px;
    transition: background-color 0.3s;
    background-color: #008e54 !important;
    color:#fff !important;
    font-weight: bold !important;
}

.flatpickr-monthSelect-month:hover {
    background-color: #f2f2f2;
}

.flatpickr-monthSelect-month.selected {
    background-color: #d3e0e9;
}

.flatpickr-monthSelect-month {
 
    width: 65px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff !important;
    font-weight: bold;
}

.action-btn.btn-very-small.btn.btn-deichmann-green.btn-slide-right-bg.d-lg-inline-block.md-padding-10px-lr.lg-margin-15px-bottom.md-margin-auto-lr {
    white-space: nowrap;
    padding: 10px 4px !important;
}

#pipeUploadIcon-custom-id {
    display: none;
}

#pipeCustomUpload-custom-id {
    display: none;
}

/* Style the outer div */
.form-control-div {
    position: relative;
}

/* Style the label as a placeholder */
.form-control-div label {
    position: absolute;
    top: 50%;
    left: 52px; /* Adjust as needed */
    transform: translateY(-50%);
    color: #009661; /* Placeholder text color */
    pointer-events: none; /* Allow clicking on the input */
    opacity: 1;
    /*transition: top 0.2s, font-size 0.2s;*/
}

/* Style the input */
.form-control-div input {
    width: 100%;
}

/* When the input is focused, move the label up */
.form-control-div input:focus + label {
    top: 10px;
    font-size: 12px; /* Adjust as needed */
    opacity: 0;
}

/* Styles for the dialog boxes at step-11 */
.single-experience-warning-modal-button {
    background-color: #008e54;
    border-radius: 30px;
    box-shadow: 0 5px 0 #cbd300;
    margin: 0 auto;
    display: block;
}

.single-experience-warning-modal .modal-dialog {
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.single-experience-warning-modal .modal-content {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    height: 400px;
    margin-bottom: 250px;
    margin-left: 150px;
}

.single-experience-warning-modal .modal-body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-experience-warning-modal .modal-footer .btn {
    background-color: #008e54;
    border-radius: 30px;
    box-shadow: 0 5px 0 #cbd300;
    margin: 0 auto;
    display: block;
}

#pipeSaveVideo-custom-id {
	position: relative;
    width: 90px;
	height: 28px;
	margin: 6px 0 -15px 0;
}

.pipeMobFriendlyIconBtn {
	position: absolute;
	top: -6px;
	width: 120px;
	left: 14px;
}