form{
    width:100%;
    display:inline-block;
}

.form-group{
    display: inline-block;
    width: 100%;
    margin-top:0;
    margin-bottom:30px;

    @media (max-width: 641px) {
        margin-bottom:20px;
    }

    input[type=file]{
        font-size:16px;
        border:0;
        padding: 10px 0 0;
    }

    .btn{
        margin:0;
    }

    .panel{
        display:inline-block;
        width:100%;
        box-shadow:none;
        clear: both;
        border-top:0;
        border-right:0;
        border-bottom:0;
        border-left-style: solid;
        border-color: #E5F1F5;
        padding: 20px;
        margin-bottom: 30px;
        @include border-radius(0); 
        background:none;

        &:first-child {
            margin-top: 0; 
        }

        &:only-child,
        &:last-child {
            margin-bottom: 0; 
        }

        &.panel-border-wide {
            border-left-width: 10px; 
        }

        &.panel-border-narrow {
            border-left-width: 5px; 
            float: left;
            width: 100%;
            margin:10px 0 30px;

            &:first-child {
                margin-top: 10px; 
            }

            &:last-child {
                margin-top: 10px;
                margin-bottom: 0; 
            }

            .form-group{
                margin-bottom:0;
            }
        }
    }
}

input.form-control,
textarea.form-control{
    -webkit-appearance: none;
    -moz-appearance: none;
}

.form-control{
    width: 100% !important;
    height: 45px;
    color: $input-color !important;
    background-color: #fff !important;
    background-image: none;
    border: 1px solid $input-border-color !important;
    box-shadow:none;
    font-size:16px;
    padding:5px !important;
    background:white !important;
    font-family: $font-primary !important;
    @include border-radius(4px);

    @media (min-width: 641px) {
        width:50% !important;
        font-size:19px;
    }

    &:focus{
        @include input-focus();
        outline:0;
    }
}

.form-hint{
    display:block;
    color: $secondary-font-color;
    font-weight: normal;
    margin-top: 1px;
    padding-bottom: 2px;
    font-weight:300;
    font-size:16px;

    @media (min-width: 641px) {
        font-size:19px;
    }
}

.form-label{
    display:block;
    font-weight:700;
    font-size:19px;

    @media (min-width: 641px) {
        font-size:21px;
    }
}

.form-label-bold{
    font-weight:bold;
}

.form-label-large{
    font-size:19px;
    font-weight:bold;
    margin-bottom:10px;
    @media (min-width: 641px) {
        font-size:24px;
    }
}

.label-small{
    .block-label {
        padding: 8px 15px 8px 38px;
        font-size:16px;
    }

    .block-label {
        input {
            top: 9px;
            left: 10px;
            width: 21px;
            height: 21px;
        }
    }
}

.block-label.inline{
    clear: both;
    display: inline-block;
    float: none;
    margin-right:10px;
}

//input sizes
.form-control-3-4 {
    width: 100% !important;

    @media (min-width: 641px){
        width: 75% !important;
    }
}

.form-block{
    display:inline-block;
    width:100%;
}

.js .js-hidden {
    display: none;
    visibility: hidden;
}

//sharpoint override
input[type=button], 
input[type=reset], 
input[type=submit], button{
    font-family: $font-primary !important;
}

.col-md-4,
.col-md-6{
    .form-control{
        width:100% !important;
    }
}

//custom class for lookup address button
.form-group-button{
    .form-group:first-of-type{
        margin-bottom:10px;
    }
}

//block label
.block-label {
    display: block;
    float: none;
    clear: left;
    position: relative;
    background: $light-grey;
    border: 1px solid $light-grey;
    padding: 18px 25px 15px 54px;
    margin-bottom: 10px;
    cursor: pointer;
    @include border-radius(4px);
    @media (min-width: 641px) {
        float: left;
    }
    input {
        position: absolute;
        top: 15px;
        left: 15px;
        cursor: pointer;
        margin: 0;
        width: 29px;
        height: 29px;
    }

&.active{
    border-color: $grey;
    background:white;
}
}

.block-label.active + .panel{
    display:block;
    visibility:visible;

    .form-group + .form-group {
        margin-top:20px;
    }

    .form-group {
        &-day, &-month, &-year {
            margin-top:0 !important;
        }
    }
}

.block-label:hover {
  border-color: $grey;
}

.inline{
    .block-label {
        display:inline;
        float:none;
        margin-right:10px;
    }
}

//fieldset
legend {
    @include heading-medium();
    border-bottom: 0;
    line-height:1.6 !important;
}

form{
    legend{
        margin-bottom:0;
    }
}

//date input
.form-date {
    .form-group {
        float: left;
        width: 50px;
        margin-right: 20px;
        margin-bottom: 0;
        clear: none; 
        margin-top:10px;
        @media (min-width: 641px){
            width: 65px;
        }
        label {
            display: block;
            padding-bottom: 2px;
            font-weight: 400;
        }
        input {
            width: 100% !important; 
        }
    }

    .form-group-year {
        width: 70px; 
        @media (min-width: 641px){
            width: 100px;
        }
    }
}

//form errors
.form-group-error {
    margin-right: 15px;
    border-left: 4px solid $red;
    padding-left: 10px; 

    @media (min-width: 641px) {
        border-left: 5px solid $red;
        padding-left: 15px; 
    }
}
  

