body {
    font-family: Roboto, Verdana;
    font-family: $font-family-base;
    line-height: 1.4;
    background: $body-bg;
    color: $body-color;

    @media (min-width: 576px) {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


a {
    @include link;
}


b {
    font-weight: bold;
}


/********************
 * Layout structure *
 ********************/

$main-max-width: 700px;

$divider-size: 2px;

.wrapper {
    max-width: $main-max-width;
    margin: 0 auto;

    background: $white;
    box-shadow: 0 0 10px $gray-lighter;

}

@media (min-height: 400px) and (min-width: 576px) {
    html, body {
        height: 100%;
    }
}

@media (min-height: 500px) and (min-width: 576px) {
    .wrapper {
        position: relative;
        top: -5%;
    }
}

.content-wrapper {
    display: flex;
    flex-flow: row wrap;
    align-items: center;

    /* Blocks */

    & > section {
        flex: 1 100%;
        padding: 15px;
    }

    @media (min-width: 576px) {
        & > section {
            flex: 1 1 auto;
            width: 350px - $divider-size / 2;
        }
    }

    /* Divider */

    & > .divider {
        display: none;

        &::before {
            display: block;
            content: " ";
            background: $gray-lighter;

            height: $divider-size;
            width: $divider-size;
        }

        @media (max-width: 575px) {
            & {
                flex: 100%;
                padding: 0 15px;
            }

            &::before { width: 100%; }
        }

        @media (min-width: 576px) {
            & {
                align-self: stretch;
                padding: 15px 0;
            }

            &::before { height: 100%; }
        }
    }

    & > section + .divider {
        display: block;
    }
}


/**********
 * Header *
 **********/

$header-bg: darken($red, 10%);
$header-history-icon-size: 20px;

header {
    @include clearfix;

    display: flex;
    align-items: stretch;

    min-height: 55px;

    background: $header-bg;
    color: $white;

    font-size: 20px;
    font-weight: bold;

    .history-back {
        @include transition;

        width: 55px;
        cursor: pointer;

        background: transparent;

        color: $white;
        font-size: $header-history-icon-size;

        @include hover-focus {
            background: lighten($header-bg, 5%);
        }

    }

    a {
        color: $white !important;

        @include hover-focus {
            background: lighten($header-bg, 5%);
            text-decoration: none;
        }
    }

    .right {
        border-left: 1px solid lighten($header-bg, 15%);
        display: flex;
        flex-flow: column;
        align-items: stretch;
        justify-content: space-around;

        font-size: 14px;

        text-align: center;

        & > * {
            flex: 0 0 auto;
            line-height: 28px;
        }

        & > * > * {
            display: inline-block;
            height: 100%;
            width: 100%;
            padding: 0 15px;
        }

        & #connect-status {
            font-weight: normal;

            .fa {
                margin-right: 10px;
            }
        }
    }

    h1 {
        flex: 1 0 auto;

        padding: 15px 35px;
        line-height: 25px;
    }

}


/************
 * Messages *
 ************/

.messages-container {
    padding: 0 15px;

    &::after {
        display: block;
        content: "";
        background-color: $gray-lighter;
        height: 2px;
    }
}

.messages-list {
    padding: 10px 0;
}

@mixin message-lvl($cls-level, $bg-color-base) {
    &.#{$cls-level} {
        color: darken($bg-color-base, 15%);
    }
}

.message {

    padding: 5px;
    font-size: 14px;

    color: $gray-dark;

    @include message-lvl('info', $brand-info);
    @include message-lvl('success', $brand-success);
    @include message-lvl('warning', $brand-warning);
    @include message-lvl('error', $brand-danger);
}


/***********
 * Content *
 ***********/

section {
    & > * + * {
        margin-top: 15px;
    }
}


/* Methods list */

$space-between: 15px;

.method-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: - $space-between / 2;
}

.method-wrapper {
    flex: 1 50%;
    padding: $space-between / 2;

    a {
        @include btn;
        @include btn-primary-hov;
        display: block;
    }
}

/* Connected accounts list */

.provider-list {

    & > li {

        &:not(:first-child) {
            margin-top: 5px;
        }

        & > .heading {
            @include clearfix;

            height: 45px;
            width: 100%;

            background-color: $gray-lighter;

            & > * {
                float: left;
                height: 100%;
            }

            & > .connect, & > .brand-icon {
                text-align: center;
            }

            & > .connect a {
                @include transition;

                display: inline-block;

                background-color: $brand-success;
                color: $white;

                height: 100%;
                line-height: 100%;
                width: 45px;

                padding: 12px;

                font-size: 20px;
                text-align: center;

                @include hover-focus {
                    background-color: darken($brand-success, 5%);
                    text-decoration: none;
                }
            }

            & > .brand-icon {
                padding: 10px;
                width: 45px;
                color: $brand-primary;
            }

            & > .name {
                padding: 10px;
                font-weight: bold;
            }
        }

        & > .connected-list {

            padding: 0 15px;

            & > li {
                @include clearfix;

                height: 30px;

                & > * {
                    float: left;
                    display: block;
                    height: 100%;
                }

                & > .connected-delete [type=submit] {
                    background-color: $red;
                    color: $white;
                    min-height: 30px;
                    width: 30px;

                    @include hover-focus {
                        background-color: darken($red, 5%);
                    }
                }

                & > .connected-label {
                    padding: 7px 15px;
                    width: calc(100% - 30px);
                    border-bottom: 1px solid $red;

                    font-size: 12px;

                    .fa {
                        margin-right: 5px;
                    }
                }
            }
        }
    }
    form {
        display: inline-block;
    }
}

