/*
* ============================== Carousel ==============================
*/
.carousel-container {
    width: 100%;
}

.carousel-container-step-container {
    flex: 1 1 auto;
    max-width: 100%;
}

.carousel-spinner {
    flex: 1 0 auto;
}
/*
* ============================== Carousel Step ==============================
*/
.carousel-step {
    min-height: 775px;
    display: flex;
    flex-direction: column;
}

    .carousel-step .carousel-header {
        flex: 0 1 auto;
        font-size: 22px;
    }

    .carousel-step .carousel-body {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .carousel-step .carousel-footer {
        flex: 0 1 auto;
        display: flex;
        flex-direction: column;
    }

.carousel-body > form, .carousel-body > div {
    flex: 0 1 auto;
    width: 100%;
    margin-left: 10%;
    margin-right: 10%;
}

.carousel-footer .carousel-circles {
    flex: 0 0 auto;
}

.carousel-circles > i {
    margin-left: 10px;
    margin-right: 10px;
}

.carousel-footer .carouselBtns {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.carouselBtns > button {
    flex: 0 0 auto;
    margin-left: 5px;
    margin-right: 5px;
}
/*
* ============================== Carousel Content Area ==============================
*/

.carousel-content {
    display: flex;
    flex: 1 0 auto;
    flex-direction: row;
    align-items: center;
    margin-left: 10%;
    margin-right: 10%;
    padding-left: 5em;
    padding-right: 5em;
}

.carousel-slot-warning-wrap {
    /*flex: 1 0 auto; this needs to be set inline*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.carousel-content .carousel-content-text {
    font-size: 20px;
    flex: 1 1 100%;
}

/*
* ============================== Gene File Slot Confirm ==============================
*/

.gf-slot-confirm-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin-top: 2em;
    margin-bottom: 2em;
}

.gf-slot-confirm-logos {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 80%;
}

.gf-slot-confirm-content {
    width: 70%;
    text-align: center;
    font-weight: bold;
    font-size: 17px;
    margin: auto;
}

.gf-slot-confirm-item {
    flex: 0 0 auto;
}


/*
* ============================== Gene File Slot Confirm ==============================
*/
.carousel-text-xlarge {
    font-size: 24px;
}

.carousel-text-large {
    font-size: 18px;
}

.carousel-text-medium {
    font-size: 16px;
}

/*
* ============================== IE Override ==============================
*/
/*reference: https://paper-leaf.com/blog/2014/09/targeting-ie-10-11-browsers-css/*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .carousel-body > div, .carousel-body > form {
        flex: 0 1 100%;
        /*IE is going to ignore min-heigh unless you set a height,
            but then it will never grow the container beyond min-height*/
        /*height: 700px;*/ /*because IE is dumb*/
    }

    .carousel-content {
        width: 100%;
        padding-right: 10%
    }

    .carouselcontent .carousel-content-text {
        flex: 1 1 100%;
    }

    .carousel-slot-warning-wrap {
        width: 80% !important;
    }

    .gf-slot-confirm-wrapper {
        flex: 0 1 100% !important;
    }

    .carousel-step .carousel-body {
        flex-direction: row;
    }
}