/* *******************  POPUP CONTAINERS ************************ */

.popUp-container {
    display: none;
}

    .popUp-container.popUp-active {
        /*  display: block; redundant when using fadeIn() or Show()
           setting to block makes the display instant instead of fading in */
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 100;
        background-color: rgba(0,0,0,.4);
    }

        .popUp-container.popUp-active .popUp {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 101;
            background-color: rgb(55,55,59); /* matches darkmode checklist */
            color: rgb(195,195,190);
            padding: 15px;
            margin: 15px auto;
            border-radius: 5px;
            max-width: 400px;
            font-family: Roboto, Arial;
        }

            .popUp-container.popUp-active .popUp h4 {
                font-weight: bold;
            }


            .popUp-container.popUp-active .popUp .myFormsRow {
                flex-flow: column;
            }

            .popUp-container.popUp-active .popUp .myFormsRow .formLabel {
                padding-left: 3px;
                font-weight: bold;
                justify-content: flex-start;
                padding: 5px 0;
                max-width: none;
           }
            
            .popUp-container.popUp-active .popUp .myFormsRow .formInput {
                align-self: flex-start;
                width: 100%;
            }

@media (max-width:430px) {
    .popUp-container.popUp-active .popUp {
        margin: 15px;
    }
}

/* *******************  END POPUP CONTAINERS ************************ */