// Database install, Database separation, Database join

// Class is on the same level as cms-bootstrap class
&.install-body-database {
    background-color: @color-blue-70;
}

&.install-body-separation,
&.install-body-join {
    background-color: @color-white;
}

// Wrappers
.install-block {
    text-align: center;
    padding-top: @base-unit * 9;
}

.install-panel,
.install-panel-info {
    margin: 0 auto;
    background-color: @color-gray-140;
    width: @base-unit * 39;
}

// Panel below the install box (in DB install)
.install-panel-info {
    .install-log {
        height: @base-unit * 11;
        padding: @base-unit * 0.5 @base-unit;
        margin-bottom: @base-unit;
    }
}

// Panel below the install box
.install-info-title {
    font-weight: bold;
    display: block;
    padding: @base-unit;
    color: @color-blue-70;
    text-align: left;
}

.install-panel td.Center {
    vertical-align: top;
}

// Non stadard behavior
.Safari .install-panel td.Center {
    height: @base-unit * 0.375;
}


// Header
.install-header {
    text-align: center;
    display: block;
    margin-bottom: @base-unit;
    padding-top: @base-unit;
}

// Step icons container
.header-steps {
    height: @base-unit * 6;
    background-color: @color-white;
    padding: @base-unit * 0.5 0;
    text-align: center;
}

// Step icon
.install-step-panel {
    width: @base-unit * 6;
    height: @base-unit * 6;
    display: inline-block;
    position: relative;

    i {
        position: absolute;
        left: @base-unit;
        top: @base-unit * 0.5;
        padding: 0;
        color: @color-gray-80;
    }

    .icon-style-allow {
        color: @color-green-100;
    }
}
// Selected step icon
.install-step-icon-selected {
    background-color: @color-blue-130;
}

// Step icon separator
.install-step-icon-separator {
    width: @base-unit * 4;
    height: @base-unit * 6;
    display: inline-block;
    position: relative;

    i {
        position: absolute;
        left: @base-unit * 0.5;
        top: @base-unit;
        color: @color-gray-100;
    }
}
// Step title below the icon
.install-step-title {
    position: absolute;
    bottom: @base-unit * 0.25;
    font-size: @font-size-small;
    text-align: center;
    width: 100%;
    display: block;
}

// Wizard content
.install-wizard {
    margin: auto;
    width: 100%;
    text-align: left;
    padding: 0 0 @base-unit 0;
    margin-top: @base-unit;

    .cms-icon-80 {
        padding: 0 0 0 @base-unit * 0.25;
    }

    td {
        margin: 0;
        padding: 0;
    }

    tr {
        height: @base-unit * 2;
    }

    table {
        padding: 0;
        margin: 0;
    }
}

// New site (e.g. starter site) exception
.install-wizard-new-site tr {
    height: @base-unit * 1.5;
}

// Content block of content and footer together
.install-content-block {
    >table {
        width: 100%;
    }
    // All errors
    .ErrorLabel,
    .error-label {
        color: @color-red-70;
    }
}

// Error block below the import box
.install-error {
    width: @base-unit * 39;
    display: inline-block;
    margin: 0 auto;
    box-sizing: border-box;

    .error-label {
        display: block;
        color: @color-gray-50;
        text-align: left;
        background-color: @color-red-130;
        padding: @base-unit;
    }
}

// Content without footer
.install-content {
    width: 100%;
    padding: @base-unit @base-unit;
    text-align: center;
    box-sizing: border-box;
    min-height: @base-unit * 22;
    background-color: @color-gray-140;

    .connection-string {
        display: inline-block;
        word-break: break-all;
    }

    .install-log {
        height: 180px;
    }
}

// Footer
.install-footer {
    width: 100%;
    box-sizing: border-box;
    padding: @base-unit;
    height: @base-unit * 4;
    background-color: @color-white;
    // Help
    .footer-info {
        float: left;

        a {
            color: @color-gray-70;

            &:hover {
                color: @color-blue-70;
            }
        }
    }
    // Progress bar
    .footer-activity {
        float: left;
        padding-top: @base-unit * 0.375;
    }

    .footer-info + .footer-activity {
        margin-left: @base-unit;
    }
    // Buttons
    .footer-actions {
        float: right;
    }
}

// Footer with version and support info
.install-info-footer {
    margin: @base-unit auto;
    width: @base-unit * 39;
    // CMS version text
    .cms-version {
        text-align: right;
        padding-top: @base-unit * 0.5;
        padding-right: 0;
        padding-bottom: 0;
        padding-left: 0;
        float: right;
        color: @color-white;
    }
    // Text with support link
    .cms-support {
        color: @color-white;
        text-align: left;
        float: left;
        padding-top: @base-unit * 0.5;
        padding-right: 0;
        padding-bottom: 0;
        padding-left: 0;
        // Link
        a {
            color: @link-installer-color;
        }
    }
}

// Completed
.install-completed {
    text-align: left;
}

// SQL server fields
.install-sql-name td {
    padding-top: @base-unit;
    padding-bottom: @base-unit * 0.5;
}

.install-sql-password td {
    padding-bottom: @base-unit;
    padding-top: @base-unit * 0.5;
}


// Starter site selection
.install-item-selected,
.install-item:hover {
    margin: @base-unit * 0.25;
    padding: @base-unit * 0.25;
    background: @color-blue-130;
    cursor: pointer;
}

.install-item {
    margin: @base-unit * 0.25;
    padding: @base-unit * 0.25;
    cursor: pointer;
}

.install-disabled-item {
    margin: @base-unit * 0.25;
    padding: @base-unit * 0.25;
    color: @color-gray-100 !important;
    border: 0;
    background-color: @color-white;
    cursor: default;
}


// Install progress
.install-progress {
    height: 326px;
    text-align: left;
    margin: @base-unit @base-unit 0 @base-unit;
}

// Install progress when installing database or starter site
.install-progress-database,
.install-progress-site {
    border: 0;
    overflow: auto;
    height: 270px;
    background: @color-white;
    margin-bottom: @base-unit * 0.5;
    max-width: 588px;
}

// Progress label - info message
.install-progress-label {
    text-align: left;
    margin-top: @base-unit;
    margin-left: @base-unit;
}

// Create database objects checkbox
.install-create-db-objects {
    vertical-align: top;
}

// WAG dialog label exception
td.wag-dialog-label {
    width: 80px;
    padding-right: @base-unit * 0.5;
}


// Separation and join specials
// ----------------------------

// DB Separation in resizable dialog
.database-separation,
.database-join {
    width: 100%;
    min-width: @base-unit * 36;
}

.database-separation .install-wizard,
.database-join .install-wizard {
    max-width: @base-unit * 36;
    margin: 0 auto;
}

// Setting staging task state
.task-error {
    color: @color-red-70;
    padding: 0 @base-unit * 0.25;
}
// Setting staging task state
.task-success {
    color: @color-green-100;
    padding: 0 @base-unit * 0.25;
}

.separation-azure-error {
    height: 290px;
    margin: -19px -29px 0 0;
    overflow: auto;
    padding: 30px 20px 10px;
}

.separation-header {
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
}

// Info text
.separation-finished {
    text-align: center;
    font-weight: bold;
}

// Value cell for info messages
.separation-value-cell {
    padding-top: @base-unit * 0.25;
    padding-right: @base-unit * 0.5;
}

.separation-checkbox {
    float: left;
    padding-top: @base-unit * 0.25;
    padding-left: @base-unit * 0.5;
}