.hero {
    padding:2em;
    margin-bottom:1em;
}

    .hero h1 {
        float:left;
        font-size:3.5em;
        font-weight:200;
        line-height:1;
        margin:0;
    }

    .hero .view-profile {
        float:right;
    }

.acc {
    display:grid;
    grid-template-columns: 1fr 2.5fr;
    grid-gap:1em;
}

.acc .intro {
    background-color:#fff;
    padding:2em;
    margin-bottom:1em;
}

    .intro h2 {
        font-size: 2.5em;
        font-weight:300;
        margin:0;
    }

.login {
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-gap:1em;
}

.login > div {
    background-color:#fff;
    padding:2em;
}

    label span {
        color:var(--pink);
    }

    .login input,
    .reset input,
    .login textarea,
    .login label,
    .reset label,
    select,
    option {
        float:left;
        clear:left;
        width:100%;
    }

    .login input,
    .reset input,
    option,
    select {
        border:0;
        outline:0;
        background-color:#eee;
        padding:1em;
        margin-bottom:1em;
    }

    .login label,
    .reset label {
        font-size:1.1em;
        margin-bottom:0.25em;
    }

    input.submit-btn {
        background-color:var(--pink);
        color:#fff;
        transition: all 0.25s ease-out;
        cursor: pointer;
        margin:0;
        text-transform: uppercase;
    }

        input.submit-btn:hover {
            background-color:#eee;
            color:#333;
        }

    .tox-tinymce {
        margin-bottom:1em;
    }

.alt {
    margin-top:2em;
}

    .alt a {
        float:left;
        width:auto;
        margin:0 2px 2px 0;
        background-color:#333;
    }

.reset {
    width:50%;
    background-color:#fff;
    padding:2em;
    font-size: 1.1em;
}

.error-text,
.errortext {
    color:red;
}

.form_error,
.inputerror {
    float:left;
    clear:left;
    width:100%;
    border:2px solid red;
    color:red;
    margin-bottom:1em;
}

