/* =============================================
   MODUS DIGITAL - FORMS
   Form controls, validation, alerts, modals
   ============================================= */

/* -----------------------------------------
   reCAPTCHA
   ----------------------------------------- */
.grecaptcha-badge {
    visibility: hidden;
}

.g-recaptcha {
    margin-bottom: 20px;
}

/* -----------------------------------------
   Cookie message
   ----------------------------------------- */
#cookie-message {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: var(--md-color-white);
    width: 420px;
    max-width: calc(100% - 70px);
    padding: 31px 26px;
    z-index: var(--md-z-cookie);
    box-shadow: var(--md-shadow-cookie);
    opacity: 0;
    transition: opacity 0.6s;
    /* 600ms to fade out */
}

#cookie-message.show {
    opacity: 1;
    transition: opacity 0.6s;
    /* 600ms to fade out */
}

#cookie-message p {
    margin: 0;
    padding: 10px 0 5px 0;
    font-size: 22px;
    line-height: 40px;
}

#cookie-message h4 {
    font-size: 24px;
    line-height: 24px;
    font-weight: var(--md-font-weight-bold);
}

#cookie-message a {
    display: block;
}

#cookie-message span {
    position: absolute;
    top: 31px;
    right: 26px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!-- Font Awesome Pro 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --%3E%3Cpath fill='black' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 464c-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216zm94.8-285.3L281.5 256l69.3 69.3c4.7 4.7 4.7 12.3 0 17l-8.5 8.5c-4.7 4.7-12.3 4.7-17 0L256 281.5l-69.3 69.3c-4.7 4.7-12.3 4.7-17 0l-8.5-8.5c-4.7-4.7-4.7-12.3 0-17l69.3-69.3-69.3-69.3c-4.7-4.7-4.7-12.3 0-17l8.5-8.5c4.7-4.7 12.3-4.7 17 0l69.3 69.3 69.3-69.3c4.7-4.7 12.3-4.7 17 0l8.5 8.5c4.6 4.7 4.6 12.3 0 17z'/%3E%3C/svg%3E");
}

#cookie-message span:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!-- Font Awesome Pro 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --%3E%3Cpath fill='gray' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 464c-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216zm94.8-285.3L281.5 256l69.3 69.3c4.7 4.7 4.7 12.3 0 17l-8.5 8.5c-4.7 4.7-12.3 4.7-17 0L256 281.5l-69.3 69.3c-4.7 4.7-12.3 4.7-17 0l-8.5-8.5c-4.7-4.7-4.7-12.3 0-17l69.3-69.3-69.3-69.3c-4.7-4.7-4.7-12.3 0-17l8.5-8.5c4.7-4.7 12.3-4.7 17 0l69.3 69.3 69.3-69.3c4.7-4.7 12.3-4.7 17 0l8.5 8.5c4.6 4.7 4.6 12.3 0 17z'/%3E%3C/svg%3E");
}

/* -----------------------------------------
   Contact section
   ----------------------------------------- */
.md-contact-section {
    padding-top: 60px;
}

.md-map-img {
    border-radius: var(--md-radius-2xl);
}

/* -----------------------------------------
   Modal: Contact
   ----------------------------------------- */
.modal-content {
    background-color: var(--md-color-modal);
    color: var(--md-color-white);
}

.modal-header {
    border: unset;
    padding: 20px 30px;
}

.modal-body {
    padding: 30px;
}

.modal-body p {
    font-size: 28px;
    line-height: 42px;
    font-weight: var(--md-font-weight-light);
}

.modal-body h4 {
    font-size: 28px;
    line-height: 33px;
    font-weight: var(--md-font-weight-bold);
    margin-bottom: 47px;
}

.modal-footer {
    border: unset;
}

.md-icon-and-text {
    display: block;
    margin-bottom: 14px;
}

.md-icon-and-text .md-icon i {
    font-size: 38px;
    line-height: 38px;
    vertical-align: middle;
}

.md-icon-and-text .md-icon img {
    display: block;
}

.md-icon-and-text .md-icon {
    display: inline-block;
    width: 90px;
}

.md-icon-and-text .md-text p {
    font-size: 22px;
    line-height: 25px;
    margin-bottom: 0;
    font-weight: var(--md-font-weight-light);
}

.md-icon-and-text .md-text h5 {
    font-size: 28px;
    color: var(--md-color-white);
    margin-bottom: 0;
}

.md-icon-and-text .md-text {
    display: inline-block;
}

.md-icon-and-text .md-text a {
    text-decoration: underline;
    font-size: 22px;
}

.md-icon-and-text .md-text {}

/* width */
.modal-body::-webkit-scrollbar {
    width: 10px;
}

/* Track */
.modal-body::-webkit-scrollbar-track {
    background: var(--md-color-white);
}

/* Handle */
.modal-body::-webkit-scrollbar-thumb {
    background: var(--md-color-primary);
}

/* Handle on hover */
.modal-body::-webkit-scrollbar-thumb:hover {
    background: #206c8c;
}

