/*** APPLICATION STAGE CONDITIONALS ***/
body #app .container label {
    font-size:0.9rem;
}

#application-form-block #app .container, 
#application-form-block .container .grid-x {
    padding-left: 0;
    padding-right: 0;
}
#application-form-block #app #app-navigation li {
    font-size: 0.9rem;
}
#application-form-block #app #app-navigation li.active::before {
    position: relative;
    content: "";
    display: inline-block;
    width: 0.8rem;
    height: 1.3rem;
    border-right: 0.3rem solid #48D7C6;
    transform: rotate(45deg);
    border-bottom: 0.3rem solid #48D7C6;
    border-radius: 0.2rem;
    float: right;
    margin: 0 0.5rem;
}
#app .container #application-reset button {
    border-radius: 3rem;
    text-align: center;
    margin-top: 1rem;
    border: 1px solid #1d252c;
    background-color: #fff;
    color: #1d252c;
}
#application-form-block #app-stage-conditionals {
    background: transparent!important;
}
body #app .container .complete input, body #app .container .complete textarea, body #app .container .checkbox-wrapper,
body #app .container .complete select, body #app .container .complete .radio-wrapper .radio-item,
body #app .container label input, body #app .container label select, body #app .container .radio-input .radio-item,
body #app .container textarea {
    border: 3px solid #48d7c6;
    font-size: 1rem;
}
#app .container .complete .radio-wrapper .radio-item, #app .container .radio-input .radio-item {
    max-height: 2.5rem;
}
#app .container .field_info {
    margin-top: 0!important;
    width: 100%!important;
}
#app .container label input:focus, #app .container .complete select:focus,
#app .container .complete select:hover {
    border: 3px solid #00776A!important;    
}
#app .container .popout .description {
    margin-left: 0!important;
}
#app .container .popout .description .popout-button {
    position: absolute!important;
}
#app .container .popout .description .popout-body .popout-close:before {
    border-radius: 0!important;
}
#app .container .popout .description .popout-body {
    padding: 1rem!important;
    max-height: 160px;
    overflow: scroll;
}
#app .container .popout .description .popout-body p {
    font-size: 0.8rem!important;
}


/*** Choose your courses ***/

#app-stage-course-select .course-search-wrap #course-search {
    padding: 0 1rem;
}
#app-stage-course-select .course-search-wrap #course-search .selected-course--input {
    height: 2.2rem;
    border: 2px solid #00776A!important;
}
#app-stage-course-select .course-search-wrap #course-search .selected-course--button {
    background-color: #fff!important;
    border: 2px solid #48d7c6!important;
    border-radius: 0!important;
    height: 2.2rem;
    font-size: 0.8rem;
}
#app-stage-course-select .course-search-wrap #course-search .selected-course--button:hover {
    border: 2px solid #00776A!important;    
}
#app-stage-course-select .course-search-wrap #course-search .selected-course--input {
    border-radius: 0!important;    
}
#app-stage-course-select #app-selected-courses .selected-courses-wrap .app-selected-course.focus {
    border: 2px solid #00776A!important;  
}
#app-stage-course-select #app-selected-courses .selected-courses-wrap .app-selected-course .title {
    font-size: 1.2rem!important;
    color: #00776A!important;
}
#app-stage-course-select #app-selected-courses .selected-courses-wrap .app-selected-course .details {
    font-size: 1rem!important;
}

/*** Student details ***/

#app .container label input::placeholder {
    font-size: 0.8rem;
}
#app .container .complete .checkbox-wrapper {
    border: 2px solid #00776A!important;
}