.profile {
    background-color:#fff;
    padding:2em;
}
    .profile > h3 {
        font-size: 2.5em;
        font-weight:300;
        margin:0 0 1em 0;
    }

    .profile .field {
        position: relative;
        display:grid;
        grid-template-columns: 1fr 3fr;
        grid-gap:1em;
        border-bottom:1px solid #eee;
        padding:2em 0;
    }

        .profile .field p {
            margin:0;
        }

        .profile .field:last-of-type {
            border-bottom:0;
            margin-bottom:0;
        }

        .field ul,
        .field ol {
            margin:1.25em;
        }

        .field li {
            margin-bottom:0.5em;
            padding-left:0.5em;
            line-height:1.2;
        }

    /* .profile .categories {
        display:grid;
        grid-template-columns:repeat(2,1fr);
        grid-gap:1em;
    } */

    .checkbox {
        float:left;
        margin-right:1.5em;
        display: block;
        position: relative;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .registerform .checkbox {
        margin-bottom:2em;
    }

    .checkbox label {
        float:left;
        font-size:1em;
        margin:0;
        color:#333;
    }

    .checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .checkmark {
        position: relative;
        float: left;
        margin-right: 0.75em;
        height: 20px;
        width: 20px;
        background-color: transparent;
        cursor: pointer;
        border:1px solid var(--pink);
    }

    .checkbox:hover input ~ .checkmark {
        border:1px solid var(--pink);
    }

    .checkbox input:checked ~ .checkmark {
        background-color:var(--pink);
    }

    .checkmark:after {
        content: "";
        position: absolute;
        display:none;
    }

    .checkbox input:checked ~ .checkmark:after {
        display: block;
    }

    .checkbox .checkmark:after {
        left: 31%;
        top: 10%;
        width: 5px;
        height: 10px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .checkbox p {
        font-size:1.2em;
        margin-bottom:0;
        cursor: pointer;
        float: left;
    }

        .checkbox p span {
        opacity:0.4;
        }

    .gallery-images {
        display:grid;
        grid-template-columns: repeat(4,1fr);
        grid-gap:2px;
    }

    .profile .field p.nodata {
        color:#bbb;
    }

.confirm-account {
    padding:2em;
    background-color:#fff;
}

.profile-updated img {
    float:left;
    width:3.5em;
    margin-bottom:1em;
}

.profile-updated p {
    float: left;
    font-size: 1.8em;
    color: var(--pink);
    margin: 0.225em 0 0 0.5em;
}

.edit-btn {
    position:absolute;
    right:1em;
    top:2em;
    background-color:var(--pink);
    color:#fff;
    padding:0.25em 1em;
    text-decoration: none;
    transition: all 0.25s ease-out;
    opacity:0;
}

    .edit-btn:hover {
        background-color:#eee;
        color:#333;
    }

    .field:hover .edit-btn {
        opacity:1;
    }

.popup {
    position:fixed;
    inset:0;
    padding:5%;
    width:100%;
    height:100%;
    background-color:#3339;
    backdrop-filter: blur(5px);
    z-index:5;
    display:none;
}

    .popup .inner {
        position:absolute;
        width:500px;
        max-width:calc(100% - 2em);
        max-height:80%;
        overflow:auto;
        background-color:#fff;
        padding:2em;
        left:50%;
        top:50%;
        transform:translate(-50%, -50%);
    }

    .popup input,
    .popup textarea,
    .popup label {
        float:left;
        clear:left;
        width:100%;
        margin-bottom:1em;
    }

    .popup input,
    .popup textarea {
        background-color:#eee;
        padding:1em;
        border:0;
        outline:0;
    }

    .popup label {
        font-size:1.1em;
    }

    .popup input.submit,
    .popup input[type="submit"] {
        background-color:var(--pink);
        cursor:pointer;
        width:200px;
        margin:0;
        float:right;
        clear:both;
    }

        .popup input.submit:hover,
        .popup input[type="submit"]:hover {
            background-color:#eee;
        }

        .popup input.submit[disabled="disabled"],
        .popup input[disabled="disabled"] {
            background-color:#666;
            cursor:not-allowed;
        }

    .close {
        position:absolute;
        right:2em;
        top:0;
    }

        .close span {
            float:left;
            width:0;
            transition:all 0.25s ease-in-out;
            overflow:hidden;
            margin-right:0em;
        }

        .close:hover span {
            width:50px;
            margin-right:1em;
        }

    .all-cats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap:1em;
        margin-bottom:2em;
    }

        .all-cats label {
            margin:0;
        }

.submit-for-approval {
    background-color:#eee;
    padding:2em;
}

    .submit-for-approval h3 {
        font-size:2em;
        margin-bottom:0.5em;
    }

    .submit-for-approval input {
        border:0;
        outline:0;
        cursor: pointer;
        padding:1em 2em;
        margin-top:1em;
    }

        .submit-for-approval input:hover {
            background-color:#fff;
        }

.pending-approval {
    background-color:#eee;
    padding:2em;
}

    .pending-approval img {
        float:left;
        width:3.5em;
        margin-bottom:1em;
    }

    .pending-approval h3 {
        float: left;
        font-size: 2em;
        color:#333;
        margin: 0.225em 0 0 0.5em;
    }

    .pending-approval p {
        clear:left;
        width:100%;
    }

    .pending-approval .dgrey-btn {
        display:Block;
        float:left;
        margin-top:1em;
    }

.account-options {
    background-color:#fff;
    padding:2em;
}

    .account-options .popup .inner {
        padding:0;
    }

    .account-options .popup .inner form {
        padding:2em;
    }

    .account-options .pink-btn {
        display:block;
        float:left;
        clear:left;
        margin-bottom:2px;
    }

    .account-options .pink-btn.delete {
        background-color:#333;
    }

        .pink-btn.delete:hover {
            background-color:red;
            color:#fff;
        }

        .pink-btn.disabled {
            background-color:#666;
        }

        .cancel-delete-btn {
            font-size:1.4em;
        }

            .cancel-delete-btn:hover {
                background-color:#eee;
                color:#333;
            }

        .delete-account-popup input[type="submit"]{
            width:100%;
        }

        .delete-account-popup label {
            font-weight:bold;
            color:red;
        }

    .other-options {
        background-color:#eee;
        padding:2em;
        margin-top:2em;
    }

.image-order {
    display:grid;
    grid-template-columns: 1fr;
    grid-gap:2px;
}

    .image-order > div {
        background-color:#eee;
    }

    .image {
        display:grid;
        grid-template-columns: 50px 1fr;
        background-color:#eee;
        margin-bottom:2px;
    }

        .image:last-of-type {
            margin-bottom:1em;
        }

        .image .actions {
            padding:1em;
        }

            .image .actions p {
                width:calc(100% - 120px);
                word-break: break-all;
                line-height:1;
            }

            .image .actions a {
                float:right;
                margin:0 2px 2px 0;
                padding:1em 1.25em;
            }

            .image .actions a img {
                height:1.2em;
            }

            .image a.pink-btn:hover,
            .image a.dgrey-btn:hover {
                background-color:#fff;
            }

.upload-more {
    border:1px solid #eee;
    padding:2em;
    margin-top:2em;
}

.loading {
    position: absolute;
    inset:0;
    background-color:#fffb;
    display:none;
    z-index:10;
}

    .loading .loading-inner {
        width:3em;
        position: absolute;
        left:50%;
        top:50%;
        transform:translate(-50%, -50%);
        background:none;
    }

    .loading.show {
        display:block;
    }

    .loading img {
        animation: spin 3s linear infinite;
    }

    @keyframes spin {
        from {transform:rotate(0deg);}
        to {transform:rotate(360deg);}
    }

.video {
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-gap:1em;
    margin-bottom:1em;
}

    .vid {
        display:grid;
        grid-template-columns:1fr 50px;
        grid-gap:1em;
        border:1px solid #eee;
        padding:2em;
        margin-bottom:1em;
    }

    .vid .delete-vid-btn {
        display:block;
        float:right;
    }

    .add-vid-btn {
        float:right;
        margin-bottom:1em;
    }

.account-jobs,
.account-articles {
    display:grid;
    grid-template-columns: 1fr;
    grid-gap:1em;
    padding:2em;
    background-color:#fff;
    margin-bottom:1em;
}

    .account-jobs:last-of-type,
    .account-articles:last-of-type {
        margin-bottom:0;
    }

    .account-jobs > h2,
    .account-articles > h2 {
        color:var(--pink);
        font-size:2em;
        margin:0;
    }

    .account-jobs .job,
    .account-articles .article {
        display:grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-gap:1em;
        background-color:#eee;
        padding:2em;
    }

    .account-articles .article {
        grid-template-columns: 1fr 1fr 1fr;
    }

        .account-jobs .job h3,
        .account-articles .article h3 {
            font-size:1.6em;
            margin:0;
        }

        .account-jobs .deet,
        .account-articles .deet {
            font-size:1em;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        .job .pink-btn,
        .article .pink-btn {
            display:block;
        }

    .cancel-btn {
        width:100%;
        font-size:1.3em;
    }

    .popup input.submit {
        width:100%;
    }

    .job-actions,
    .article-actions {
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 2px;
    }

    .delete-job-btn,
    .delete-article-btn {
        display:block;
    }

        .delete-job-btn:hover,
        .delete-article-btn:hover {
            background-color:#fff;
            color:#333;
        }

.nope {
    padding:2em;
    background-color:#fff;
    color:red;
    margin-bottom:1em;
}

    .editjob,
    .editarticle {
        padding:2em;
        background-color:#fff;
        position:relative;
    }


    .editjob input,
    .editarticle input,
    .editjob textarea,
    .editarticle textarea,
    .editjob label,
    .editarticle label {
        float:left;
        clear:left;
        width:100%;
        margin-bottom:1em;
    }

    .editjob input,
    .editarticle input,
    .editjob textarea,
    .editarticle textarea {
        background-color:#eee;
        padding:1em;
        border:0;
        outline:0;
    }

    .editjob label,
    .editarticle label {
        font-size:1.1em;
    }

    .editjob input.submit,
    .editarticle input.submit,
    .editjob input[type="submit"],
    .editarticle input[type="submit"] {
        background-color:var(--pink);
        cursor:pointer;
        width:200px;
        margin:0;
        float:right;
        clear:both;
    }

        .editjob input.submit:hover,
        .editarticle input.submit:hover,
        .editjob input[type="submit"]:hover,
        .editarticle input[type="submit"]:hover {
            background-color:#eee;
        }

        .editjob input.submit[disabled="disabled"],
        .editjob input[disabled="disabled"] {
            background-color:#666;
            cursor:not-allowed;
        }

@media screen and (max-width:699px){
    .login,
    .reset,
    .acc {
        display:grid;
        grid-template-columns: 1fr;
        grid-gap:1em;
        width:100%;
    }

    .edit-btn {
        opacity:1;
        padding:1em;
    }

    .account-jobs .job {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width:499px){
    .all-cats {
        grid-template-columns: 1fr;
    }

    .profile .field {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width:399px){
    .two-col {
        grid-template-columns: 1fr;
    }
}