/*
|   =========================================================
|   InvoicePlane
|   Sass Stylesheet
|   for welcome screen and setup process
|   =========================================================
*/


/*
|   =========================================================
|   Import Bootstrap and other assets
|   =========================================================
*/
   
// Bootstrap
@import "bootstrap/bootstrap-welcome";

// Font: Font-Awesome
@import "fonts/font-awesome/font-awesome";

// Import Noto Font
@import "fonts/source-sans-pro";

// Import Select2
@import "includes/select2/select2";


/*
|   =========================================================
|   Setup styles
|   =========================================================
*/



body {
    background-color: #fff;
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
}

img {
    vertical-align: middle;
}

a:hover, a:active, a:focus {
    outline: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

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

.container {
    max-width: 750px;
}

#content {
    @extend .panel;
    @extend .panel-body;
    @extend .panel-default;
    margin-top: 50px;
}

#logo {
    margin: 20px auto;
    display: block;
    width: 200px;
    height: 100px;
    background: url('/assets/default/img/logo_200x100.png') center center no-repeat;

    span {
        display: none;
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    #logo {
        background: url('/assets/default/img/logo_400x200.png') center center no-repeat;
        background-size: 200px 100px;
    }
}

.install-panel {
    @extend .panel;
    @extend .panel-default;
    @extend .panel-body;
    margin-top: 30px;

    h2 {
        @extend legend;
    }

    ul {
        list-style: none;
    }

    .btn {
        margin-top: 15px;
    }

    .alert {
        margin-left: 0;
        margin-right: 0;
    }

    .label {
        width: auto;
    }

}

.btn {
    padding-left: 20px;
    padding-right: 20px;
}

.optional {
    float: right;
    font-size: small;
    color: #888;
}