/***********************************************************************************************************************************/
/***********************************************************************************************************************************/

                                                            /*IMPORTANT*/

/*To update the css for ALL users - override it in PopulateContentModel.cs > Qualifications > SectionHomePage()*/
/*Change styles.Add("/css/pages/qualifications/homepage.css?v=003"); to styles.Add("/css/pages/qualifications/homepage.css?v=004");*/

/***********************************************************************************************************************************/
/***********************************************************************************************************************************/

#main {
    margin-top: -50px !important;
}

#section-qualifications {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}

/* Accordion */
#progression-route-accordion .panel-group .panel .panel-heading > .panel-title > a {
    background-color: #C18898;
    color: #FFF !important;
    text-decoration: none;
    font-size: 22px;
    line-height: 40px;
}

#progression-route-accordion .panel-group .panel .panel-heading > .panel-title > a:hover {
    background-color: #C18898;
    color: #FFF !important;
}

#progression-route-accordion .panel-group .panel .panel-heading > .panel-title > a:hover {
    background-color: #E0BBC5 !important;
}

#progression-route-accordion .panel-group .panel.active .panel-heading > .panel-title > a, .panel-group .panel.active .panel-heading > .panel-title > a:hover {
    background-color: #C18898;
    color: #FFF !important;
}

#progression-route-accordion .panel-group .panel .panel-heading > .panel-title > a::before, .panel-group .panel .panel-heading > .panel-title > a::after {
    top: 8px;
    background: #FFF !important;
}

#progression-route-accordion .panel-body {
    margin: 0px !important;
    padding: 0px !important;
}

/* Progression route */

.usm-l2 {
    background-color: #B5718A;
    opacity: 0.9;
}

.icsk-l2 {
    background-color: #F19385;
    opacity: 0.9;
}

.elsk-l2 {
    background-color: #F8AEAD;
    opacity: 0.9;
}

.csk-l2 {
    background-color: #F19385;
    opacity: 0.9;
}

.cast-l3 {
    background-color: #e07465;
    opacity: 0.9;
}

.cst-l3 {
    background-color: #F19385;
    opacity: 0.9;
}

.lcs-l3 {
    background-color: #90AFD4;
    opacity: 0.9;
}

.tc-l4  {
    background-color: #F19385;
    opacity: 0.9;
}

.lc-l4 {
    background-color: #90AFD4;
    opacity: 0.9;
}

.pc-l5 {
    background-color: #F19385;
    opacity: 0.9;
}

.cyp-l5 {
    background-color: #F0B884;
    opacity: 0.9;
}

.cbt-l5 {
    background-color: #7ACAB5;
    opacity: 0.9;
}

.tcsu-l6 {
    background-color: #9F98BB;
    opacity: 0.9;
}

.fd-counselling {
    background-color: #B6B8BA;
    opacity: 0.9;
}

.usm-l2:hover, .icsk-l2:hover, .elsk-l2:hover, .csk-l2:hover, .cast-l3:hover, .cst-l3:hover, .lcs-l3:hover, .tc-l4:hover, .lc-l4:hover, .pc-l5:hover, .cbt-l5:hover, .tcsu-l6:hover, .fd-counselling:hover  {
    opacity: 1;
}

.level-title-space {
    margin-top: 40px;
}

#progression-route-container a {
    text-decoration: none;
}

.progression-route-boxes {
    margin-bottom: 15px;
}

.remove-padding {
    padding: 0px;
}

.funding-band {
    opacity: 0.8;
    color: #FFF;
    padding: 10px 30px 10px 25px;
    background-image: url("../../../images/common/icons/icon-funding-coins-light.png");
    background-repeat: no-repeat;
    background-size: 24px 31px;
    background-position: right 25px center;
    font-size: 18px;
}

.qual-title {
    display: block;
    min-height: 200px;
    color: #FFF;
    font-size: 18px;
    font-weight: bold;
    padding: 15px 25px 0px 25px;
}

.qual-no {
    color: #444 !important;
    font-size: 16px;
    display: block;
    padding: 0px 25px 0px 25px;
}

.qual-note {
    color: #FFF !important;
    font-size: 16px;
    display: block;
    font-style: italic;
    padding: 0px 25px 25px 25px;
}

.qual-credits {
    color: #444 !important;
    font-size: 16px;
    display: block;
    padding: 0px 25px 25px 25px;
}

.level-2-top-left {
    border-right: 6px solid #FFF;
}

.level-2-top-mid {
    border-left: 3px solid #FFF;
    border-right: 3px solid #FFF;
}

.level-2-top-right {
    border-left: 6px solid #FFF;
}

.level-2-bot-left {
    border-right: 7px solid #FFF;
}

.level-2-bot-mid {
    border-left: 3px solid #FFF;
    border-right: 3px solid #FFF;
}

.level-2-bot-right {
    border-left: 6px solid #FFF;
}

.level-3-left {
    border-right: 6px solid #FFF;
}

