/* Same box as the regular apply form (#apply) */
.single-vacancy #apply-whatsapp {
    display: none;
}

.single-vacancy #apply-whatsapp .sd-vue-component-sdcx-vacancies-apply-whatsapp {
    background-color: #ffffff;
    box-shadow: 0 0 10px 0px rgba(3, 4, 4, .2);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-left: 5px solid #008aca;
    position: relative;
    padding: 20px 30px;
}

.sd-vue-component-sdcx-vacancies-apply-whatsapp h2 {
    margin-top: 0;
}

.sd-vue-component-sdcx-vacancies-apply-whatsapp-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.sd-vue-component-sdcx-vacancies-apply-whatsapp-col {
    padding: 0 10px;
    box-sizing: border-box;
}

.sd-vue-component-sdcx-vacancies-apply-whatsapp-col-20 { width: 20%; }
.sd-vue-component-sdcx-vacancies-apply-whatsapp-col-40 { width: 40%; }
.sd-vue-component-sdcx-vacancies-apply-whatsapp-col-50 { width: 50%; }
.sd-vue-component-sdcx-vacancies-apply-whatsapp-col-100 { width: 100%; }

.sd-vue-component-sdcx-vacancies-apply-whatsapp-checkbox {
    display: block;
    position: relative;
    padding-left: 20px;
    margin-bottom: 20px;
}

.sd-vue-component-sdcx-vacancies-apply-whatsapp-checkbox input {
    position: absolute;
    left: 0;
    top: 6px;
}

.sd-vue-component-sdcx-vacancies-apply-whatsapp-form input[type='submit'] {
    background: #25d366;
    border-color: #25d366;
}

@media screen and (max-width: 767px) {
    .sd-vue-component-sdcx-vacancies-apply-whatsapp-col-20,
    .sd-vue-component-sdcx-vacancies-apply-whatsapp-col-40,
    .sd-vue-component-sdcx-vacancies-apply-whatsapp-col-50 {
        width: 100%;
    }
}

@media print {
    #apply-whatsapp {
        display: none !important;
    }
}