.no-scroll {
    overflow: hidden;
}

img {
    width: auto;
    height: auto;
}

.common-btn {
    @include font-size(16px);
    line-height: 20px;
    font-family: $robotomedium;
    display: inline-block;
    border-radius: 10px;
    padding: $space10 $space20;
    color: $white;
    background: $primary-color;
    transition: 0.3s all ease-in-out;

    &:hover {
        background: $primary-hover;
    }
}

.dashboard {

    .profile {
        @include flex;
        margin: $space30 0 $space25;
        border: $common-border;
        border-radius: 10px;
        padding: $space10;
        align-items: flex-start;

        .user-details {
            display: flex;

            .user-image {
                border-radius: 10px;
                width: 60px;
                height: 60px;
            }

            .detail-list {
                margin-left: $space10;

                .list-item {
                    @include font-size(14px);
                    line-height: 18px;
                    color: $title-color;


                    &:nth-of-type(1) {
                        @include font-size(16px);
                        line-height: 18px;
                        margin-bottom: $space5;
                    }

                    &:nth-of-type(2) {
                        margin-bottom: 3px;
                    }

                    img {
                        margin-right: $space5;
                    }
                }
            }
        }

        .offer-msg {
            display: none;
        }

        .update-details {
            @include flex;
            flex-direction: column;
            align-items: flex-end;
            min-width: 32%;

            .circular-progress {
                position: relative;
                @include flex;
                justify-content: center;
                border-radius: 50%;
                width: 63px;
                height: 63px;
                margin-bottom: $space20;

                .inner-circle {
                    position: absolute;
                    border-radius: 50%;
                    background-color: $white;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                    width: 57px;
                    height: 57px;
                }

                .percentage {
                    @include font-size(22px);
                    position: relative;
                    line-height: 18px;
                    font-family: $robotomedium;
                    color: $title-color;
                }
            }

            .common-btn {
                @include font-size(14px);
                line-height: 16px;
                background: none;
                color: $primary-color;
                padding: 0;
                text-decoration: underline;
            }
        }
    }

    .explore-section {
        @include flex;
        margin-bottom: $space25;

        .exp-details {
            display: none;
        }

        .exp-mob {
            @include font-size(14px);
            line-height: 24px;
            color: $title-color;
            border: 1px solid $primary-color;
            border-radius: 5px;
            background: $bg-light;
            padding: $space20;
            width: 34%;
            text-align: center;

            img {
                display: block;
                margin: auto;
            }
        }
    }

    .mid-banner {
        display: none;
    }

    .details-section {
        @include flex;
        flex-direction: column-reverse;
        margin-bottom: $space50*2;

        .common-link {
            @include font-size(14px);
            line-height: 18px;
            color: $primary-color;
            text-decoration: underline;
            transition: 0.3s all ease-in-out;

            @media (hover:hover) {
                &:hover {
                    color: $primary-hover;
                }
            }
        }

        .left-wrpr {

            .small-banner {
                @include flex;
                flex-direction: column;
                background: #9B0101;
                border-radius: 10px;
                padding: $space10;
                margin-bottom: $space15;

                .b-content {
                    text-align: center;

                    .head {
                        @include font-size(18px);
                        line-height: 20px;
                        font-family: $robotomedium;
                    }

                    .head,
                    .subhead {
                        display: block;
                        color: $white;
                    }

                    .common-link {
                        color: $white;
                        margin-bottom: $space15;
                    }

                    .subhead {
                        margin: $space10 0 3px;
                        @include font-size(14px);
                        line-height: 18px;
                    }
                }

                .list-type {
                    display: block;
                    white-space: nowrap;
                    overflow: auto;
                    margin-right: - $space10;
                    margin-bottom: $space15;

                    .list-item {
                        display: inline-block;
                        white-space: normal;
                        margin-right: $space10;

                        img {
                            background: $white;
                            border-radius: 5px;
                            display: block;
                        }

                        &:nth-of-type(n+3) {
                            margin-top: $space10+1;
                        }
                    }

                    &::-webkit-scrollbar {
                        display: none;
                    }
                }
            }

            .events-section {
                display: block;
                box-shadow: 0px 0px 6px 0px #00000024;
                border-radius: 10px;

                .event-head {
                    @include flex;
                    padding: $space10;
                    border-bottom: $common-border;

                    .title {
                        @include font-size(15px);
                        line-height: 16px;
                        color: $title-color;

                        svg {
                            vertical-align: text-top;
                            margin-right: $space5+3;
                        }
                    }

                }

                .list-type {
                    padding: $space10;

                    .list-item {
                        border: $common-border;
                        border-radius: 10px;
                        margin-bottom: $space10+3;
                        padding: $space10 $space15;

                        &:nth-last-of-type(1) {
                            margin-bottom: 0;
                        }

                        .e-head {
                            @include font-size(14px);
                            line-height: 16px;
                            color: $title-color;
                            margin-bottom: $space10;
                            -webkit-line-clamp: 2;
                            text-overflow: ellipsis;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                            display: -webkit-box;
                        }

                        .e-time {
                            @include font-size(13px);
                            line-height: 14px;
                            color: $subtitle-color;
                            display: block;

                            &:nth-of-type(2) {
                                margin-bottom: $space5;
                            }
                        }

                        .btn-row {
                            margin-top: $space15;
                            text-align: right;
                        }
                    }


                    &::-webkit-scrollbar {
                        width: 2px;
                    }

                    &::-webkit-scrollbar-track {
                        background: $white;
                    }
                }

            }
        }

        .right-wrpr {
            border: $common-border;
            border-radius: 10px;
            margin-bottom: $space25;
            width: 100%;

            .top-head {
                border-bottom: $common-border;

                .common-link {
                    display: none;
                }
            }

            .m-bottom {
                background: $bg-light;
                padding: $space5+5;
                text-align: center;
                border-radius: 0 0 10px 10px;

                .m-link {
                    font-family: $robotomedium;
                }
            }

            .panels {
                padding: $space15 $space15 0;

                .tab-panel {
                    display: none;

                    &:nth-of-type(1) {
                        display: block;
                    }
                }

                .content {

                    .panel-head {
                        display: none;
                    }

                    .m-panel-head {
                        @include flex;
                        margin-bottom: $space15;

                        .head {
                            @include font-size(13px);
                            line-height: 16px;
                            color: $subtitle-color;

                            img {
                                margin-right: $space5;
                                vertical-align: sub;
                            }
                        }

                        .view-all-link {
                            @include font-size(14px);
                            line-height: 16px;
                            font-family: $robotomedium;
                            text-decoration: underline;
                            color: $appicon;
                        }
                    }

                    .app-list {
                        .single-application {
                            margin-bottom: $space20;
                            background: $bg-light;
                            border-radius: 5px;

                            &:nth-of-type(2) {
                                margin-bottom: $space15;
                            }

                            .app-top {
                                @include flex;
                                align-items: flex-start;
                                flex-wrap: wrap;
                                padding: $space15 $space10;
                                border-bottom: none;

                                .left {
                                    @include flex;
                                    justify-content: unset;

                                    &>img {
                                        border-radius: 10px;
                                    }

                                    .detail {
                                        margin-left: $space10;

                                        span {
                                            display: block;
                                            margin-bottom: $space5;

                                            &:nth-last-of-type(1) {
                                                margin-bottom: 0;
                                            }
                                        }

                                        .uni-name {
                                            @include font-size(15px);
                                            line-height: 18px;
                                            color: $title-color;
                                            font-family: $robotomedium;
                                        }

                                        .course-name,
                                        .date {
                                            @include font-size(14px);
                                            line-height: 16px;
                                            color: $subtitle-color;
                                        }

                                        .date {
                                            display: none;

                                            img {
                                                vertical-align: text-top;
                                                margin-right: $space5+2;
                                            }
                                        }
                                    }
                                }

                                .right {
                                    position: relative;

                                    .dots {
                                        display: inline-block;
                                        cursor: pointer;

                                        @media(hover:hover) {
                                            &:hover {
                                                opacity: 0.8;
                                            }
                                        }
                                    }

                                    .apply-btn {
                                        @include font-size(15px);
                                        line-height: 18px;
                                        background: $white;
                                        color: $appicon;
                                        border: 1px solid $appicon;
                                        border-radius: 10px;
                                        padding: $space10 $space15;
                                        display: inline-block;
                                        transition: 0.3s all ease-in-out;
                                        margin-right: $space10;

                                        svg {
                                            vertical-align: text-top;
                                            margin-right: $space5;

                                            path {
                                                transition: 0.3s all ease-in-out;
                                            }
                                        }

                                        @media (hover:hover) {
                                            &:hover {
                                                background: $appicon;
                                                color: $white;

                                                svg {
                                                    path {
                                                        fill: $white;
                                                    }
                                                }
                                            }
                                        }

                                        &.d-btn {
                                            display: none;
                                        }

                                    }


                                    .dots-box {
                                        position: fixed;
                                        left: 0;
                                        right: 0;
                                        bottom: -28%;
                                        background: $white;
                                        border-radius: 10px 10px 0 0;
                                        z-index: 2;

                                        .user-link {
                                            padding-bottom: $space10;
                                            border-bottom: $common-border;
                                            display: block;

                                            &:nth-of-type(2) {
                                                padding: $space10 0;
                                            }

                                            &:nth-last-of-type(1) {
                                                padding: $space10 0 0;
                                                border-bottom: none;
                                                color: $primary-color;
                                            }

                                            svg {
                                                margin-right: $space10;
                                            }
                                        }

                                        .head {
                                            background: $bg-light;
                                            border-radius: 10px 10px 0 0;
                                            padding: $space15 $space20;
                                            @include font-size(18px);
                                            line-height: 22px;
                                            font-family: $robotomedium;
                                            color: $title-color;
                                            box-shadow: 0px 4px 7px 0px #0000001A;

                                            svg {
                                                vertical-align: middle;
                                                margin-right: $space10;
                                            }
                                        }

                                        .action-list {
                                            padding: $space20 $space25;
                                        }
                                    }
                                }

                                .m-btns {
                                    width: 100%;
                                    @include flex;
                                    margin-top: $space15;

                                    .apply-btn {
                                        color: $primary-color;
                                        border-color: $primary-color;
                                    }

                                    .elg-btn {
                                        color: $title-color;
                                        border-color: $title-color ;
                                    }

                                    .apply-btn,
                                    .elg-btn {
                                        @include font-size(13px);
                                        line-height: 16px;
                                        border: 1px solid;
                                        border-radius: 5px;
                                        background: $white;
                                        padding: 8px;
                                        width: 42%;
                                        text-align: center;

                                        img {
                                            vertical-align: middle;
                                        }
                                    }
                                }
                            }

                            .app-bottom {
                                display: none;
                            }
                        }
                    }

                    .view-btn {
                        text-align: right;

                        .view-all-link {
                            @include font-size(14px);
                            line-height: 16px;
                            color: $primary-color;
                            font-family: $robotomedium;
                            text-decoration: underline;
                            transition: 0.3s all ease-in-out;

                            @media (hover:hover) {
                                &:hover {
                                    color: $primary-hover;
                                }
                            }
                        }

                        &.d-btn {
                            display: none;
                        }
                    }

                }

                .no-content {
                    text-align: center;
                    padding: $space25 0;
                    margin: 0 auto;

                    img {
                        margin-bottom: $space10;
                    }

                    .head {
                        @include font-size(14px);
                        line-height: 14px;
                        color: $title-color;
                    }

                    .subhead {
                        display: none;
                    }
                }
            }


            .app-status-list {
                display: flex;
                justify-content: space-between;

                .status-item {
                    padding: $space5+2;
                    border-right: $common-border;
                    width: 100%;

                    &:nth-of-type(1) {
                        border-radius: 10px 0 0 0;
                    }

                    &:nth-last-of-type(1) {
                        border-right: none;
                        border-radius: 0 10px 0 0;
                    }

                    .status-link {
                        @include font-size(15px);
                        line-height: 18px;
                        color: $title-color;
                    }

                    &.active {
                        background-color: $light-blue;
                    }
                }
            }
        }
    }
}

