/*  GENERAL
===========*/
body.wpoa-lightbox-visible {
    overflow: hidden;
}

#wpoa-lightbox {
    display: none;
    position: fixed;
    z-index: 99999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    overflow: scroll;
    padding: 10% 20%;
    box-sizing: border-box;
}

#wpoa-login-form-design-form {
    display: none;
}

#wpoa-result {
    display: none;
}

.wpoa-login-message {
    text-align: center;
    left: 0;
    right: 0;
    top: 5px;
    position: absolute;
    font-size: 1em;
    z-index: 999999;
}

.wpoa-login-message span {
    padding: 4px 6px;
    background: #fff;
    color: #000;
    border-radius: 5px;
    display: inline-block;
}

/*  SETTINGS PAGE
=================*/
#wpoa-measurements {
    margin-bottom: 5px;
}

.wpoa-measurement {
    background: #ccc;
    border-radius: 5px;
}

.wpoa-measurement-label {
    margin-top: 1em;
    margin-bottom: 0.25em;
}

.wpoa-measurement-rating {
    padding: 3px;
    background: #2EA2CC;
    border-radius: 5px;
    -webkit-transition: all 1s ease;
}

#wpoa_login_redirect_page {
    display: none;
}

#wpoa_logout_redirect_page {
    display: none;
}

#wpoa-settings-meta {
    float: right;
    text-align: right;
    color: #999;
    padding-top: 9px;
    display: -webkit-box
}

#wpoa-settings-meta ul {
    display: inline;
    margin-left: 0;
}

#wpoa-settings-meta li {
    display: inline;
    margin-left: 0.5em;
}

#wpoa-rate-5stars {}

#wpoa-rate-5stars:hover {}

#wpoa-logo {
    margin-left: 0.5em;
    margin-bottom: 0.5em;
    width: 64px;
    height: 64px;
    float: right;
    background-image: url(http://ps.w.org/wp-oauth/assets/icon-128x128.png);
}

#wpoa-logo:hover {
    background-image: url(http://ps.w.org/wp-oauth/assets/thepb.jpg);
}

#wpoa-settings-col1 {
    width: 68%;
    float: left;
}

#wpoa-settings-col2 {
    width: 30%;
    float: right;
}

#wpoa-settings-header {
    margin-top: 1em;
}

#wpoa-settings-header nav ul {
    display: inline;
    margin-left: 0;
}

#wpoa-settings-header nav li {
    display: inline;
    margin-bottom: -1px;
}

#wpoa-settings-header nav li:after {
    content: ' | ';
}

#wpoa-settings-header nav li:first-child {
    margin-top: 0.5em;
}

#wpoa-settings-header nav li:last-child:after {
    content: none;
}

#wpoa-settings-header .nav-splitter {
    display: inline;
    margin-left: 1em;
}

@media all and (max-width:720px) {
    #wpoa-settings-header nav {
        margin-top: 0.5em;
    }

    #wpoa-settings-header nav ul {
        display: block;
        margin-top: 0;
        border: 0 solid rgba(0, 0, 0, 0.1);
        border-width: 0 0 1px 1px;
    }

    #wpoa-settings-header nav li {
        display: block;
        text-align: center;
        border: 0 solid rgba(0, 0, 0, 0.1);
        border-width: 1px 1px 0 0;
        box-sizing: border-box;
    }

    #wpoa-settings-header nav li:after {
        content: none;
    }

    #wpoa-settings-header nav a {
        display: block;
        text-align: center;
        padding: 0.25em;
        text-decoration: none;
    }

    #wpoa-settings-header nav li:hover {
        background: rgba(0, 0, 0, 0.05);
    }

    #wpoa-settings-header .nav-splitter {
        display: none;
    }

    #wpoa-settings-col1 {
        width: auto;
        float: none;
    }

    #wpoa-settings-col2 {
        width: auto;
        float: none;
    }
}

#wpoa-plugin-info {
    margin-bottom: 1em;
    background-color: #fff9d8;
    padding-left: 1em;
    padding-right: 1em;
    border-radius: 1em;
    border: 1px solid #e7dca4;
}

#wpoa-plugin-info nav {
    margin-top: 0.5em;
    margin-bottom: 0.25em;
}

#wpoa-plugin-info nav+nav {
    margin-top: 0.25em;
    margin-bottom: 0.5em;
}

#wpoa-plugin-info #paypal-button {
    display: inline-block;
    vertical-align: middle;
}

#wpoa-plugin-info #paypal-button input {
    padding: 0;
}

#wpoa-paypal-button {
    float: right;
}

.wpoa-settings-section {
    background-color: #fff;
    margin-bottom: 1.5em;
    border: 1px solid #ddd;
}

#wpoa-settings-intro {
    border-radius: 15px;
    text-align: center;
}

#wpoa-settings-intro nav {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

#wpoa-settings-intro nav+nav {
    padding-top: 0.5em;
    margin-bottom: 0.5em;
    border-top: 1px solid #eee;
}

.wpoa-settings div {
    box-sizing: border-box;
}

.wpoa-settings .submit {
    padding: 0;
}

.wpoa-settings .form-table {
    margin-top: 0;
}

.wpoa-settings .form-padding {
    padding: 0 1em 1em 1em;
    position: relative;
    z-index: 1;
}

.wpoa-settings ul {
    list-style: inherit;
    margin-left: 2em;
}

.wpoa-settings h3 {
    margin: 0;
    cursor: pointer;
    color: #999;
    padding: 0.5em;
    font-style: italic;
    text-transform: uppercase;
    border-bottom: 1px solid #eee;
    font-size: 1.5em;
    -webkit-transition: all 0.5s ease;
}

