.line-blue {
    background-image: url('../../../clientlibs/clientlib-common/resources/images/recommended-next/line-blue.svg') !important;
}

.line-green {
    background-image: url('../../../clientlibs/clientlib-common/resources/images/recommended-next/line-green.svg') !important;
}

.line-red {
    background-image: url('../../../clientlibs/clientlib-common/resources/images/recommended-next/line-red.svg') !important;
}

.line-purple {
    background-image: url('../../../clientlibs/clientlib-common/resources/images/recommended-next/line-purple.svg') !important;
}

.line-orange {
    background-image: url('../../../clientlibs/clientlib-common/resources/images/recommended-next/line-orange.svg') !important;
}

.line-grey {
    background-image: url('../../../clientlibs/clientlib-common/resources/images/recommended-next/line-grey.svg') !important;
}

.line-white {
    background-image: url('../../../clientlibs/clientlib-common/resources/images/recommended-next/line-white.svg') !important;
}

@media (min-width: 992px) {
    .r-next-container {
        display: flex;
        justify-content: start;
        padding-top: 70px !important;
        padding-bottom: 60px !important;
        align-items: center;
        transition: 0.3s;
        flex-wrap: nowrap;
        position: relative;
    }
    .r-title-txt {
        display: block;
    }
    .r-next-title {
        font-family: Torque-bold;
        font-size: 40px;
        line-height: 50px;
        text-align: left;
        max-width: 360px;
        text-transform: uppercase;
        margin-bottom: 10px;
        margin-right: 30px;
    }
    .r-back-link {
        background-image: url('../../../clientlibs/clientlib-common/resources/images/arrows/left-arrow-icon.svg');
        background-repeat: no-repeat;
        background-position: center left;
        padding-left: 30px;
        margin-top: -25px;
        font-family: NotoSans-Bold;
        font-size: 18px;
        line-height: 1.67;
        text-align: left;
        position: absolute;
        bottom: 40px;
        left: 30px;
        text-decoration: underline;
        text-transform: uppercase;
    }
    .r-back-link:hover {
        color: #4e4f4f;
    }
    .r-next-link {
        display: flex;
    }
    .r-main-link {
        max-width: 100%;
        background-repeat: repeat-x;
        background-position: bottom left;
        padding-bottom: 48px;
        align-items: center;
        display: flex;
        flex-grow: 1;
    }
    .r-main-link h4,
    .r-main-link h3 {
        width: 100%;
        font-family: NotoSans-Bold;
        font-size: 22px;
        line-height: 30px;
        text-align: left;
        text-transform: uppercase;
    }
    .r-sub-link {
        width: 100%;
        display: flex;
        align-items: center;
        padding-left: 31px;
        font-family: NotoSans-Bold;
        font-size: 26px;
        line-height: 36px;
        text-align: left;
        background-image: url('../../../clientlibs/clientlib-common/resources/images/recommended-next/line-grey-light.svg');
        background-repeat: repeat-x;
        background-position: bottom left;
        padding-bottom: 44px;
        margin-bottom: 2.5px;
        text-transform: uppercase;
    }
    .r-sub-link svg {
        max-width: 65px;
        margin-right: 28px;
        height: 45px;
    }
    .r-next-img {
        max-width: 161px;
    }
    .r-end-txt {
        max-width: 165px;
    }
}

@media (max-width: 991px) {
    .r-next-container {
        display: flex;
        justify-content: start;
        padding: 70px 0 !important;
        flex-wrap: wrap;
        transition: 0.3s;
    }
    .r-title-txt {
        max-width: 100%;
        display: block;
        margin-bottom: 36px;
    }
    .r-next-title {
        font-family: Torque-bold;
        font-size: 40px;
        line-height: 50px;
        text-align: left;
        max-width: 360px;
        text-transform: uppercase;
    }
    .r-back-link {
        background-image: url('../../../clientlibs/clientlib-common/resources/images/arrows/left-arrow-icon.svg');
        background-repeat: no-repeat;
        background-position: center left;
        padding-left: 30px;
        margin-top: 70px;
        font-family: NotoSans-Bold;
        font-size: 18px;
        line-height: 1.67;
        text-align: left;
        text-decoration: underline;
        text-transform: uppercase;
        margin-left: 15px;
    }
    .r-back-link:hover {
        color: #4e4f4f;
    }
    .r-next-link {
        display: flex;
    }
    .r-main-link {
        width: 100%;
        background-repeat: repeat-x;
        background-position: bottom left;
        padding-bottom: 44px;
        align-items: end;
        display: flex;
    }
    .r-main-link h4,
    .r-main-link h3 {
        max-width: 143px;
        font-family: NotoSans-Bold;
        font-size: 22px;
        line-height: 30px;
        text-align: left;
        text-transform: uppercase;
    }
    .r-sub-link {
        width: 100%;
        display: flex;
        align-items: end;
        padding-left: 33px;
        font-family: NotoSans-Bold;
        font-size: 22px;
        line-height: 30px;
        text-align: left;
        background-image: url('../../../clientlibs/clientlib-common/resources/images/recommended-next/line-grey-light.svg');
        background-repeat: repeat-x;
        background-position: bottom left;
        padding-bottom: 44px;
        margin-bottom: 2.5px;
        transition: 0.3s;
        text-transform: uppercase;
    }
    .r-sub-link svg {
        margin-right: 62px;
    }
    .r-next-img {
        max-width: 161px;
        display: none;
    }
    .r-end-txt {
        max-width: 165px;
    }
}

@media only screen and (max-width: 575px) {
    .r-next-container {
        padding: 70px 20px !important;
    }
    .r-sub-link {
        padding-left: 0;
        transition: 0.3s;
    }
    .r-sub-link svg {
        margin-right: 22px;
    }
}

@media (max-width: 767px) {
    .r-next-title {
        font-family: Torque-bold;
        font-size: 35px;
        line-height: 45px;
        text-align: left;
        max-width: 320px;
        text-transform: uppercase;
    }
    .r-main-link h4,
    .r-main-link h3 {
        max-width: 110px;
        font-family: NotoSans-Bold;
        font-size: 18px;
        text-align: left;
        text-transform: uppercase;
    }
}

@media (max-width: 370px) {
    .r-main-link h4,
    .r-main-link h3 {
        max-width: 100%;
        width: 100%;
        font-size: 16px;
    }
    .r-end-txt {
        max-width: 100%;
        font-size: 16px;
    }
    .r-sub-link svg {
        max-width: 42px;
    }
}

@media screen and (-ms-high-contrast: black-on-white) {
    .r-sub-link .white-fill {
        fill: #000;
    }
    .r-sub-link .grey-fill.dark {
        fill: #000;
    }
}

@media screen and (-ms-high-contrast: white-on-black) {
    .r-sub-link .grey-fill.dark {
        fill: #fff;
    }
}