@import "aiFAASpecialListings.css";
@import "aiFAAFocus.css";
@import "aiFAAPropertyTypes.css";
@import "aiFAASmallBusinessAdmin.css";
@import "aiStateCityList.css";

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .profile-upload-photo-label, .profile-upload-photo, .profile-resume-link {
        margin-top: 10px;
    }
    .profile-upload-resume {
        text-align: center;
        -ms-grid-column-align: start !important;
    }
}

@media (max-width:767px) {
    .profile-header {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        grid-template-areas: "profile-picture" "profile-upload" "profile-preview" "profile-info";
        -ms-grid-rows: 21rem;
        grid-template-rows: 21rem;
    }
}

@media (min-width:768px) {
    .profile-header {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 3fr 3fr;
        grid-template-columns: 1fr 3fr 3fr;
        grid-template-areas: "profile-picture profile-upload profile-preview" "profile-info profile-info profile-info";
        -ms-grid-rows: 20rem;
        grid-template-rows: 20rem;
    }
}

@keyframes blink {
    0% {
        opacity: .2;
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: .2;
    }
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-moz-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-o-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.saved, .error {
    -moz-animation: fadeOut 5s forwards;
    -webkit-animation: fadeOut 5s forwards;
    -o-animation: fadeOut 5s forwards;
    animation: fadeOut 5s forwards;
}

.saved {
    color: green;
}

.error {
    color: red;
}

.saving, .saved, .error {
    margin: 0 1rem 0 0;
    font-size: 1.5rem;
    vertical-align: middle;
}

    .saving span {
        animation-name: blink;
        animation-duration: 1.4s;
        animation-iteration-count: infinite;
        animation-fill-mode: both;
    }

        .saving span:nth-child(2) {
            animation-delay: .2s;
        }

        .saving span:nth-child(3) {
            animation-delay: .4s;
        }

.profile-upload {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: profile-upload;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    /*grid-template-columns: 1fr 1fr;*/
    -ms-grid-rows: 3rem;
    grid-template-rows: 3rem;
    grid-template-areas: "resume-link" "upload-resume" "fee-assignment";
    width: 80%;
    margin: 0 auto;
}

.profile-picture {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: profile-picture;
    /*overflow: hidden;*/
}

.profile-preview {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: profile-preview;
    width: 80%;
    margin: 0 auto;
}

.profile-upload-resume {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-row: auto;
    grid-area: upload-resume;
    -ms-grid-column-align: center;
}

.profile-resume-link {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-area: resume-link;
    grid-row: auto;
    display: flex;
}

.profile-upload-file input[type=file] {
    width: auto !important;
}

.profile-upload-fee-assignment {
    grid-area: fee-assignment;

    -ms-grid-row: 4;
    -ms-grid-column: 1;

    -ms-grid-column-align: center;
}

    .profile-upload-fee-assignment label {
        display: inline;
        vertical-align: middle;
        margin: 0 0 0 2%;
    }

.profile-info {
    grid-area: profile-info;
    -ms-grid-row: 2;
    -ms-grid-column-span: 3;
    -ms-grid-column-align: center;
}

.profile-textbox-multiline-text-box {
    display: grid;
    display: -ms-grid;
    grid-template-columns: 1fr;
    -ms-grid-columns: 1fr;
}

    .profile-textbox-multiline-text-box label {
        width: 50%;
        -ms-grid-row: 1;
    }

    .profile-textbox-multiline-text-box textarea {
        width: 50%;
        height: 10rem;
        -ms-grid-row: 2;
    }

.profile-attestation-section {
    width: 80%;
    margin: 2rem auto;
}

    .profile-attestation-section .profile-attestation-checkbox label {
        display: inline;
        margin: 0 0 0 1%;
        vertical-align: middle;
    }

.profile-attestation-list > ul:nth-child(1) {
    list-style-type: square;
    margin: .2rem 0px .5rem 3rem;
}

    .profile-attestation-list > ul:nth-child(1) > li {
        line-height: 23px;
    }


#profile-prop-type-update-attestation-button {
    text-align: right;
}

.ai-faa-header-checkbox-grid {
    display: -ms-grid;
    display: grid;
        grid-template-areas: "checkbox text";
    -ms-grid-columns: 1fr 15fr;
    grid-template-columns: 1fr 15fr;
    margin-top: 1rem;
}

.ai-faa-header-checkbox-fee-assignment {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: checkbox;
    grid-row: auto;
    -ms-grid-column-align: center;
        justify-self: center;
    margin-top: .2rem;
}

.ai-faa-header-checkbox-opt-out {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-area: checkbox;
    grid-row: auto;
    -ms-grid-column-align: center;
        justify-self: center;
    margin-top: .2rem;
}

.ai-faa-header-checkbox-text-fee {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: text;
    grid-row: auto;
}

.ai-faa-header-checkbox-opt-out-text {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: text;
    grid-row: auto;
}

.ai-faa-header-checkbox-sub-text {
    font-size: 10px;
    margin-left: 2px;
    line-height: 1rem;
    font-style: italic;
}


.ai-faa-header-checkbox-text-fee h3, .ai-faa-header-checkbox-opt-out-text h3 {
    margin-bottom: .2rem;
}