.success-msg {
    display: none;
    position: absolute;
    top: 92px;
    left: 0;
    right: 0;
    z-index: 13;
    margin: auto;
    background: #E5F5E8;
    color: $title-color;
    border: 1px solid #038942;
    border-radius: 10px;
    padding: $space10+2 $space15 $space10+2 $space40;
    @include font-size(15px);
    line-height: 20px;
    width: 73%;

    img {
        margin-right: 8px;
        position: absolute;
        top: 13px;
        left: 10px;
    }

    .close-msg {
        display: none;
    }
}

.add-app-popup,
.remove-app-popup,
.eligibility-popup {
    position: fixed;
    z-index: 13;
    background: $white;

    .top {
        @include flex;
        background: $bg-light;
        padding: $space15;
        border-radius: 10px 10px 0 0;
        box-shadow: 0px 4px 7px 0px #0000001A;
        flex-direction: row-reverse;
        justify-content: start;

        .head {
            @include font-size(18px);
            line-height: 22px;
            font-family: $robotomedium;
        }

        .close-icon {
            cursor: pointer;
            margin-right: $space10;

            path {
                transition: 0.3s all ease-in-out;
            }

            @media (hover:hover) {
                &:hover {
                    path {
                        fill: $primary-color;
                    }
                }
            }
        }

    }
}