.btn-close {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!-- Font Awesome Pro 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --%3E%3Cpath fill='white' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 464c-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216zm94.8-285.3L281.5 256l69.3 69.3c4.7 4.7 4.7 12.3 0 17l-8.5 8.5c-4.7 4.7-12.3 4.7-17 0L256 281.5l-69.3 69.3c-4.7 4.7-12.3 4.7-17 0l-8.5-8.5c-4.7-4.7-4.7-12.3 0-17l69.3-69.3-69.3-69.3c-4.7-4.7-4.7-12.3 0-17l8.5-8.5c4.7-4.7 12.3-4.7 17 0l69.3 69.3 69.3-69.3c4.7-4.7 12.3-4.7 17 0l8.5 8.5c4.6 4.7 4.6 12.3 0 17z'/%3E%3C/svg%3E");
    font-size: 48px;
    line-height: 28;
    opacity: 1;
    position: absolute;
    right: 20px;
    left: auto;
}

/* -----------------------------------------
   Form controls
   ----------------------------------------- */
form label {
    width: 100%;
}

label {
    font-size: var(--md-font-size-base);
    line-height: 22px;
    color: var(--md-color-dark);
    margin-bottom: var(--md-space-3);
    /* width: 100%; */
}

label[optional]::after {
    content: 'Optioneel';
    float: right;
    color: var(--md-color-blue-deep);
}

.md-form-control {
    background-color: var(--md-color-gray-150);
    color: var(--md-color-blue-deep);
    border-radius: var(--md-radius-xs);
    border: 1px solid var(--md-color-gray-150);
    font-family: var(--md-font-body);
    font-size: 16px;
    line-height: 19px;
    padding: 12px 14px;
}

.md-form-control:focus {
    color: var(--md-color-blue-deep);
    background-color: var(--md-color-white);
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem #1E609140;
}

.md-form-control.invalid {
    border-color: var(--md-color-error);
    box-shadow: 0 0 0 .25rem #CC315840;
    background-color: var(--md-color-error-bg);
    color: var(--md-color-error);
}

label.invalid {
    color: var(--md-color-error);
}

/* -----------------------------------------
   Bootstrap validation overrides
   ----------------------------------------- */
.form-control.is-invalid, .was-validated .form-control:invalid {
    border-color: var(--md-color-error-bootstrap);
    box-shadow: 0 0 0 3px rgba(248, 215, 218, 1);
    background-image: unset;
    padding-right: inherit;
}

.form-control.is-valid, .was-validated .form-control:valid {
    border-color: inherit;
    padding-right: inherit;
    background-image: unset;
}

.form-control.is-invalid:focus, .was-validated .form-control:invalid:focus {
    border-color: var(--md-color-error-bootstrap);
    box-shadow: 0 0 0 .25rem rgba(248, 215, 218, 1);
}

.form-control.is-valid:focus, .was-validated .form-control:valid:focus {
    border-color: inherit;
    box-shadow: 0 0 0 .25rem #1E609140;
}

.was-validated .md-development-options.is-invalid ~ .invalid-feedback,
.was-validated .md-development-options.is-invalid + .invalid-feedback {
    display: block !important;
}

/* -----------------------------------------
   Alerts
   ----------------------------------------- */
.md-alert {
    border: unset;
    font-size: var(--md-font-size-xs);
    line-height: 14px;
    font-weight: var(--md-font-weight-semibold);
    padding: 14px 15px;
}

.md-alert ul {
    padding-left: 47px;
    margin-bottom: 0;
}

.md-alert ul li::marker {
    color: var(--md-color-error);
}

.md-alert ul li {
    font-size: var(--md-font-size-xs);
    line-height: 14px;
    font-weight: var(--md-font-weight-regular);

}

.md-alert i {
    vertical-align: middle;
    font-size: 21px;
    line-height: 21px;
    margin-right: var(--md-space-2);
}

.alert-success {
    color: var(--md-color-success);
    background-color: var(--md-color-success-bg);
}

.alert-danger {
    color: var(--md-color-error);
    background-color: var(--md-color-error-bg);
}

.alert-danger ul li::marker {
    color: var(--md-color-error);
}

/* -----------------------------------------
   Form floating labels
   ----------------------------------------- */
.form-floating>label {
    font-family: var(--md-font-body);
    font-weight: var(--md-font-weight-light);
    font-size: 22px;
    line-height: 24px;
}

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    transform: scale(.75) translateY(-.5rem) translateX(.15rem);
}

/* -----------------------------------------
   Checklist style
   ----------------------------------------- */
.md-ul-style ul {
    margin: 12px 0;
    list-style: none;
    padding: 0;
}

.md-ul-style ul li {
    font-size: var(--md-font-size-md);
    line-height: 29px;
}

.md-ul-style ul li:before {
    content: '\2713';
    width: 26px;
    display: inline-block;
    text-align: center;
    font-size: 16px;
    line-height: 29px;
}

/* -----------------------------------------
   Voucher form
   ----------------------------------------- */
.voucher-form {
    padding-top: 45px;
    padding-bottom: 45px;
}

