/* CSS for the single panel template */
#panel-header {
    margin: 30px 0;
}

/* The main panel should span across the available width */
#one_content {
    width: 100%;
}

/* Center header text */
h1, h2, h3, h4, h5 {
    text-align: center;
}

/* vertically center the agree check-boxes */
#agreeText {
    padding-left: 0;
    padding-right: 0;
}

#agreeContainer {
    position: relative;
    padding-left: 0;
}

#agreeForm\:agreeCheckBox {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/* Dialog Box Related:   Center confirm dialog's title */
.ui-dialog-titlebar.ui-widget-header {
    text-align: center;
}

/* Dialog Box Related:   Hide confirm dialog's empty content section */
.ui-confirm-dialog.ui-dialog.hideContent .ui-dialog-content.ui-widget-content {
    display: none;
}

/* Style placeholder text */
input::placeholder, .ui-selectonemenu.ui-widget>label.placeholder {
    color: grey;
}

/* Command buttons fill container height and have min-height for uniformity */
button.ui-button.ui-widget {
    height: 100%;
    min-height: 44px;
}

/* No left or right padding for faces messages */
.ui-messages.ui-widget.ui-g-12 {
    padding-left: 0;
    padding-right: 0;
}

/* Sometimes the drop-down labels extend outside container */
div.ui-selectonemenu>label.ui-selectonemenu-label {
    width: auto;
}

/* Ajax Status dialog */
div#ajax-status {
    width: 50px;
    box-shadow: none;
    border: none;
    overflow: visible;
}

div#ajax-status>div.ui-dialog-content.ui-widget-content {
    background: none;
    padding: 0;
    overflow: visible;
}

/* Hide the safari password suggest dropdown (hopefully) */
/* https://stackoverflow.com/questions/38663578/how-to-hide-autofill-safari-icon-in-input-field/39885072#39885072 */
#fedform:somfprtnr_panel input::-webkit-contacts-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    position: absolute;
    right: 0;
}

/* Smaller screens */
@media only screen and (max-width: 390px) {
    #panel-header {
        margin: 0;
    }
    h1, h2, h3, h4, h5, p {
        margin: 0.5em 0;
        font-size: 1.1em;
    }
    #rc-imageselect, .g-recaptcha {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
        transform-origin: 50% 50%;
        -webkit-transform-origin: 50% 50%;
    }
}

@media only screen and (max-width: 350px) {
    h1, h2, h3, h4, h5, p {
        margin: 0.5em 0;
        font-size: 1em;
    }
    #rc-imageselect, .g-recaptcha {
        transform: scale(0.75);
        -webkit-transform: scale(0.75);
        transform-origin: 15% 50%;
        -webkit-transform-origin: 15% 50%;
    }
}