.select-style {
    border-bottom: 1px solid #000;
    border-top: 1px solid white;
    border-right: 1px solid white;
    border-left: 1px solid white;
    background-color: white;
    margin-top: 15px;
}

/* GRID NEW CLIENT FORM */

.grid-container-newClient {
    display: grid;
    grid-template-columns: 18% 18% 18% 18% 18%;
    grid-template-rows: 10% 10% 10% 10%;
    column-gap: 2%;
    row-gap: 15%;
    grid-template-areas: "Client-Name Email Website Zip-Code ." "City State Address Address ." "MainContact MainTitle Phone Mobile MainBirthday" "SecondContact Title2 Phone2 Birthday2 .";
}

.grid-container-newClient .Client-Name {
    grid-area: Client-Name;
}

.grid-container-newClient .Address {
    grid-area: Address;
}

.grid-container-newClient .City {
    grid-area: City;
}

.grid-container-newClient .State {
    grid-area: State;
}

.grid-container-newClient .Zip-Code {
    grid-area: Zip-Code;
}

.grid-container-newClient .Phone {
    grid-area: Phone;
}

.grid-container-newClient .Mobile {
    grid-area: Mobile;
}

.grid-container-newClient .MainTitle {
    grid-area: MainTitle;
}

.grid-container-newClient .MainBirthday {
    grid-area: MainBirthday;
}

.grid-container-newClient .Email {
    grid-area: Email;
}

.grid-container-newClient .Website {
    grid-area: Website;
}

.grid-container-newClient .button-newClient {
    grid-area: button-newClient;
}

.grid-container-newClient .MainContact {
    grid-area: MainContact;
}

.grid-container-newClient .SecondContact {
    grid-area: SecondContact;
}

.grid-container-newClient .Phone2 {
    grid-area: Phone2;
}

.grid-container-newClient .Title2 {
    grid-area: Title2;
}

.grid-container-newClient .Birthday2 {
    grid-area: Birthday2;
}

/* GRID INTERVIEW FORM */

.grid-container-interview {
    display: grid;
    grid-template-columns: 20% 20% 20% 20%;
    grid-template-rows: 20% 20% 20% 20% 20% 50% 20%;
    gap: 5% 5%;
    grid-template-areas: "date date register register" "responsible . . ." "candidate . . ." "job . . ." "client status place ." "obs . . ." ". button . .";
}

.date {
    grid-area: date;
}

.register {
    grid-area: register;
}

.responsible {
    grid-area: responsible;
}

.candidate {
    grid-area: candidate;
}

.job {
    grid-area: job;
}

.client {
    grid-area: client;
}

.status {
    grid-area: status;
}

.place {
    grid-area: place;
}

.obs {
    grid-area: obs;
}

.button {
    grid-area: button;
}

.grid-container-interview .botao {
    margin-left: 45%;
    margin-top: 10px
}

.grid-container-interview select {
    width: 100%
}

/* EDIT PROFILE FORM GRID */

.grid-container-applicationInformation {
    display: grid;
    grid-template-columns: 20% 20% 20% 20%;
    grid-template-rows: 9;
    column-gap: 5%;
    row-gap: 2vh;
    grid-template-areas: "prefix . . ." "first-name first-name last-name last-name" "phone-number mobile-number email email" "zipcode city state ." "address apt . ." "name-emergency name-emergency phone-emergency ." "background-check background-check background-check background-check" "drivers-license drivers-license drivers-license drivers-license" "mode-transport mode-transport mode-transport mode-transport";
}

.grid-container-applicationInformation.prefix {
    grid-area: prefix;
}

.grid-container-applicationInformation .first-name {
    grid-area: first-name;
}

.grid-container-applicationInformation .last-name {
    grid-area: last-name;
}

.grid-container-applicationInformation .phone-number {
    grid-area: phone-number;
}

.grid-container-applicationInformation .mobile-number {
    grid-area: mobile-number;
}

.grid-container-applicationInformation .address {
    grid-area: address;
}

.grid-container-applicationInformation .apt {
    grid-area: apt;
}

.grid-container-applicationInformation .city {
    grid-area: city;
}

