@charset "UTF-8";

html {
    margin: 0;
    padding: 0;
    transition: all 0.2s;
}

body {
    font-family: 'Lexend', sans-serif;
    margin: 0;
}

h1.title {
    text-align: center;
    width: auto;
}

img.logo {
    width: 20%;
    margin: 20 20 0 20;
}

h4 {
    padding: 0;
    margin-bottom: 6;
    margin-top: 12;
}

h3 {
    margin-bottom: 14px;
}

.outer-progress-bar {
    width: calc(100% - 30px);
    margin: 30 15 45 15;
    border-radius: 3px;
    height: 15px;
    background-color: rgb(236, 236, 236);
}

.inner-progress-bar {
    width: 0%;
    border-radius: 3px;
    height: 15px;
    background-color: rgb(249, 157, 28);
    text-align: right;
    transition: width 0.3s;
}

button.primary-button {
    color: white;
    font-family: 'Lexend', sans-serif;
    font-size: medium;
    background-color: rgb(249, 157, 28);
    border: none;
    width: 100%;
    padding-top: 20;
    padding-bottom: 20;
    text-align: center;
    margin: auto;
    display: block;
}

button.secondary-button {
    color: black;
    font-family: 'Lexend', sans-serif;
    font-size: medium;
    background-color: white;
    border: none;
    width: 100%;
    padding-top: 20;
    padding-bottom: 20;
    text-align: center;
    margin: auto;
    display: none;
}

.information-header {
    left: 0;
    color: rgb(249, 157, 28);
}

input {
    padding: 10 20 10 20;
    border-radius: 8px;
    margin-bottom: 8px;
    width: 100%;
    max-width: 455;
    border: 1px solid rgb(184, 184, 184);
}

   /* input:invalid {
        padding: 10 20 10 20;
        border-radius: 8px;
        margin-bottom: 8px;
        width: 100%;
        max-width: 455;
        border: 2px solid rgb(221, 80, 75);
    } */

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 10 20 10 20;
    border-radius: 8px;
    border: 1px solid grey;
    width: 100%;
    max-width: 455;
    margin-bottom: 8px;
}

.page-content {
    margin: 30 20 10 20;
    transition: height 0.3s;
}

.grouped-container {
    background-color: rgb(243, 243, 243); 
    padding: 10 20 20 20;
    margin-bottom: 15;
    border-radius: 8px;
    max-width: 420;
    width: calc(100% - 40px);
    display: inline-block;
}

.grouped-container input {
    width: 80%;
    max-width: 350;
}

.wide-grouped-container {
    background-color: rgb(243, 243, 243); 
    padding: 10 20 20 20;
    margin-bottom: 25;
    border-radius: 8px;
    width: calc(100% - 40px);
}

.wide-grouped-container input {
    width: 80%;
    max-width: 435;
}

.wide-grouped-container select {
    width: 80%;
}

.wide-grouped-container h4 {
    width: 80%;
    max-width: 435;
}

.wide-grouped-container div {
    width: 80%;
    max-width: 435;
    display: inline-block;
}

span {
    display: inline-block;
    margin-bottom: 2px;
    padding: 5 8 5 8;
}

.availability-widget {
    background-color: rgb(243, 243, 243);
    text-align: left;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 20px;
    max-width: 150px;
    width: 100%;
    display: inline-block;
}

div #personal-info-container {
    display: block;
    height: auto;
}

div #job-preference-container {
    display: none;
    height: 0%;
}

div #availability-container {
    display: none;
    height: 0%;
}

div #successful-qualities-container {
    display: none;
    height: 0%;
}

div #work-experience-container {
    display: none;
    height: 0%;
}

div #education-info-container {
    display: none;
    height: 0%;
}

div #references-container {
    display:none;
    height:0%;
}

div #application-complete-container {
    display:none;
    height:0%;
}