.wpoa-settings h3:hover {
    color: #000;
}

.wpoa-settings h4 {
    margin: 0;
    color: #999;
    font-size: 1.1em;
    font-style: italic;
    text-transform: uppercase;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.wpoa-settings hr {
    border: 0;
    margin-bottom: 1em;
}

.wpoa-settings input[type=text],
.wpoa-settings input[type=checkbox],
.wpoa-settings input[type=radio],
.wpoa-settings select,
.wpoa-settings textarea {
    margin: 0;
}

.wpoa-settings select {
    min-width: 150px;
}

.wpoa-settings .tip-button {
    text-decoration: none;
    opacity: 0;
    transition: all 0.5s ease;
}

.wpoa-settings tr:hover .tip-button {
    opacity: 1;
}

.wpoa-settings .has-tip:hover .tip-button {
    opacity: 1;
}

.wpoa-settings .form-table td {
    vertical-align: top;
}

.wpoa-settings .form-table th {
    padding-top: 1em;
    padding-bottom: 0.25em;
}

.wpoa-settings .form-table th .heading {}

.wpoa-settings .form-table td {
    padding-top: 1em;
    padding-bottom: 0.25em;
}

.wpoa-settings .tip-message {
    display: none;
    font-size: 0.8em;
    color: #aaa;
    border-radius: 3px;
}

.wpoa-settings .tip-message.tip-warning {
    padding: 1em;
    background: #fffd6c;
    color: #000;
}

.wpoa-settings .tip-message.tip-info {
    padding: 1em;
    background: #ddeeff;
    color: #000;
}

.wpoa-settings .validation-warning {
    font-size: 0.8em;
    padding: 1em;
    background: #ff0000;
    color: #fff;
}

/* inspired by a css-tricks article: */
#wpoa-heart {
    position: absolute;
    left: 0;
    margin-left: 50%;
    -webkit-transform: translate(-50%, -50%);
    width: 100px;
    height: 90px;
    top: 40%;
    opacity: 0;
    -webkit-transition: all 5s ease;
    z-index: -1;
}

#wpoa-heart:before,
#wpoa-heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

#wpoa-heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

/*  LOGIN FORM STYLES
=====================*/
#wpoa-title {
    font-size: 1em;
    margin-bottom: 0.5em;
}

.wpoa-login-form {
    margin-bottom: 1em;
}

.wpoa-login-button {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

.wpoa-login-button:focus {
    outline: 0;
    background-color: #ddd;
}

.wpoa-logout-button:focus {
    outline: 0;
    background-color: #ddd;
}

.wpoa-login-button .icon {
    vertical-align: middle;
    margin-left: 0.25em;
    margin-right: 0.25em;
    height: 32px;
}

/* title / button alignment */
.wpoa-layout-align-left {}

.wpoa-layout-align-left #wpoa-title {
    text-align: left;
}

.wpoa-layout-align-left nav {
    text-align: left;
}

.wpoa-layout-align-center {}

.wpoa-layout-align-center #wpoa-title {
    text-align: center;
}

.wpoa-layout-align-center nav {
    text-align: center;
}

.wpoa-layout-align-right {}

.wpoa-layout-align-right #wpoa-title {
    text-align: right;
}

.wpoa-layout-align-right nav {
    text-align: right;
}

/* links-row layout */
.wpoa-layout-links-row {}

.wpoa-layout-links-row a {
    display: inline;
    margin-right: 0.5em;
}

/* links-column layout */
.wpoa-layout-links-column {}

.wpoa-layout-links-column a {
    display: inline;
    margin-bottom: 1px;
}

.wpoa-layout-links-column a:after {
    content: "\A";
    white-space: pre;
}

/* insert a break to convert the row into a column */

/* buttons-row layout */
.wpoa-layout-buttons-row {}

.wpoa-layout-buttons-row a {
    border: 2px solid transparent;
    box-sizing: border-box;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    font-size: 1em;
    padding: 10px;
    background: #1e8cbe;
    color: #fff;
    margin-bottom: 1px;
    margin-right: 1px;
    -webkit-transition: all 0.5s ease;
    cursor: pointer;
}

.wpoa-layout-buttons-row a:hover {
    background: #c5c5c5;
}

.wpoa-layout-buttons-row a.loading {
    background: transparent !important;
    color: #999;
    cursor: default;
    border: 2px solid #000;
}

.wpoa-layout-buttons-row a.loading-other {
    background: rgba(255, 255, 255, 0) !important;
    color: #999;
    cursor: default;
}

/* buttons-column layout */
.wpoa-layout-buttons-column {}

.wpoa-layout-buttons-column a {
    border: 2px solid transparent;
    box-sizing: border-box;
    display: block;
    text-decoration: none;
    text-align: center;
    font-size: 1em;
    padding: 10px;
    background: #c9312c;
    color: #fff;
    margin-bottom: 1px;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    cursor: pointer;
}

.wpoa-layout-buttons-column a:hover {
    opacity: 0.8;
}

.wpoa-layout-buttons-column a:hover .icon {}

.wpoa-layout-buttons-column a.loading {
    background: transparent !important;
    color: #999;
    cursor: default;
    border: 2px solid #000;
}

.wpoa-layout-buttons-column a.loading-other {
    background: rgba(255, 255, 255, 0) !important;
    color: #999;
    cursor: default;
}

/*  LINK-UNLINK PROVIDERS FORM STYLES
=====================================*/
.wpoa-linked-accounts {
    font-weight: bold;
}