.add-app-popup,
.eligibility-popup {
    left: -110%;
    top: 0;
    bottom: 0;
    height: 100vh;
    width: 100%;

    .top {
        .close-icon {
            path {
                fill: $primary-color;
            }
        }

        .head {
            color: $primary-color;
        }
    }
}

.remove-app-popup,
.eligibility-popup {
    .popup-body {
        .small-head {
            @include font-size(16px);
            line-height: 20px;
            color: $title-color;
        }
    }
}

.add-app-popup {
    .application-form {
        padding: $space25 $space15 $space35;

        .form-fields {
            .single-input {
                position: relative;
                transition: 0.3s all ease-in-out;
                margin-top: $space40;

                .field-label {
                    position: absolute;
                    top: 0;
                    left: 7px;
                    @include font-size(13px);
                    line-height: 16px;
                    color: $subtitle-color;
                    opacity: 0;
                    transition: 0.2s all ease-in-out;
                    width: 100%;
                }

                &.field-not-empty {
                    .field-label {
                        top: -15px;
                        opacity: 1;
                    }
                }

                .input-field {
                    width: 100%;
                    padding: $space5;
                    border-bottom: $common-border;
                    @include font-size(16px);
                    line-height: 20px;
                    color: $title-color;
                    font-family: $robotoregular;

                    &::placeholder {
                        color: $placeholder-color;
                        @include font-size(16px);
                        line-height: 20px;
                    }
                }

                .search-icon {
                    position: absolute;
                    right: 5px;
                    bottom: 8px;
                }

                .msg {
                    margin-top: $space5;
                    @include font-size(13px);
                    line-height: 16px;
                    color: $subtitle-color;

                    img {
                        margin-right: $space5;
                        vertical-align: text-top;
                    }
                }
            }

            .single-block {
                position: relative;

                &:nth-of-type(1) {
                    .single-input {
                        margin-top: $space15;
                    }
                }

                .search-list {
                    padding: $space5 0;
                    border-radius: 5px;
                    border: $common-border;
                    height: 190px;
                    overflow-y: scroll;
                    display: none;
                    position: absolute;
                    top: 35px;
                    left: 0;
                    right: 0;
                    background: #fff;
                    z-index: 1;

                    .search-item {
                        @include font-size(16px);
                        line-height: 20px;
                        color: $subtitle-color;
                        margin-bottom: $space10;
                        padding: $space5 $space10;
                        cursor: pointer;

                        &:hover {
                            background: $bg-light;
                        }

                        &:nth-last-of-type(1) {
                            margin-bottom: 0;
                        }
                    }

                    &:nth-last-of-type(1) {
                        margin-bottom: 0;
                    }

                    &.show {
                        display: block;
                    }
                }
            }

            .app-status,
            .date,
            .selected-list {
                .head {
                    @include font-size(16px);
                    line-height: 20px;
                    color: $title-color;
                    margin-bottom: $space10;
                }
            }

            .app-status {
                margin: $space25 0;

                .status-list {
                    display: flex;
                    flex-wrap: wrap;

                    .single-status {
                        position: relative;
                        margin-left: $space10;
                        margin-bottom: $space10;
                        transition: 0.3s all ease-in-out;

                        .status-name {
                            @include font-size(15px);
                            line-height: 16px;
                            border: 1px solid $subtitle-color;
                            border-radius: 5px;
                            padding: $space5+3 $space10;
                            color: $subtitle-color;
                            display: block;
                        }

                        &:nth-of-type(1),
                        &:nth-of-type(5) {
                            margin-left: 0;
                        }

                        &:nth-of-type(5) {
                            margin-bottom: 0;
                        }

                        &:hover {
                            border-color: $primary-color;
                            color: $primary-color;
                        }

                        input {
                            &:checked~.status-name {
                                border-color: $primary-color;
                                color: $primary-color;
                            }
                        }
                    }
                }
            }

            .date {
                display: none;
                margin-bottom: $space25;

                &.show {
                    @include flex;
                }

                .single-input {
                    margin-top: $space10;
                    width: 100%;
                    display: none;

                    &:first-child {
                        margin-right: $space15;
                    }

                    .head {
                        .small-text {
                            @include font-size(14px);
                            line-height: 20px;
                            color: $placeholder-color;
                        }
                    }

                    .input-field {
                        background: url("../images/calender.svg") no-repeat;
                        background-position: right 5px center;
                        cursor: pointer;

                        &::-webkit-calendar-picker-indicator {
                            display: none;
                        }
                    }
                }
            }

            .selected-list {
                padding: $space15;
                background: $bg-light;
                margin-bottom: $space60*2;
                border-radius: 10px;
                display: none;

                .head {
                    margin-bottom: $space5+2;
                }

                .selected-item {
                    border-bottom: $common-border;
                    padding: $space10 0;

                    .detail {
                        @include font-size(15px);
                        line-height: 18px;
                        color: $subtitle-color;
                    }

                    &:nth-of-type(1) {
                        padding-top: 0;
                    }

                    &:nth-last-of-type(1) {
                        border-bottom: 0;
                        padding-bottom: 0;
                    }
                }
            }
        }

        .add-btn {
            @include font-size(16px);
            line-height: 20px;
            font-family: $robotomedium;
            background: $primary-color;
            color: $white;
            border-radius: 10px;
            padding: $space15;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0 auto $space35;
            width: 94%;
        }
    }
}

