/* RANGE email form */

#email, #send_link {
    width: 100%;
}


#error_email_used {
    display: block;
    visibility: hidden;
    position: relative;
    left: 6px;

    line-height: 13px;
    font-size: 13px;
    font-style: italic;
}

#form.error #error_email_used {
    visibility: visible;
}


#form.error #email {
    border: 1px solid #AF4646;
}

#email, #send_link {
    display: block;
    box-sizing: border-box;
    height: 48px;

    border-radius: 7px;

    font-size: 20px;
}

#email {
    border: 1px solid #707070;
    padding-left: 12px;
}


#success_text {
    display: none;
}

#success_text.shown {
    display: block;
}

#success_text_email {
    font-style: italic;
}


/* RANGE calendar */

.week {
    box-sizing: border-box;
    width: 100%;

    padding: 0 18px;
}

.week_hint {
    font-size: 18px;
}

.day {
    padding: 0px 6px;
}

.day_spacer {
    width: 100%;
    height: 1px;
    background-color: #a0a0a0;
    border-radius: 1px;
}

.day_head {
    position: relative;
    height: 36px;

    font-size: 16px;
}

.day_head div {
    line-height: 36px;
}

.day_head button {
    position: absolute;
    top: 0;
    right: 0;
}

.day_body {
    margin-bottom: 6px;
    font-size: 13px;
}


/* SUB toggle button */

.day_toggle {
    background: none;
    border: none;
    padding: 0;
    width: 36px;
    height: 36px;
}

.day_toggle:before, .day_toggle:after {
    position: absolute;
    content: " ";
    width: 2px;
    height: 18px;
    background-color: #404040;
    transition: 0.1s ease-in-out;
}
.day_toggle:before {
    transform: translate(-1px, -9px) rotate(90deg);
}
.day_toggle:after {
    transform: translate(-1px, -9px) rotate(0deg);
}

.day.shown .day_toggle:before {
    transform: translate(-1px, -9px) rotate(45deg);
}
.day.shown .day_toggle:after {
    transform: translate(-1px, -9px) rotate(-45deg);
}


/* RANGE mobile/desktop specific layout */

/* mobile */
@media only screen and (max-width: 1200px) {
    .week_hint {
        position: relative;
        left: -18px;
    }

    .day {
        position: relative;
    }

    .mobile_tap_box {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .day_body {
        display: none;
    }
    .day.shown .day_body {
        display: block;
    }

    .time_free_spacer {
        width: 24px;
    }
}

/* desktop */
@media only screen and (min-width: 1200px) {
    #form {
        width: 450px;
        margin: 0 auto;
    }

    .week {
        display: grid;
        grid-auto-flow: column;
        grid-template-rows: auto auto;

        padding: 0;
    }

    .week_hint {
        padding-left: 24px;
    }

    .week div {
        box-sizing: border-box;
        width: 164px;
    }

    .day {
        padding: 0 12px;
    }

    .week .day_spacer {
        width: 158px;
        margin: 0 auto;
    }

    .time_free_spacer {
        width: 6px;
    }
}