.grid-container-applicationInformation .state {
    grid-area: state;
}

.grid-container-applicationInformation .zipcode {
    grid-area: zipcode;
}

.grid-container-applicationInformation .email {
    grid-area: email;
}

.grid-container-applicationInformation .name-emergency {
    grid-area: name-emergency;
}

.grid-container-applicationInformation .phone-emergency {
    grid-area: phone-emergency;
}

.grid-container-applicationInformation .background-check {
    grid-area: background-check;
}

.grid-container-applicationInformation .drivers-license {
    grid-area: drivers-license;
}

.grid-container-applicationInformation .mode-transport {
    grid-area: mode-transport;
}

.highschool-grid-container {
    display: grid;
    grid-template-columns: 20% 20% 20% 20%;
    grid-auto-rows: auto;
    column-gap: 5%;
    row-gap: 5%;
    grid-template-areas: "highschool highschool-country highschool-city highschool-state" "highschool-start highschool-start . ." "highschool-end highschool-end . ."
}

.highschool-grid-container .highschool {
    grid-area: highschool;
}

.highschool-grid-container .highschool-country {
    grid-area: highschool-country;
}

.highschool-grid-container .highschool-state {
    grid-area: highschool-state;
}

.highschool-grid-container .highschool-start {
    grid-area: highschool-start;
}

.highschool-grid-container .highschool-end {
    grid-area: highschool-end;
}

.highschool-grid-container .highschool-yearsattended {
    grid-area: highschool-yearsattended;
}

#highschool-fields {
    display: none
}

.university-grid-container {
    display: grid;
    grid-template-columns: 20% 20% 20% 20%;
    grid-auto-rows: auto;
    column-gap: 5%;
    row-gap: 5%;
    grid-template-areas: "university university-country university-city university-state" "university-start university-start . ." "university-end university-end . ." "degree . . ."
}

.university-grid-container .university {
    grid-area: university;
}

.university-grid-container .university-country {
    grid-area: university-country;
}

.university-grid-container .university-state {
    grid-area: university-state;
}

.university-grid-container .university-city {
    grid-area: university-city;
}

.university-grid-container .university-start {
    grid-area: university-start;
}

.university-grid-container .university-end {
    grid-area: university-end;
}

.university-grid-container .degree {
    grid-area: degree;
}

#university-fields {
    display: none
}

.workingPreferences-grid-container {
    position: relative;
    display: grid;
    grid-template-columns: 45% 45%;
    grid-auto-rows: auto;
    gap: 2vh;
    grid-template-areas: "apply-options apply-options apply-options" "forklift-certified . ." "forklift-kind . ." "typeofcontract typeofcontract ." "part-timehours part-timehours ." "work-availabledays work-availabledays work-availabledays" "work-shifts work-shifts work-shifts" "work-start . ." "desired-pay . ." "absent-work . .";
    font-size: 16px;
}

.workingPreferences-grid-container .apply-options {
    grid-area: apply-options;
}

.workingPreferences-grid-container .forklift-kind {
    grid-area: forklift-kind;
}

.workingPreferences-grid-container .forklift-certified {
    grid-area: forklift-certified;
}

.workingPreferences-grid-container .typeofcontract {
    grid-area: typeofcontract;
}

.workingPreferences-grid-container .part-timehours {
    grid-area: part-timehours;
}

.workingPreferences-grid-container .work-availabledays {
    grid-area: work-availabledays;
}

.workingPreferences-grid-container .work-shifts {
    grid-area: work-shifts;
}

.workingPreferences-grid-container .work-start {
    grid-area: work-start;
}

.workingPreferences-grid-container .desired-pay {
    grid-area: desired-pay;
}

.workingPreferences-grid-container .absent-work {
    grid-area: absent-work;
}

.workingPreferences-grid-container table {
    width: 100%
}

#kind-forklift {
    display: none;
}

#certified-forklift {
    display: none;
}

.workingSkills-grid-container {
    display: grid;
    grid-template-columns: 45% 45%;
    grid-auto-rows: auto;
    gap: 2vh;
    grid-template-areas: "workingSkillsTable workingSkillsTable" "languageProficiency languageProficiency" "notes notes";
    font-size: 16px;
}