/* E-mail adresses list */

.emailaddress-list {

    .emailaddress {

        border-bottom: 1px dotted $gray;

        .summary {
            @include clearfix;

            height: 45px;

            & > * {
                float: left;
                height: 100%;
                padding: 12px;
            }

            & > .primary, & > .verified-status {
                float: right;
                width: 45px;
                line-height: 100%;
                text-align: center;
                font-size: 20px;
            }

            & > .email {
                padding: 12px;
                font-weight: bold;
            }

            & > .primary {
                color: darken($brand-primary, 15%);
            }

            & > .verified {
                color: $brand-success;
            }

            & > .unverified {
                color: $brand-warning;
            }
        }

        .actions {
            @include clearfix;

            margin-bottom: 10px;

            & > * {
                float: right;
                margin-right: 10px;
                font-size: 12px;
            }

        }

    }

}

.actions {
    @include clearfix;

    margin-bottom: 10px;

    & > * {
        float: right;
        margin-right: 10px;
        font-size: 12px;
    }

}


/*********
 * Forms *
 *********/

$input-space-after:         10px;
$input-wrapper-padding:     0;


$input-border-color:        rgba(0,0,0,0.12);
$input-border-width:        1px;
$input-border-width-lg:     2px;
$input-padding:             2px;
$input-font-size:           16px;
$input-height:              30px;

$label-small-scale: 0.75;

$input-height-inner: $input-height - 2 * $input-padding;

$label-height: $input-height-inner;
$label-small-top: $label-height * (1 - $label-small-scale);
$label-top: $label-height + $input-wrapper-padding + $input-padding;

.input-wrapper {
    @include clearfix;

    position: relative;
    display: block;
    margin: ($label-small-scale * $label-height) 0;
    padding: $input-wrapper-padding;

    label {
        @include ellipsis;

        padding-left: $input-wrapper-padding;

        width: 100%;
        max-width: 100%;

        height: $label-height;
        line-height: $label-height;

        color: rgba(0,0,0,0.38);
        font-size: $input-font-size;
    }

    &:not(.input-skip) label {
        position: absolute;
        bottom: 100%;
        left: 0;

        pointer-events: none;

        transform: translate3d(0,$label-height + $input-padding,0) scale(1);
        transition: transform .4s cubic-bezier(.25,.8,.25,1);
        transform-origin: left top;
    }

    input.field:not([type=checkbox]) {
        height: $input-height;
        width: 100%;

        padding: $input-padding $input-padding ($input-padding - $input-border-width);

        background-color: $white;
        line-height: $input-height-inner;

        border-bottom: $input-border-width solid $input-border-color;

        font-size: $input-font-size;
    }

    input[type="checkbox"] {
        vertical-align: sub;
        width: 20px;
        height: 20px;
    }

    @mixin input-special($type, $color: $input-border-color) {
        &.input-#{$type} {
            color: $color;
        }

        &.input-#{$type} input.field {
            padding-bottom: $input-padding - $input-border-width-lg;
            border-width: $input-border-width-lg;
            border-color: $color;
        }
    }

    &:not(.input-skip) {

        &.input-focused label,
        &.input-has-value label {
            transform: translate3d(0,$label-small-top,0) scale($label-small-scale);
        }

        &.input-focused label {
            color: inherit;
        }
    }

    @include input-special('has-value', $green);
    @include input-special('error', $red);
    @include input-special('focused', $blue);

    .infos-spacer {
        float: right;
        min-height: $input-space-after;
        min-width: 1px;
    }

    .messages {

        & > * {
            padding-top: 5px;
            font-size: 12px;
        }
    }

}

[type=submit]:not(.link) {
    @include btn;
    @include btn-success-hov;
    float: right;
}

[type=submit].link {
    @include link;
    background: transparent;
    padding: 0;

    @include hover-focus {
        cursor: pointer;
    }
}

.form-inline {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;

    .input-list {
    }

    [type=submit] {
        font-size: 14px;
    }
}

.btn {
    @include btn;
    display: block;
}

.btn-primary-hov {
    @include btn-primary-hov;
}