/*** Submit Stage ***/
#app .container .stage {
    padding: 0 0 0 1rem;
    font-size: 1rem;
    line-height: 1.5rem; 
}
#app-stage-submit .confirm-studentDetails {
    background-color: #DEF2F0;
}
#app-stage-submit .confirm-parentCarerDetails {
    background-color: #DEF2F0;
    margin: 2rem 0;
}
#app-stage-submit .CriminalConvictionID, #app-stage-submit .DisabilityNotes2,
#app-stage-submit .EmergencyContactRelation2, #app-stage-submit .HighestQualID,
#app-stage-submit .WhereFound {
    padding-bottom: 2rem;
}
#app-stage-submit .confirm-support {
    background-color: #DEF2F0;
    margin: 2rem 0;
}
#app-stage-submit .confirm-progression {
    background-color: #DEF2F0;
}
#app-stage-submit .confirm-education {
    background-color: #DEF2F0;
}
#app .container .stage .confirm-studentDetails .container > div, 
#app .container .stage .confirm-support .container > div, 
#app .container .stage .confirm-progression .container > div, 
#app .container .stage .confirm-parentCarerDetails .container > div, 
#app .container .stage .confirm-education .container > div {
    padding: 0 2rem;    
}
#app #app-stage-submit .title {
    font-size: 1.2rem;
    padding: 1.5rem 2rem 0;
    background-color: #DEF2F0;
    font-weight: 600;
    text-decoration: underline;
}
#app-stage-submit h5 {
    margin: 1rem 0;
    padding-left: 2rem;
}
#app #app-stage-submit .details {
    margin-bottom: 1.5rem;
    padding: 1rem 2rem 2rem;
    background-color: #DEF2F0;
    line-height: 1.6rem;
}
#app #app-stage-submit .stage-edit-button {
    display: block;
    border: 1px solid #333;
    padding: 0.3rem;
    width: 100px;
    text-align: center;
    margin: 0 0 1rem 2rem;
    background-color: #fafafa;
    cursor: pointer;
}
#app #app-stage-submit .stage-edit-button:hover {
    background-color: #1D252C;
    color: #fff;
}

/*** Application Consent ***/
#app .container .stage > #AcceptMarketingConsent {
    background-color: #e8e9ea;
    margin: 2rem 0;
    padding: 2rem 2.8rem;
}



@media screen and (max-width: 480px) {
    #application-form-block #app .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    #app-navigation {
        margin: 0 auto!important;
    }
    #app .container .stage > div {
        padding: 0;
    }
    #app .container .stage, 
    #app-stage-course-select #app-selected-courses .selected-courses-wrap {
        padding: 1rem 0!important;
    }
    #app .container .stage {
        border-left: 0!important;
        padding: 1rem 0;
    }
    #app-stage-course-select #app-selected-courses .selected-courses-wrap .app-selected-course .title {
        font-size: 1.1rem!important;
    }
    #app-stage-course-select .course-search-wrap, 
    #app-stage-course-select #app-selected-courses .selected-courses-wrap .app-selected-course {
        padding:0.5rem!important;
    }
    #app .container .stage .app-stage--next-wrap .app-stage--next-btn {
        position: relative!important;
        float: right;
    }
    #app .container .stage .app-stage--next-wrap {
        margin-top: 0!important;
    }
    #app .container .stage .confirm-studentDetails .container > div, 
    #app .container .stage .confirm-support .container > div, 
    #app .container .stage .confirm-progression .container > div, 
    #app .container .stage .confirm-parentCarerDetails .container > div, 
    #app .container .stage .confirm-education .container > div {
        padding: 0 1rem;    
    }   
    #app .container #application-reset {
        padding-right: 0!important;
    }
    #application-form-block #app #app-navigation li {
        font-size: 1rem;
    }

}

@media screen and (max-width: 1024px) {
    #application-form-block #app .container {
        padding-left: 1rem;
    }
    #app .container .stage .app-stage--next-wrap .app-stage--next-btn {
        padding: 0.5rem 1rem!important;
    }
    #app-stage-course-select #course-results-grid .course-item .post-info {
        word-wrap: break-word;
    }
    #app .container .stage .confirm-studentDetails .container > div, 
    #app .container .stage .confirm-support .container > div, 
    #app .container .stage .confirm-progression .container > div, 
    #app .container .stage .confirm-parentCarerDetails .container > div, 
    #app .container .stage .confirm-education .container > div {
        padding: 0 1rem;    
    }
    #app .container .stage > #AcceptMarketingConsent {
        padding: 2rem;
    }
}