.md-voucher-input {
    font-weight: var(--md-font-weight-black);
    font-size: 26px;
    line-height: 29px;
    letter-spacing: 1rem;
    text-transform: uppercase;
    text-align: center;
}

/* -----------------------------------------
   Modus Moment form
   ----------------------------------------- */
.md-moment-form {
    padding-top: 140px;
    padding-bottom: 120px;
    background-color: var(--md-color-gray-150);
}

.md-form-inverted .md-form-control {
    background-color: var(--md-color-white);
}

/* -----------------------------------------
   Development options checkboxes
   ----------------------------------------- */
.md-development-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
}

.md-development-option {
    position: relative;
}

.md-development-option input[type="checkbox"] {
    display: none;
}

.md-development-option .btn-outline-pink {
    border-color: var(--md-color-pink);
    color: var(--md-color-dark);
    border-width: 2px;
    position: relative;
    padding-right: 40px;
    transition: all ease var(--md-transition-base);
    font-size: var(--md-font-size-sm);
    line-height: 16px;
    padding: 8px 12px;
}

.md-development-option .btn-outline-pink::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    opacity: 0;
    transition: opacity ease var(--md-transition-base);
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_143_1184)'%3E%3Cpath d='M7.50195 -0.00683594C7.56819 -0.00735853 7.634 0.00519937 7.69531 0.0302734C7.7567 0.055389 7.81246 0.0927679 7.85938 0.139648C7.90625 0.186524 7.94361 0.242372 7.96875 0.303711C7.99389 0.365159 8.00644 0.431657 8.00586 0.498047C8.00524 0.564297 7.99098 0.629548 7.96484 0.69043C7.93864 0.751432 7.90127 0.807392 7.85352 0.853516L4.70703 4L7.85352 7.14648C7.94438 7.24075 7.9943 7.36711 7.99316 7.49805C7.99195 7.62903 7.93931 7.75405 7.84668 7.84668C7.75401 7.9393 7.62906 7.992 7.49805 7.99316C7.36711 7.9943 7.24075 7.94438 7.14648 7.85352L4 4.70703L0.853516 7.85352C0.75932 7.94444 0.632863 7.9942 0.501953 7.99316C0.370855 7.99202 0.245048 7.93938 0.152344 7.84668C0.0597969 7.75406 0.0070754 7.62897 0.00585938 7.49805C0.00472062 7.367 0.0554739 7.24077 0.146484 7.14648L3.29297 4L0.146484 0.853516C0.0528558 0.759859 0.000119987 0.632418 0 0.5C0 0.367467 0.0528144 0.240238 0.146484 0.146484C0.240248 0.0527488 0.367418 0 0.5 0C0.632494 6.46482e-05 0.759809 0.0528064 0.853516 0.146484L4 3.29297L7.14648 0.146484C7.1926 0.0987379 7.24761 0.0603838 7.30859 0.0341797C7.3696 0.00797519 7.43556 -0.00625903 7.50195 -0.00683594Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_143_1184'%3E%3Crect width='8' height='8' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.md-development-option input[type="checkbox"]:checked + .btn-outline-pink {
    background-color: var(--md-color-pink);
    border-color: var(--md-color-pink);
    color: var(--md-color-white);
    padding-right: 30px;
}

.md-development-option input[type="checkbox"]:checked + .btn-outline-pink::after {
    opacity: 1;
}

.md-development-option .btn-outline-pink:hover {
    border-color: var(--md-color-pink);
    background-color: rgba(237, 17, 99, 0.1);
}

.md-development-option input[type="checkbox"]:checked + .btn-outline-pink:hover {
    background-color: var(--md-color-pink);
    border-color: var(--md-color-pink);
}

/* -----------------------------------------
   Responsive: Forms
   ----------------------------------------- */
@media screen and (max-width: 768px) {
    .md-voucher-input {
        font-size: 19px;
        line-height: 23px;
    }
}

@media screen and (max-width: 575.98px) {
    .modal-body p {
        font-size: 18px;
        line-height: 24px;
    }

    #cookie-message {
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 100%;
    }

    #cookie-message p {
        font-size: 18px;
        line-height: 34px;
    }

    .btn-close {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!-- Font Awesome Pro 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --%3E%3Cpath fill='white' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 464c-118.7 0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1 216 216 0 118.7-96.1 216-216 216zm94.8-285.3L281.5 256l69.3 69.3c4.7 4.7 4.7 12.3 0 17l-8.5 8.5c-4.7 4.7-12.3 4.7-17 0L256 281.5l-69.3 69.3c-4.7 4.7-12.3 4.7-17 0l-8.5-8.5c-4.7-4.7-4.7-12.3 0-17l69.3-69.3-69.3-69.3c-4.7-4.7-4.7-12.3 0-17l8.5-8.5c4.7-4.7 12.3-4.7 17 0l69.3 69.3 69.3-69.3c4.7-4.7 12.3-4.7 17 0l8.5 8.5c4.6 4.7 4.6 12.3 0 17z'/%3E%3C/svg%3E");
        font-size: 48px;
        line-height: 28;
        opacity: 1;
        position: absolute;
        left: auto;
        right: 20px;
    }
}