.workingSkills-grid-container .workingSkillsTable {
    grid-area: workingSkillsTable
}

.workingSkills-grid-container .languageProficiency {
    margin-top: 20px;
    grid-area: languageProficiency
}

.workingSkills-grid-container .notes {
    grid-area: notes
}

.lastJobs-grid-container {
    display: grid;
    grid-template-columns: 45% 45%;
    grid-auto-rows: auto;
    row-gap: 1vh;
    column-gap: 5%;
    grid-template-areas: "companyName address" "supervisor phone" "employedFrom employedFrom" "jobDescription jobDescription " "reasonForLeaving reasonForLeaving " "anotherJobLabel . ";
    font-size: 16px;
}

.lastJobs-grid-container .companyName {
    grid-area: companyName;
}

.lastJobs-grid-container .supervisor {
    grid-area: supervisor;
}

.lastJobs-grid-container .address {
    grid-area: address;
}

.lastJobs-grid-container .phone {
    grid-area: phone;
}

.lastJobs-grid-container .employedFrom {
    grid-area: employedFrom;
}

.lastJobs-grid-container .employedTo {
    grid-area: employedTo;
}

.lastJobs-grid-container .jobDescription {
    grid-area: jobDescription;
}

.lastJobs-grid-container .reasonForLeaving {
    grid-area: reasonForLeaving;
}

.lastJobs-grid-container .anotherJobLabel {
    grid-area: anotherJobLabel;
}

.filterApplicationInformation-grid-container {
    display: grid;
    grid-template-columns: 20% 20% 20% 20%;
    grid-auto-rows: auto;
    column-gap: 5%;
    grid-template-areas: "city backgroundCheck driversLicense modeOfTransport";
    font-size: 16px;
    padding: 20px
}

.filterApplicationInformation .city {
    grid-area: city;
}

.filterApplicationInformation .backgroundCheck {
    grid-area: backgroundCheck;
}

.filterApplicationInformation .driversLicense {
    grid-area: driversLicense;
}

.filterApplicationInformation .modeOfTransport {
    grid-area: modeOfTransport;
}

.filterEducationTraining-grid-container {
    display: grid;
    grid-template-columns: 20% 20% 20% 20%;
    grid-auto-rows: auto;
    column-gap: 5%;
    grid-template-areas: "highschool university trainingCertification .";
    font-size: 16px;
    padding: 20px
}

.filterEducationTraining .highschool {
    grid-area: highschool;
}

.filterEducationTraining .university {
    grid-area: university;
}

.filterEducationTraining .trainingCertification {
    grid-area: trainingCertification;
}


.grid-container-editEmployeeBasicInformation{
    display: grid;
    grid-template-columns: 20% 20% 20% 20%;
    grid-template-rows: 9;
    column-gap: 5%;
    row-gap: 5px;
    grid-template-areas: "prefix . . ." "first-name first-name last-name last-name" "phone-number mobile-number email email" "zipcode city state ." "address apt . .";
    
}
.grid-container-editEmployeeBasicInformation label{
    top: 10px !important;
}

.grid-container-editEmployeeBasicInformation.prefix {
    grid-area: prefix;
}

.grid-container-editEmployeeBasicInformation .first-name {
    grid-area: first-name;
}

.grid-container-editEmployeeBasicInformation .last-name {
    grid-area: last-name;
}

.grid-container-editEmployeeBasicInformation .phone-number {
    grid-area: phone-number;
}

.grid-container-editEmployeeBasicInformation .mobile-number {
    grid-area: mobile-number;
}

.grid-container-editEmployeeBasicInformation .address {
    grid-area: address;
}

.grid-container-editEmployeeBasicInformation .apt {
    grid-area: apt;
}

.grid-container-editEmployeeBasicInformation .city {
    grid-area: city;
}

.grid-container-editEmployeeBasicInformation .state {
    grid-area: state;
}

.grid-container-editEmployeeBasicInformation .zipcode {
    grid-area: zipcode;
}

.grid-container-editEmployeeBasicInformation .email {
    grid-area: email;
}