.remove-app-popup {
    left: 0;
    right: 0;
    bottom: -45%;
    border-radius: 10px 10px 0 0;

    .top {
        border-radius: 10px 10px 0 0;

        .head {
            color: $title-color;
        }
    }

    .popup-body {
        text-align: center;
        padding: $space25 $space20;

        img {
            margin-bottom: $space15;
        }

        .small-head {
            padding: 0 $space20;

            .name {
                font-family: $robotomedium;
            }
        }

        .btns {
            display: flex;
            justify-content: center;
            margin-top: $space50+2;

            .btn-link {
                @include font-size(16px);
                line-height: 20px;
                color: $title-color;
                font-family: $robotomedium;
                padding: $space15;
                border-radius: 10px;

                &:nth-of-type(2) {
                    color: $white;
                    background: #E33E3E;
                    margin-left: $space20+3;
                }
            }
        }
    }
}

.eligibility-popup {

    .top {
        align-items: flex-start;

        .head {
            svg {
                display: none;
            }
        }
    }

    .popup-body {
        padding: $space25 $space15 $space35;

        .small-head {
            &:first-child {
                margin-bottom: $space15;
            }

            &:nth-of-type(2) {
                margin-bottom: $space5;
            }
        }

        .pre-req-list,
        .score-list {
            margin-bottom: $space15+3;
        }

        .pre-req-list {
            padding-left: $space10;

            .list-item {
                @include font-size(15px);
                line-height: 16px;
                color: $subtitle-color;
                margin-bottom: $space5+2;

                img {
                    margin-right: $space10;
                    vertical-align: middle;
                }
            }
        }

        .subhead,
        .score-list,
        .list-item {
            @include font-size(14px);
            line-height: 20px;
        }

        .subhead {
            color: $subtitle-color;
            margin-bottom: $space10;
            display: block;
        }

        .score-list {
            .list-item {
                display: flex;
                font-family: $robotomedium;
                margin-bottom: $space5+2;

                .score-head {
                    color: $subtitle-color;
                    width: 20%;
                }
            }
        }

        .counsellor-link {
            color: $primary-color;
            text-decoration: underline;
        }

        .common-btn {
            margin-top: $space30;
            padding: $space15;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 35px;
            width: 90%;
            margin: 0 auto;
        }
    }
}