.form-control-error {
  border: 4px solid $red !important; 
}

.error-message {
    font-size: 16px;
    color: $red;
    display: block;
    clear: both;
    margin: 0 0 5px;
    padding: 2px 0; 
    font-weight:700;

    @media (min-width: 641px) {
        font-size: 19px;
    }

    &:before{
        font-family: FontAwesome;
        content: "\F071";
        margin-right:5px;
    }
}

.form-label .error-message,
.form-label-bold .error-message {
  padding-top: 4px;
  padding-bottom: 0; 
}

.error-message-wrapper{
    border: 2px solid $red;
    padding: 10px;
    margin: 10px 0;

    .error-message{
        font-size: 14px;

        @media (min-width: 641px){
            font-size: 16px;
        }
    }
}

//button input fix
.form-group{
    input.btn.btn-primary{
        width: auto;
        max-width: 100%;
    }
}

.form-group{
    .panel{
        .form-date{
            margin-bottom:30px;
            display:inline-block;
            width:100%;
        }
    }
}

.form-label-header{
    margin:0 0 10px;
}

.scopeNote{
    @include font-xsmall();
}

//form styles
.form-group + .text-highlight{
    margin-bottom:60px;

    @media (max-width: 641px){
        margin-bottom:50px;
    }
}

.form-top{
    margin-bottom:50px;
    clear:both;
    display:inline-block;
    width:100%;

    @media (max-width: 641px){
        margin-bottom:30px;
    }

    .form-back{
        width:50%;
        float:left;

        a{
            margin:0;
        }
    }

    .form-progress{
        text-align:right;
        width:50%;
        float:right;
        color:$secondary-font-color;
    }
}

.header-lcc{
    .service-name{
        width:100%;
        display:block;
        margin:-5px 0 10px 0;
        text-align:left;
        @media (min-width: 641px){
            text-align:right;
            position:absolute;
            top:15px;
            right:15px;
        }
        @media (min-width: 990px){
            margin-left:-250px;
            padding:0 250px;
            text-align:center;
            top:30px;
        }
        a{
            color:white;
            font-weight:700;
            font-family:$font-secondary;
            font-size:16px; 
            margin:0;
            padding:0;
            width:auto;
            display:inline-block;
            @media (min-width: 641px){
                text-align:right;
            }
            @media (min-width: 990px){
                font-size:19px;
                text-align:center;
            }     
        }
    }
}

.form-back{
    margin:10px 0 0;
    padding:0;
}

h1 .form-progress{
    display:block;
    font-size:16px;
    color:$secondary-font-color;
    @media (min-width: 641px){
        font-size:19px;
    }
}

.check-answers{
    position:relative;
    h3{
        @media (max-width: 641px){
            padding-right:75px;
        }
    }
    p{
        margin:0 !important;
        width:100%;
        @media (min-width: 641px){
            float:left;
            width:80%;
        }
    }
    a{
        text-align:right;
        line-height:1.6;
        @media (max-width: 641px){
            position:absolute;
            top:1rem;
            right:0;
        }
        @media (min-width: 641px){
            float:right;
            width:20%;
            
        }
    }
}

.panel-confirmation{
    text-align:center;
    padding:30px 15px;
    @media (min-width: 641px){
        padding:80px 40px;
    }
    h1{
        margin:0 0 15px;
    }
}

//errors and validation 
.error-summary{
    border: 5px solid $red;
    padding:30px;
    *{
        margin:15px 0 0;
        @include text();
    }
    li{
        margin:7px 0 0;
        &:first-child{
            margin-top:0;
        }
    }
    *:first-child { 
        margin-top: 0 !important; 
    }
    *:last-child { 
        margin-bottom: 0 !important; 
    }
    .error-summary-list{
        padding:0;
        li{
            a{
                color:$red;
                font-weight:bold;
            }
        }
    }
}

//search-group
.search-group{
    @media (min-width: 641px) {
        width:50% !important;
    }
    &.postcode-lookup{
        max-width:20em !important;
        margin-bottom:15px;
        @media (min-width: 641px) {
            width:20em !important;
            margin-bottom:20px;
        }
    }
    .form-control{
        width:100% !important;
        @include border-radius(4px 0 0 4px !important);
    }
    .btn{
        height:45px;
        background:$primary-button-background-color;
        color:$primary-button-color;
        border:1px solid $primary-button-background-color;
        border-bottom-color:darken($primary-button-background-color,15%);
        margin:0;
        padding: 10px 15px;
        font-size:16px;
        box-shadow:none !important;
        &:hover{
            background:lighten($primary-button-background-color,5%);
        }
    }
}

.search-group-link{
    display:block;
    margin:5px 0 0 !important;
    font-size:16px;
    line-height:1.6;
    @media (min-width: 641px) {
        font-size:19px;
    }
}

.form-group-link{
    margin-top:15px;
    display:inline-block;
}

.postcode-completed{
    p,
    a{
        float:left;
        padding:0;
        line-height:1;
    }
    label{
        display:block;
    }
    p{
        margin:0 15px 0 0;
    }
    a{
        margin:0;
    }
    @media (max-width: 340px) {
        label{
            display:block;
            margin:0 0 10px 0;
            float:none;
        }
        p{
            margin:0 10px 0 0;
        }
    }
}

@import 'form_elements/radio_buttons';