﻿@media screen and (max-width: 600px) {

    div.tf-question-wrapper div.tf-label-wrapper,
    div.tf-question-wrapper div.tf-control-wrapper,
    div.tf-question-wrapper fieldset legend {
        width: 100%;
    }

    div.tf-question-wrapper fieldset legend {
        height: auto;
        display: block;
    }

    div.tf-control-wrapper fieldset > div {
        width: 100%;
        margin-left: 0;
    } 


     /* Buttons */
    .next-question-button,
    .previous-step-button,
    .change-button,
    .next-step-button {
        background-position: center;
        background-repeat: no-repeat;
        width: 36px;
        height: 36px;
        color: transparent;
    }

    .change-button{
        background-image: url('images/baseline_edit_black_36dp.png');
        background-size: 26px;
    }

    .next-question-button,
    .next-step-button{
        background-image: url('images/baseline_chevron_right_white_36dp.png');
    }

    .next-question-button:focus,
    .next-step-button:focus{
        background-image: url('images/baseline_chevron_right_black_36dp.png');
        background-position: center;
        background-repeat: no-repeat;
        color:transparent;
    }

    .previous-step-button {
        background-image: url('images/baseline_chevron_left_black_36dp.png');
    }
    
    /* Partial Date - partialdate / text */

    .partialdate-row label:nth-child(1){
        width: 100%;
        margin:0 0 5px 0;
        position: relative;
        top:5px;
    }

    .partialdate-row span:nth-child(2){
        width: calc(100% - 114px);
        top: -10px;
        left:0;
    }

    .partialdate-row span:nth-child(3){
        bottom: 15px;
        right: 85px;
    }

    .partialdate-row label:nth-child(4){
        bottom: 15px;
        right:0;
    }
}



