/***************************
****************************
Layout
****************************
***************************/

body {
    height: 100%;
    background: #1b1c1d;
}

    body.alternative {
        background-color: #f8f8f9 !important;
    }

.validation-summary-errors {
    text-align: left
}

.align-left {
    text-align: left !important;
}

.align-right {
    text-align: right !important;
}

.align-center {
    text-align: center !important;
}

.display-none {
    display: none
}

#page-wrap {
    padding-bottom: 10px;
    padding-bottom: 250px; /* Height of the footer */
}

#container {
    min-height: 100%;
    position: relative;
}

.grey-bg {
    background-color: #F2F2F3
}

.navy-blue {
    color: #212a41 !important;
}

.navy-blue-dark-bg {
    background-color: #1B2329;
}

#container {
    min-height: 100%;
    position: relative;
}

.hidden.menu {
    display: none;
}

/***************************
****************************
Demo styles
****************************
***************************/

.demo-top-header {
    background-color: #fff !important;
    border-bottom: 1px solid rgba(34,36,38,.15);
}

.demo.segment {
    min-height: 700px;
    padding: 1em 0em;
    background-image: url('../images/700x700px_mobile.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.demo h2.ui.header {
    margin-top: 0.5em;
    margin-bottom: 1.5em;
    font-size: 1.5em;
    font-weight: normal;
    background-color: rgba(31, 85, 165, 0.8);
    box-shadow: 6px 0 0 rgba(31,85,165,0.8), -6px 0 0 rgba(31,85,165,0.8);
    padding: 1em;
}

.demo .ui.cards > .card {
    width: 320px;
}

    .demo .ui.cards > .card .content .header {
        margin-top: .5em;
    }

    .demo .ui.cards > .card .content {
        text-align: left;
        padding: 1.5em;
    }

.demo .card > .attached {
    min-height: 60px;
    font-size: 1.2em;
    padding-top: 1em;
}

.demo-details.segment {
    min-height: 700px;
    padding: 1em 0em;
    background-image: url('../images/bg2.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.demo-details .main-header {
    background-color: rgb(145, 4, 47);
    margin-top: 1em;
    margin-bottom: 0em;
    padding: 0.5em;
}

    .demo-details .main-header > h2 {
        font-size: 1.5em;
        font-weight: normal;
        opacity: 1;
        padding: 0.5em;
        color: #f8f8f9 !important;
    }

.demo-details .ui.cards {
    margin-top: 2em;
}

    .demo-details .ui.cards > .card {
        width: 500px;
        margin-bottom: 4em;
    }

        .demo-details .ui.cards > .card .list > .item {
            margin: 5px
        }

.demo-details .card-header {
    background-color: #f9fafb !important;
    padding: 0.5em 1em 0 2em !important;
}

.demo-details .ui.cards > .card .fullname.header {
    text-align: left;
    margin-top: 25px;
}

.demo-details .card-details .meta {
    padding: 0.5em 1.5em;
}

.demo-details .card .meta {
    text-align: left;
}

.demo-details .card .description {
    text-align: left;
    font-style: italic;
    color: #767676 !important;
}

.demo-client-logo {
    max-height: 50px !important;
    max-width: 150px !important;
    width: auto !important;
    height: auto !important;
}

.test-case-edit-btn {
    color: #ffffff
}

    .test-case-edit-btn:hover {
        color: #ffffff
    }

.session-start {
    padding: 0 !important;
}

.session-start-loader-text {
    width: 100% !important;
}

.session-header {
    margin-top: 35px !important;
    margin-bottom: 20px !important;
}

.session-start-loader {
    min-height: 100px;
    margin: 20px 20px !important;
}
/***************************
****************************
Home Page
****************************
***************************/
.home-masthead.segment {
    min-height: 700px;
    padding: 1em 0em;
    background-image: url('../images/700x700px_mobile.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.home-masthead .logo.item img {
    margin-right: 1em;
}

.home-masthead .ui.menu .ui.button {
    margin-left: 0.5em;
}

.home-masthead h2.ui.header {
    margin-top: 3em;
    margin-bottom: 0em;
    font-size: 2.5em;
    font-weight: normal;
    background-color: rgba(31, 85, 165, 0.8);
    box-shadow: 6px 0 0 rgba(31,85,165,0.8), -6px 0 0 rgba(31,85,165,0.8);
    padding: 0.5em;
}

.home-masthead h4 {
    font-weight: normal;
    margin-bottom: 2em;
    padding: 1em;
}

/***************************
****************************
Error Page
****************************
***************************/

.error.segment {
    min-height: 700px;
    padding: 1em 0em;
    background-color: #f8f8f9 !important;
    background-image: url('../images/700x700px_mobile.jpg') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

.error h2.ui.header {
    margin-top: 2em;
    margin-bottom: 0em;
    color: #f8f8f9 !important;
    font-size: 2.0em;
    font-weight: normal;
    background-color: rgba(31, 85, 165, 0.8);
    box-shadow: 6px 0 0 rgba(31,85,165,0.8), -6px 0 0 rgba(31,85,165,0.8);
    padding: 0.5em;
}

.error h4 {
    font-weight: normal;
    margin-bottom: 2em;
    padding: 1em;
}

/***************************
****************************
Other
****************************
***************************/

.ui.vertical.stripe {
    padding: 8em 0em;
}

    .ui.vertical.stripe h3 {
        font-size: 2em;
    }

    .ui.vertical.stripe .button + h3,
    .ui.vertical.stripe p + h3 {
        margin-top: 3em;
    }

    .ui.vertical.stripe .floated.image {
        clear: both;
    }

    .ui.vertical.stripe p {
        font-size: 1.33em;
    }

    .ui.vertical.stripe .horizontal.divider {
        margin: 3em 0em;
    }

.quote.stripe.segment {
    padding: 0em;
}

    .quote.stripe.segment .grid .column {
        padding-top: 5em;
        padding-bottom: 5em;
    }

.footer.segment {
    padding: 5em 0em;
}

.secondary.pointing.menu .toc.item {
    display: none;
}

@media only screen and (max-width: 700px) {
    .ui.fixed.menu {
        display: none !important;
    }

    .secondary.pointing.menu .item,
    .secondary.pointing.menu .menu {
        display: none;
    }

    .secondary.pointing.menu .toc.item {
        display: block;
    }

    .home-masthead.segment {
        min-height: 350px;
    }

    .home-masthead h2.ui.header {
        font-size: 2em;
        margin-top: 1.5em;
    }

    .home-masthead h2 {
        margin-top: 0.5em;
        font-size: 1.5em;
    }
}