@media screen and (min-width:393px) {
    .dashboard {
        .explore-section {
            .exp-mob {
                @include font-size(16px);
                width: 35%;
                padding: $space15 $space20;
            }
        }

        .details-section {
            .right-wrpr {
                .app-status-list {
                    .status-item {
                        padding: $space5+2 $space10+2;
                    }
                }

                .panels {
                    .content {
                        .app-list {
                            .single-application {
                                .app-top {
                                    padding: $space15;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .add-app-popup {
        .application-form {
            .form-fields {
                .app-status {
                    .status-list {
                        .single-status {
                            margin-left: $space15;
                            margin-bottom: $space15;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width:768px) {

    .dashboard {

        .profile {
            border-color: $primary-color;
            padding: $space15;
            margin: $space25 0;

            .user-details {
                .user-image {
                    width: auto;
                    height: auto;
                }

                .detail-list {
                    margin-left: $space15;

                    .list-item {
                        &:nth-of-type(1) {
                            @include font-size(20px);
                            line-height: 20px;
                        }
                    }
                }
            }

            .offer-msg {
                @include font-size(14px);
                line-height: 20px;
                color: #2DA70F;
                border: 1px solid #038942;
                background: #E5F5E8;
                border-radius: 10px;
                width: 33%;
                padding: 8px;
                display: inline-block;

                span {
                    font-family: $robotomedium;
                }
            }

            .update-details {
                flex-direction: row;
                align-items: center;
                min-width: unset;

                .circular-progress {
                    width: 50px;
                    height: 50px;
                    margin-right: $space10;
                    margin-bottom: 0;

                    .inner-circle {
                        width: 46px;
                        height: 46px;

                    }

                    .percentage {
                        @include font-size(15px);
                    }
                }

                .common-btn {
                    @include font-size(16px);
                    line-height: 20px;
                    font-family: $robotomedium;
                    display: inline-block;
                    border-radius: 10px;
                    padding: $space10 $space20;
                    color: $white;
                    background: $primary-color;
                    transition: 0.3s all ease-in-out;
                    text-decoration: none;

                    &:hover {
                        background: $primary-hover;
                    }
                }
            }
        }

        .explore-section {

            .exp-details {
                display: inline-block;
                position: relative;
                box-shadow: 0px 0px 6px 0px #00000024;
                background: $white;
                border-radius: 10px;
                width: 29%;
                padding: $space10+2;

                .exp-head {
                    @include font-size(18px);
                    line-height: 24px;
                    font-family: $robotomedium;
                    color: $title-color;
                    margin-bottom: $space10;
                }

                .exp-subhead {
                    width: 75%;
                    @include font-size(15px);
                    line-height: 18px;
                    color: $title-color;
                    margin-bottom: $space15;
                    height: 54px;
                }

                .exp-link {
                    @include font-size(14px);
                    line-height: 20px;
                    font-family: $robotomedium;
                    border-radius: 5px;
                    padding: $space5+3 $space15;
                    display: inline-block;
                    transition: 0.3s all ease-in-out;

                    svg {
                        vertical-align: initial;
                        margin-left: $space5;
                    }
                }

                img {
                    position: absolute;
                    right: 12px;
                    bottom: 12px;
                    width: 70px;
                }

                &:first-child {
                    img {
                        width: 75px;
                    }
                }

                &:nth-of-type(1) {
                    .exp-link {
                        background: #F5CA99;
                        color: $title-color;

                        &:hover {
                            background: #f1c796;
                        }
                    }
                }

                &:nth-of-type(2) {
                    .exp-link {
                        background: #00C9A7;
                        color: $white;

                        &:hover {
                            background: #02bb9c;
                        }
                    }
                }
            }

            .exp-mob {
                display: none;
            }
        }

        .mid-banner {
            @include flex;
            background: #E7F6F8;
            border-radius: 10px;
            padding: $space20 $space30;
            margin-bottom: $space25;

            .left {
                width: 55%;

                .head {
                    @include font-size(26px);
                    line-height: 30px;
                    font-family: $robotomedium;
                    color: $title-color;
                }

                .subhead {
                    color: $subtitle-color;
                    margin: $space15 0;
                }
            }

            .img {
                width: 40%;
            }
        }

        .details-section {
            flex-direction: column;
            margin-bottom: $space40*2;

            .left-wrpr,
            .right-wrpr {
                width: 100%;
            }

            .left-wrpr {
                margin-bottom: $space25;

                .small-banner {
                    flex-direction: row;
                    background: #066ac91a;
                    padding: $space15 $space20;

                    .b-content {
                        text-align: left;

                        .head,
                        .subhead {
                            color: $title-color;
                        }

                        .subhead {
                            margin: $space5 0 $space15;
                            @include font-size(15px);
                        }

                        .common-link {
                            margin-bottom: 0;
                            color: $primary-color
                        }
                    }

                    .list-type {
                        @include flex;
                        flex-wrap: wrap;
                        width: 30%;
                        overflow: unset;
                        margin-bottom: 0;

                        .list-item {
                            width: 44%;

                            img {
                                background: $white;
                                border-radius: 5px;
                                display: block;
                            }

                            &:nth-of-type(n+3) {
                                margin-top: $space10+1;
                            }
                        }
                    }
                }

                .events-section {

                    .event-head {
                        padding: $space15+1 $space20 $space10+1;

                        .title {
                            @include font-size(18px);
                            line-height: 18px;
                            font-family: $robotomedium;

                            svg {
                                margin-right: $space10;
                            }
                        }
                    }

                    .list-type {
                        height: 198px;
                        overflow: auto;
                        padding: $space15 $space20;

                        .list-item {
                            .e-head {
                                @include font-size(15px);
                                line-height: 18px;
                                font-family: $robotomedium;
                            }

                            .e-time {
                                @include font-size(14px);
                                line-height: 16px;
                                display: inline-block;

                                .label {
                                    display: none;
                                }

                                &:nth-of-type(2) {
                                    &::after {
                                        content: ',';
                                        display: inline-block;
                                    }
                                }

                            }

                            .btn-row {
                                margin-top: 0;
                                float: right;
                            }
                        }
                    }
                }
            }

            .right-wrpr {
                box-shadow: 0px 0px 6px 0px #00000024;
                border: none;

                .top-head {
                    padding: 0 $space10;
                    @include flex;

                    .common-link {
                        display: block;
                        font-family: $robotomedium;
                    }
                }

                .m-bottom {
                    display: none;
                }

                .panels {
                    padding: 0;

                    .content {
                        padding: $space20 $space15;

                        .panel-head {
                            display: block;
                            @include font-size(18px);
                            line-height: 18px;
                            color: $title-color;
                            font-family: $robotomedium;
                            margin-bottom: $space10+3;
                        }

                        .m-panel-head {
                            display: none;
                        }

                        .app-list {
                            .single-application {
                                background: $white;
                                box-shadow: 0px 0px 6px 0px #00000024;
                                border-radius: 10px;

                                .app-top {
                                    border-bottom: $common-border;
                                    flex-wrap: nowrap;

                                    .left {
                                        .detail {
                                            .date {
                                                display: block;
                                            }
                                        }
                                    }

                                    .right {
                                        .apply-btn {
                                            &.d-btn {
                                                display: inline-block;
                                            }
                                        }

                                        .dots-box {
                                            display: none;
                                            position: absolute;
                                            left: unset;
                                            bottom: unset;
                                            width: 210px;
                                            top: 45px;
                                            box-shadow: 0px 0px 4px 0px #00000024;
                                            border: $common-border;
                                            border-radius: 10px;
                                            padding: $space15;

                                            .head {
                                                display: none;
                                            }

                                            .action-list {
                                                padding: 0;
                                            }
                                        }
                                    }

                                    .m-btns {
                                        display: none;
                                    }
                                }

                                .app-bottom {
                                    @include flex;
                                    padding: $space10 $space15;

                                    .text {
                                        color: $subtitle-color;

                                        img {
                                            margin-right: $space5;
                                            vertical-align: middle;
                                        }
                                    }

                                    .text,
                                    .elg-btn {
                                        @include font-size(13px);
                                        line-height: 16px;
                                    }

                                    .elg-btn {
                                        font-family: $robotomedium;
                                        transition: 0.3s all ease-in-out;

                                        span {
                                            text-decoration: underline;
                                        }

                                        img {
                                            vertical-align: middle;
                                        }

                                        @media (hover:hover) {
                                            &:hover {
                                                opacity: 0.8;
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        .view-btn {
                            &.d-btn {
                                display: block;
                            }
                        }
                    }

                    .no-content {
                        padding: $space40*2 0;
                        margin: 0 auto;
                        width: 50%;

                        img {
                            margin-bottom: $space15;
                        }

                        .head {
                            @include font-size(18px);
                            line-height: 18px;
                            font-family: $robotomedium;
                            margin-bottom: $space5;
                        }

                        .subhead {
                            @include font-size(15px);
                            line-height: 18px;
                            color: $subtitle-color;
                            display: block;

                            .exp-link {
                                color: $appicon;
                            }
                        }
                    }
                }

                .app-status-list {
                    display: block;

                    .status-item {
                        display: inline-block;
                        position: relative;
                        transition: all ease-in-out;
                        padding: 0 $space20 0 0;
                        border-right: none;
                        width: unset;

                        .status-link {
                            @include font-size(16px);
                            padding: $space10+1 $space10;
                            display: inline-block;
                            background: #EBE7E7;
                        }

                        &::before,
                        &::after {
                            content: '';
                            width: 22px;
                            height: 40px;
                            display: inline-block;
                            position: absolute;
                            top: 0;
                        }

                        &::before {
                            left: -21px;
                            background: #EBE7E7;
                            z-index: -1;
                        }

                        &::after {
                            right: 1px;
                            background: url("../images/dashboard/li-not-active.png") no-repeat;
                        }

                        &:first-child {
                            margin-left: $space25;

                            &::before {
                                background: url("../images/dashboard/li-not-active.png") no-repeat;
                                transform: scaleX(-1);
                            }

                        }

                        &.active {
                            background-color: transparent;
                            padding: 0 $space20 - 1;
                            margin-left: -35px;
                            z-index: 1;

                            &:first-child {
                                margin-left: 0;
                            }

                            &::before,
                            &::after {
                                background: url("../images/dashboard/li-active.png") no-repeat;
                            }

                            &::before {
                                left: -2px;
                                transform: scaleX(1);
                            }

                            &::after {
                                transform: scaleX(-1);
                            }

                            .status-link {
                                background: $primary-color;
                                color: $white;
                            }
                        }
                    }
                }
            }
        }
    }

    .add-app-popup,
    .remove-app-popup,
    .eligibility-popup {
        display: none;
        left: 0;
        right: 0;
        margin: auto;
        width: 460px;
        box-shadow: 0px 0px 16px 0px #00000024;
        border-radius: 10px;

        .top {
            flex-direction: row;
            justify-content: space-between;

            .close-icon {
                margin-right: 0;
            }

        }
    }

    .add-app-popup,
    .eligibility-popup {
        top: 0;
        bottom: 0;
        height: fit-content;
        min-height: 577px;
    }

    .add-app-popup {
        min-height: 577px;

        .top {
            .close-icon {
                path {
                    fill: $title-color;
                }
            }

            .head {
                color: $title-color;
            }
        }

        .application-form {
            padding-right: 0;

            .form-fields {
                height: 390px;
                overflow-y: auto;
                overflow-x: hidden;
                padding-right: $space10;

                .app-status {
                    .status-list {
                        .single-status {

                            &:nth-of-type(6) {
                                margin-left: 0;
                                margin-bottom: 0;
                            }

                            &:nth-of-type(5) {
                                margin-left: $space15;
                                margin-bottom: $space15;
                            }
                        }
                    }
                }
            }
        }
    }

    .remove-app-popup {
        height: 357px;
        top: 80px;
        margin: 0 auto;

        .popup-body {
            margin: $space50+$space5 $space35*2 $space35;
            padding: 0;

            .small-head {
                padding: 0;
            }

            .btns {
                margin-top: $space60+$space15;

                .btn-link {
                    width: 38%;

                    &:nth-of-type(2) {
                        margin-left: $space15;
                    }
                }
            }
        }
    }

    .eligibility-popup {
        min-height: 565px;

        .top {
            align-items: center;

            svg {
                display: inline-block;
                vertical-align: middle;
                margin-right: $space10;
            }
        }

        .popup-body {
            .common-btn {
                position: unset;
                width: 100%;
                margin: $space30 0 0;
            }
        }
    }

    .success-msg {
        width: 492px;
        padding: $space10;
        top: 85px;

        img {
            vertical-align: middle;
            position: unset;
            margin-right: $space5;
        }

        .close-msg {
            display: block;
            float: right;
            margin-top: 5px;
            cursor: pointer;
        }
    }
}

@media screen and (min-width:1024px) {
    .dashboard {
        .profile {
            align-items: center;

            .user-details {
                width: 25%;
            }

            .offer-msg {
                width: 35%;
                padding: $space5+3 $space15;
            }

            .update-details {

                .circular-progress {
                    width: 73px;
                    height: 73px;
                    margin-right: $space35+1;

                    .inner-circle {
                        width: 67px;
                        height: 67px;
                    }

                    .percentage {
                        @include font-size(22px);
                    }
                }
            }
        }

        .explore-section {
            .exp-details {
                padding: $space20;
                width: 28%;

                .exp-head {
                    @include font-size(22px);
                    margin-bottom: $space20+1;
                }

                .exp-subhead {
                    height: unset;
                }

                .exp-link {
                    svg {
                        vertical-align: middle;
                    }
                }

                img {
                    right: 20px;
                    bottom: 20px;
                    width: 80px;
                }

                &:first-child {
                    img {
                        width: 110px;
                    }
                }
            }
        }

        .mid-banner {
            .left {
                .head {
                    @include font-size(32px);
                    line-height: 38px;
                }

                .subhead {
                    @include font-size(16px);
                    margin: $space5 0 $space35;
                    line-height: 20px;
                }
            }
        }

        .details-section {
            flex-direction: row;
            align-items: flex-start;
            margin-bottom: $space60;

            .left-wrpr {
                width: 42%;
                margin-bottom: 0;

                .small-banner {

                    .list-type {
                        width: 76%;
                    }
                }
            }

            .right-wrpr {
                width: 56%;
                margin-bottom: 0;

                .app-status-list {
                    .status-item {
                        padding: 0 $space15 0 0;

                        .status-link {
                            @include font-size(15px);
                            padding: 8px;
                        }

                        &::before,
                        &::after {
                            height: 34px;
                        }

                        &.active {
                            padding: 0 $space15;
                            margin-left: -30px;
                        }

                        &::before {
                            left: -18px;
                        }
                    }
                }

                .panels {
                    min-height: 380px;
                }
            }

        }
    }
}

@media screen and (min-width:1366px) {
    .dashboard {
        .profile {
            padding: $space20+2 $space30;

            .user-details {
                width: unset;

                .detail-list {


                    .list-item {
                        @include font-size(12px);
                        line-height: 16px;

                        &:nth-of-type(1) {
                            @include font-size(16px);
                            line-height: 16px;
                            margin-bottom: $space10;
                        }
                    }
                }
            }

            .offer-msg {
                width: fit-content;
            }
        }

        .explore-section {

            .exp-details {
                width: 29%;

                .exp-subhead {
                    @include font-size(16px);
                    margin-bottom: $space25;
                }

                img {
                    width: auto;
                }

                &:first-child {
                    img {
                        width: unset;
                    }
                }
            }
        }

        .mid-banner {
            .left {
                .head {
                    @include font-size(38px);
                    line-height: 44px;
                }
            }

            .img {
                width: auto;
            }
        }

        .details-section {

            .left-wrpr {
                width: 33%;

                .small-banner {
                    margin-bottom: $space20;
                }
            }

            .right-wrpr {
                width: 65%;

                .app-status-list {
                    .status-item {

                        .status-link {
                            @include font-size(16px);
                            padding: $space10+1 $space10;

                        }

                        &::before,
                        &::after {
                            height: 40px;
                        }

                        &::before {
                            left: -21px;
                        }

                        &.active {
                            padding: 0 $space20;
                            margin-left: -35px;
                        }
                    }
                }
            }
        }
    }

    .add-app-popup {
        .application-form {

            .form-fields {
                padding-right: $space15;

                .app-status {
                    .status-list {
                        .single-status {
                            margin-left: $space10;
                        }
                    }
                }

                .selected-list {
                    margin-bottom: $space30;
                }
            }
        }
    }
}

@media screen and (min-width:1400px) {
    .add-app-popup {
        min-height: 577px;

        .application-form {
            .form-fields {
                height: unset;
                overflow: unset;
                padding-right: 0;

                .app-status {
                    .status-list {
                        .single-status {
                            margin-left: $space15;
                        }
                    }
                }

                .selected-list {
                    margin-bottom: $space60*2;
                }
            }
        }
    }
}