.level-3-mid {
    border-left: 3px solid #FFF;
    border-right: 3px solid #FFF;
}

.level-3-right {
    border-left: 6px solid #FFF;
}

.level-4-left {
    border-right: 6px solid #FFF;
}

.level-4-mid {
    width: 66%;
    height: 100%;
    background-color: #e07465;
    border-left: 3px solid #FFF;
    border-right: 6px solid #FFF;
}

.level-4-right {
    border-left: 6px solid #FFF;
    height: 100%;
    width: 33%;
}

.level-5-left {
    border-right: 6px solid #FFF;
}

.level-5-mid {
    border-left: 3px solid #FFF;
    border-right: 3px solid #FFF;
}

.level-5-right {
    border-left: 6px solid #FFF;
}

.level-6-left {
    border-right: 6px solid #FFF;
}

.level-6-mid {
    border-left: 3px solid #FFF;
    border-right: 3px solid #FFF;
}

.level-6-right {
    border-left: 6px solid #FFF;
}

.level-other-left {
    border-right: 6px solid #FFF;
}

.level-other-mid {
    border-left: 3px solid #FFF;
    border-right: 3px solid #FFF;
}

.level-other-right {
    border-left: 6px solid #FFF;
}

.level-text {
    color: #555;
}

.qualification-container-joined {
    height: 100%;
    display: inline-block;
    width: 50%;
}

.qualification-container-joined-right {
    height: 100%;
    display: inline-block;
    width: 50%;
    float: right;
}

@media (max-width: 1199px) {
    .qual-button {
        width: 75%;
    }

    .qual-title {
        font-size: 18px;
    }

    .qual-no {
        font-size: 18px;
    }

    .qual-note {
        font-size: 16px;
    }

    .qual-credits {
        font-size: 16px;
    }

    .qual-title-ou {
        font-size: 20px;
        min-height: 125px;
    }

    .qual-openu {
        font-size: 18px;
    }

    .funding-band {
        font-size: 18px;
        min-height: 110px;
    }

    strong {
        font-weight: 900 !important;
    }

    .tasterbannerwrapper {
        margin: 20px 0 !important;
        padding: 20px 20px 30px 20px !important;
        display: block !important;
        position: relative !important;
        width: 100% !important;
        border: 1px solid #ddd;
        border-radius: 10px;
    }

    .tasterbanner1 {
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        position: relative !important;
        width: 100% !important;
    }

    .exploremorebtn {
        width: 230px !important;
        height: auto;
        position: relative;
        display: block;
        margin: 0 !important;
        padding: 0 !important;
    }

}

@media (max-width: 991px) {

}

@media (max-width: 767px) {
    .qualification-container-joined {
        width: 100%;
        z-index:5;
        position:relative;
    }
    .qualification-container-joined-right {
        width: 100%;
        z-index:10;
        position:relative;
    }
    qualification-container-lc-l4 {
        width: 100%;
    }
    .level-4-mid {
        width: 100%;
    }
    .level-4-right {
        width: 100%;
    }
    .empty-box {
        min-height: 270px !important;
        max-height: 270px !important;
    }

    .progression-route-boxes a div {
        min-height: 210px !important;
        max-height: 270px !important;
    }

    .qual-title {
        min-height: 50px;
    }

    .qual-no {
        margin: auto;
    }
    
    /*LEVEL 2*/

    .level-2-top-left, .level-2-top-mid {
        margin-bottom: 8px !important;
    }

    .level-2-top-left, .level-2-top-mid, .level-2-top-right, .level-2-bot-left, .level-2-bot-mid, .level-2-bot-right {
        border:none;
    }

    /*LEVEL 3*/

    .level-3-left, .level-3-mid, .level-3-right {
        border:none;
    }

    /*LEVEL 4*/

    .level-4-left, .level-4-mid, .level-4-right {
        border:none;
    }

    .level-4-mid {
        margin-bottom: 8px !important;
    }

    /*LEVEL 5*/

    .level-5-left, .level-5-mid, .level-5-right {
        border:none;
    }

    .level-5-mid {
        margin-bottom: 8px !important;
    }

    .level-5-left {
        margin-bottom: 8px !important;
    }

    /*LEVEL 6*/

    .level-6-left, .level-6-mid, .level-6-right {
        border:none;
    }

    .level-other-left, .level-other-mid, .level-other-right {
        border:none;
    }

    .level-2-bot-left, .level-2-bot-right {
        display: none;
    }

    .level-3-left, .level-3-mid, .level-3-right {
        margin-bottom: 8px !important;
    }

    .level-4-left {
        display: none;
    }

    .level-6-left, .level-6-right {
        display: none;
    }

    .level-other-left, .level-other-right {
        display: none;
    }

    .two-column {
        width: 100%;
    }

    .qual-container {
        margin: 0px 10px 0px 10px;
    }

    a:hover {
        text-decoration: none !important;
    }
}

@media (max-width: 767px) {

    .progression-route-boxes a div {
        min-height: unset !important;
    }

}