/*
  * rec.reviews
  *
  * @author    Presta-Module.com <support@presta-module.com> - https://www.presta-module.com
  * @copyright Presta-Module - https://www.presta-module.com
  * @license   see file: LICENSE.txt
  *
  *           ____     __  __
  *          |  _ \   |  \/  |
  *          | |_) |  | |\/| |
  *          |  __/   | |  | |
  *          |_|      |_|  |_|
  *
*/

$pvrColor: #209dce;
$pvrDangerColor: #f1054d;
// Onboarding
@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,400;0,700;1,400&display=swap');
#onboardingContainer {
    border-radius: 12px;
    font-family: 'Urbanist', sans-serif;
    hr {
        margin: 3rem 10rem;
        border-top: 1px solid #cecece;
    }
}

#onboardingIframe {
    border: 0;
    border-radius: 12px;
    width: 100%;
    padding: 0;
    margin: 0;
}

.psAccountsSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2rem;
    .psAccountsSectionSubmitContainer {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

.header {
    display: flex;
    justify-content: space-between;
}

.startUsing {
    color: #000;
    text-align: center;
    font-size: 1.2rem;
    margin: 2rem 0;
}

.onboardingButtonsContainer {
    display: flex;
    justify-content: space-evenly;
    a {
        padding: 1rem;
        padding: 1rem 1.5rem;
        border-radius: 0.375rem;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        color: white;
        font-size: 1.1rem;
        &:hover {
            color: white;
            text-decoration: none;
        }
        &.createAccount {
            background: $pvrColor;
        }
        &.login {
            background: #e7c316;
        }
    }
}

// Configuration page
.header {
    margin: 1rem 0;
    &>div {
        flex: 1;
    }
    .headerImageContainer {
        display: flex;
        justify-content: flex-start;
        img {
            width: 500px;
        }
    }
    .dashboardLinkContainer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        a {
            background: $pvrColor;
            color: #fff;
            &:hover {
                color: #fff;
                background: darken($color: $pvrColor, $amount: 10);
            }
        }
    }
}

#module_form {
    h2.subtitle {
        font-size: 1.2rem;
        font-weight: 600;
    }
    .btn-info {
        background-color: $pvrColor;
        border-color: darken($color: $pvrColor, $amount: 5);
        &:hover {
            background-color: darken($color: $pvrColor, $amount: 10);
            border-color: darken($color: $pvrColor, $amount: 10);
        }
    }
    .btn-danger {
        background-color: $pvrDangerColor;
        border-color: darken($color: $pvrDangerColor, $amount: 5);
        &:hover {
            background-color: darken($color: $pvrDangerColor, $amount: 10);
            border-color: darken($color: $pvrDangerColor, $amount: 10);
        }
    }
    .pvrSubmit {
        padding: 0.5rem;
        background: $pvrColor;
        border-radius: 5px;
        color: white;
        border: 1px solid darken($color: $pvrColor, $amount: 5);
        &:hover {
            background: darken($color: $pvrColor, $amount: 10);
            border-color: darken($color: $pvrColor, $amount: 10);
        }
    }
    #submitRbmDisconnect {
        margin-top: 1rem;
    }
}

#subscription.tab-pane>div.form-group>div.col-lg-12.col-lg-offset-3 {
    margin: 0;
    width: 100%;
    padding: 0;
}