.profile-section {
    .right {
        .view-panel {
            .view-ed-detail {
                text-align: right;

                .details {
                    padding-bottom: $space15;
                    border-radius: 10px;
                    margin-top: $space25;
                    text-align: left;
                    border: $common-border;
                    border-radius: 10px;

                    &:first-child() {
                        margin-top: 0;
                    }

                    .ed-head {
                        padding: $space10;
                        @include font-size(16px);
                        line-height: 20px;
                        color: $primary-color;
                        padding-bottom: $space10;
                        margin-bottom: $space15+2;
                        border-bottom: $common-border;
                        font-family: $robotomedium;
                        @include flex;
                        background: $bg-light;
                        border-radius: 10px 10px 0 0;
                    }

                    .list-type2 {
                        .ed-list {
                            @include font-size(16px);
                            line-height: 20px;
                            color: $title-color;
                            margin-bottom: $space10+2;
                            display: flex;

                            .ed-value {
                                @include font-size(14px);
                                line-height: 16px;
                                color: $subtitle-color;
                                display: inline-block;
                                width: 25%;
                            }

                            .education_board,
                            .institute_name,
                            .degree {
                                width: 72%;
                            }

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

                        .m-year {
                            @include flex;

                            .syear {
                                width: 45%;

                                .ed-value {
                                    width: unset;
                                    margin-right: $space15;
                                }
                            }
                        }
                    }

                    .ed-del {
                        display: flex;
                        align-items: center;
                        width: 50px;
                        justify-content: space-between;

                        .edit_education_btn {
                            display: inline-block;

                            img {
                                width: 15px;
                                height: 15px;
                            }
                        }

                        .del-detail {
                            img {
                                width: 18px;
                                height: 18px;
                            }
                        }

                        .edit_education_btn,
                        .del-detail {
                            transition: 0.3s all ease-in-out;

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

                .add-more {
                    @include font-size(13px);
                    line-height: 15px;
                    background: $primary-color;
                    color: $white;
                    padding: 3px $space10;
                    border: 1px solid $primary-color;
                    border-radius: 15px;
                    margin-bottom: $space15;
                    display: inline-block;
                    text-transform: uppercase;
                    transition: 0.3s all ease-in-out;

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

.no-scroll {
    overflow: hidden;
}

@media screen and (min-width:768px) {
    .header {
        padding: 0;
    }

    .profile-section {
        margin-bottom: $space50*2;

        img {
            width: auto;
            height: auto;
        }

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

        .left {
            background: $white;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-bottom: $space40;

            .info-user {
                width: 100%;
                box-shadow: 0px 0px 6px 0px #00000024;
                border-radius: 10px;
                padding: $space20;
                margin-bottom: $space25;

                .profile-detail {
                    display: flex;

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

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

                        .list-item {
                            line-height: 20px;
                            color: $title-color;

                            &:first-child {
                                @include font-size(20px);
                                font-family: $robotomedium;
                            }

                            &:nth-of-type(2) {
                                margin: $space5 0;
                                @include font-size(14px);
                                line-height: 18px;
                                color: $subtitle-color;
                            }

                            &:nth-of-type(3) {
                                @include font-size(16px);
                            }
                        }
                    }
                }
            }

            .profile-progress {
                margin-top: $space15+2;
                width: 100%;

                .progress-value {
                    @include font-size(13px);
                    line-height: 15px;
                    color: $title-color;
                    float: right;
                    margin-bottom: $space5;
                }

                .progress-line {
                    width: 100%;
                    height: 5px;
                    overflow: hidden;
                    position: relative;
                    background: $border-color;
                    border-radius: 10px;

                    .filled-line {
                        height: 5px;
                        display: block;
                        width: 0;
                        color: $title-color;
                        position: absolute;
                        border-radius: 10px;
                        background-color: $primary-color;
                    }
                }

            }

            .loan-banner,
            .college-finder {
                width: 45%;
                border-radius: 10px;
                text-align: center;
                padding: $space30 $space15;

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

                .subhead {
                    display: block;
                    @include font-size(16px);
                    line-height: 18px;
                    margin-top: $space5;
                }

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

            .loan-banner {
                background: $bg-light;
                border: $common-border;

                .small-text {
                    @include font-size(13px);
                    line-height: 14px;
                    display: block;
                }

                .common-btn {
                    background: $primary-color;
                    margin: $space20 0 $space5;

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

            .college-finder {
                border: $common-border;

                .head {
                    margin: 0;
                }

                img {
                    margin: auto;
                    display: none;
                }

                .common-btn {
                    background: $appicon;
                    margin-top: $space20;

                    @media (hover:hover) {
                        &:hover {
                            background: #ed5815;
                        }
                    }
                }
            }

        }

        .right {
            padding-top: $space10;
            margin-bottom: $space25;

            .tab-list {
                display: flex;
                justify-content: space-between;
                position: relative;
                padding-top: $space25+3;
                margin-bottom: $space30;

                .tab-item {
                    @include font-size(14px);
                    line-height: 15px;
                    border: 1px solid $appicon;
                    border-radius: 5px;
                    padding: $space5+1 $space10;
                    cursor: pointer;
                    position: relative;
                    margin-right: $space5;

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

                    .list-block {
                        display: flex;
                        align-items: flex-start;
                        position: relative;
                        padding-left: $space20;
                    }

                    svg {
                        position: absolute;
                        top: 0;
                        left: 0;
                    }

                    &.active {
                        color: $white;
                        background: $appicon;

                        svg {
                            path {
                                fill: $white;
                            }
                        }

                        &:nth-of-type(3) {
                            svg {
                                path {
                                    stroke: $white;
                                }
                            }
                        }
                    }

                    &::before {
                        content: '';
                        position: absolute;
                        top: -38px;
                        left: 42%;
                        display: block;
                        width: 15px;
                        height: 15px;
                        border-radius: 100%;
                        border: 2px solid $primary-color;
                        background: $white;
                    }

                    &:first-child,
                    &:nth-last-of-type(1) {
                        &::after {
                            content: '';
                            position: absolute;
                            display: block;
                            width: 8px;
                            height: 8px;
                            top: -32px;
                            border-radius: 100%;
                            background: $primary-color;
                        }
                    }

                    &:first-child {
                        &::after {
                            content: '';
                            left: -1px;

                        }
                    }

                    &:nth-last-of-type(1) {
                        &::after {
                            right: -3px;

                        }
                    }

                    &.filled {
                        &::before {
                            background: url('../images/tick.svg') no-repeat $primary-color;
                            background-position: center center;
                            border-color: $white;
                            background-size: 11px;
                        }
                    }

                }

                &::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    width: 100%;
                    border: 1px solid $primary-color;
                }
            }

            .view-panel {
                background: $white;
                border: $common-border;
                border-radius: 10px;
                display: none;

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

                &.view-ed {
                    border: none;
                }

                .form-btn {
                    display: block;
                    text-align: right;
                    background: $bg-light;
                    padding: $space10+2 $space15;
                    border-radius: 10px 10px 0 0;

                    .edit-btn {
                        transition: 0.3s all ease-in-out;
                        background: none;
                        width: fit-content;
                        padding: 0;

                        .edit-text {
                            @include font-size(16px);
                            line-height: 20px;
                            font-family: $robotomedium;
                            color: $title-color;
                            text-decoration: underline;
                        }

                        img {
                            margin-left: $space5+3;
                        }

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

                                img {
                                    opacity: 0.8;
                                }
                            }
                        }
                    }
                }

                .small-head {
                    width: 100%;
                    @include font-size(16px);
                    line-height: 20px;
                    color: $title-color;
                    font-family: $robotomedium;
                    margin-bottom: $space15;
                }

                .fields-list {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: flex-end;
                    padding: $space40+$space5 $space15 $space10;

                    .single-field {
                        width: 46.4%;
                        margin-right: $space50;
                        margin-bottom: $space35;

                        &:nth-of-type(2n) {
                            margin-right: 0;
                        }

                        .field-value {
                            display: flex;
                            align-items: center;
                            border-bottom: $common-border;
                            padding: $space5;
                            margin-bottom: $space5;
                            position: relative;

                            .field-icon {
                                margin-right: $space5+3;
                            }

                            .input-field {
                                width: 100%;
                                @include font-size(15px);
                                line-height: 18px;
                                color: $title-color;

                                &::placeholder {
                                    color: $placeholder-color;
                                }
                            }

                            select {
                                opacity: 1;
                            }
                        }

                        .field-label {
                            @include font-size(13px);
                            line-height: 16px;
                            color: $subtitle-color;
                            float: right;
                        }
                    }

                    &:nth-of-type(2) {
                        padding-top: $space30;
                    }
                }

                .view-ed-detail {

                    .details {

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

                        .list-type2 {
                            display: flex;
                            flex-wrap: wrap;
                            justify-content: space-between;
                            margin: $space10 $space10 0;

                            .ed-list {
                                width: 45%;
                                margin-bottom: $space10;

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

                                .ed-value {
                                    margin-right: 0;
                                    width: 30%;
                                }
                            }

                            .m-year {
                                width: 100%;

                                .syear {
                                    .ed-value {
                                        margin-right: 21px;
                                        width: 23%;
                                    }
                                }
                            }
                        }
                    }

                    .add-more {
                        @include font-size(14px);
                        line-height: 16px;
                    }
                }

                .budget-form {
                    .fields-list {
                        .single-field {

                            &:nth-of-type(3) {
                                margin-right: $space50;
                            }

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

                .budget-list {
                    width: 100%;
                    position: relative;
                    margin-bottom: $space50;

                    .range-slider {
                        width: 100%;
                        background: #74757940;
                        // background: linear-gradient(to right, $primary-color 0%, $primary-color 50%, #fff 50%, #fff 100%);
                        border-radius: 8px;
                        height: 7px;
                        outline: none;
                        transition: background 450ms ease-in;
                        appearance: none;

                        &::-webkit-slider-thumb {
                            appearance: none;
                            width: 17px;
                            height: 17px;
                            border-radius: 50%;
                            background: $white;
                            cursor: pointer;
                            border: 2px solid $primary-color;
                        }

                        &::-moz-range-thumb {
                            appearance: none;
                            width: 17px;
                            height: 17px;
                            border-radius: 50%;
                            background: $white;
                            cursor: pointer;
                            border: 2px solid $primary-color;
                        }

                    }

                    .min-value,
                    .max-value {
                        position: absolute;
                        bottom: -25px;
                        color: $subtitle-color;
                        font-family: $robotoregular;
                        @include font-size(15px);
                        line-height: 20px;
                    }

                    .min-value {
                        left: 0;
                    }

                    .max-value {
                        right: 0;

                    }

                }

                .view-documents {
                    padding: $space30 $space20;
                    border-radius: 10px;

                    .doc-item {
                        @include flex;
                        padding: $space15 0;
                        border-bottom: $common-border;

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

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

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

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

                            &.uploaded {
                                font-family: $robotomedium;
                            }
                        }

                        .user-link {
                            display: inline-block;
                            transition: 0.3s all ease-in-out;

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

                                img {
                                    width: 16px;
                                    height: 20px;
                                }
                            }

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

                .nice-select-drp {
                    background-position: right 5px center;

                    .current {
                        text-overflow: ellipsis;
                        display: block;
                        white-space: normal;
                    }

                    .list {
                        left: unset;
                        max-height: 250px;
                        min-width: 328px;
                    }

                    &:not(.disabled) {
                        background: url("../images/dropdown.svg") no-repeat;
                        background-position: right 5px center;
                    }
                }

                .test-form {

                    .aptitude-other,
                    .english-other {
                        display: none;
                    }

                    .single-field {
                        &:nth-of-type(3) {
                            margin-right: 0;
                        }

                        &:nth-of-type(4) {
                            margin-right: $space50;
                        }

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

    .ed-popup,
    .delete-ed-popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 13;
        height: fit-content;
        margin: auto;
        background: $white;
        box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1411764706);
        border-radius: 10px;

        svg {
            cursor: pointer;
            transition: 0.3s all ease-in-out;

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

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

    .ed-popup {
        width: 700px;

        .popup-head {
            border-radius: 10px 10px 0 0;
            padding: $space15 $space25;
            @include flex;
            border-bottom: $common-border;

        }

        .ed-form {
            padding: 0 $space25 $space35;
            @include flex;
            flex-wrap: wrap;

            .single-input,
            .marks-type {
                position: relative;
                width: 47%;
                margin-top: $space40;
            }

            .single-input {
                transition: 0.3s all ease-in-out;

                .field-label {
                    position: absolute;
                    top: 0;
                    left: 7px;
                    @include font-size(12px);
                    line-height: 15px;
                    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 7px;
                    border-bottom: $common-border;
                    @include font-size(15px);
                    line-height: 18px;
                    color: $title-color;
                    font-family: $robotoregular;

                    &::placeholder {
                        color: $placeholder-color;
                    }
                }
            }

            .marks-type {
                @include flex;
                align-items: flex-end;

                .single-input {
                    width: 61%;
                    margin-top: 0;

                    &.select-type {
                        width: 36%;

                        .input-field {
                            padding-right: $space15;
                            background: url('../images/dropdown.svg') no-repeat;
                            background-position: right 5px center;
                        }

                    }
                }

            }

            .form-btns {
                @include flex;
                justify-content: center;
                width: 100%;
                margin: $space40+$space5 0 0;

                .cancel-btn,
                .add-btn {
                    text-align: center;
                    padding: $space15 0;
                    border-radius: 10px;
                    width: 22%;
                    cursor: pointer;
                    transition: 0.3s all ease-in-out;
                }

                .cancel-btn {
                    color: $subtitle-color;
                    background: $grey-btn;

                    @media (hover: hover) {
                        &:hover {
                            background: #d0d0d0;
                        }
                    }
                }

                .add-btn {
                    color: $white;
                    background: $primary-color;
                    margin-left: $space20+2;

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

            .select-list {
                position: relative;

                .input-field {
                    color: $placeholder-color;
                    background: url('../images/dropdown.svg') no-repeat $white;
                    background-position: right 5px center;
                    text-overflow: ellipsis;
                    font-family: $robotoregular;

                    option {
                        color: $subtitle-color;

                        &:disabled {
                            color: #cdcdcd;
                        }

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

            }

            .year {
                .input-field {
                    background: url('../images/calender.svg') no-repeat;
                    background-position: right 5px center;
                }
            }

            .nice-select-drp {
                .list {
                    width: 305px;
                    max-height: 323px;
                }
            }
        }

    }

    .delete-ed-popup {
        width: 460px;

        .head-name {
            @include flex;
            background: $bg-light;
            border-radius: 10px 10px 0 0;
            padding: $space15;
        }

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

            img {
                margin-bottom: $space15;
            }

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

        .p-head,
        .delete-btn {
            @include font-size(16px);
            line-height: 20px;
        }

        .delete-btn {
            font-family: $robotomedium;
            color: $white;
            border-radius: 10px;
            padding: $space15;
            background: #E33E3E;
            display: block;
            width: 95%;
            margin: auto auto $space20;
            transition: 0.3s all ease-in-out;

            @media (hover:hover) {
                &:hover {
                    background: #d73c3c;
                }
            }

        }
    }
}

@media screen and (min-width:1024px) {
    .profile-section {
        @include flex;
        align-items: flex-start;

        .left {
            width: 24%;
            display: inline-block;
            margin-bottom: 0;

            .info-user,
            .loan-banner,
            .college-finder {
                width: unset;
            }

            .loan-banner,
            .college-finder {
                .head {
                    @include font-size(18px);
                    line-height: 18px;
                }

                .subhead {
                    @include font-size(14px);
                    line-height: 16px;
                }
            }

            .loan-banner {
                padding: $space25 $space15 $space40+2;
                margin-bottom: $space25;
            }

            .college-finder {
                box-shadow: 0px 0px 6px 0px #00000024;
                border: none;

                img {
                    display: block;
                }

                .head {
                    margin: $space15 $space10;
                }

                .subhead {
                    margin-top: 0;
                }

                .common-btn {
                    margin-top: $space10;
                }
            }
        }

        .right {
            width: 74%;
            margin-bottom: 0;

            .tab-list {
                .tab-item {
                    .list-block {
                        align-items: center;
                    }
                }
            }

            .view-panel {
                .view-ed-detail {

                    .education-cards {
                        max-height: 555px;
                        overflow: auto;

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

                        &::-webkit-scrollbar-track,
                        &::-webkit-scrollbar-thumb {
                            border: solid rgba(255, 255, 255, 0);
                            background-clip: padding-box;
                            border-width: 0 10px 0 10px;
                        }
                    }

                    .details {
                        .list-type2 {
                            .m-year {
                                .syear {
                                    .ed-value {
                                        width: 30%;
                                        margin-right: 0;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .ed-popup {
        width: 800px;

        .ed-form {
            .nice-select-drp {
                .list {
                    width: 352px;
                }
            }

            .marks-type {

                .single-input {
                    width: 65%;

                    &.select-type {
                        width: 32%;
                    }
                }

            }
        }
    }
}

@media screen and (min-width:1366px) {
    .profile-section {
        .left{
            .college-finder{
                .head{
                    margin: $space15 $space20;
                }
            }
        }
        .right {
            .tab-list {
                .tab-item {
                    .list-block {
                        display: flex;
                        align-items: flex-start;
                        position: unset;
                        padding-left: 0;
                    }

                    svg {
                        position: unset;
                        margin-right: $space5;
                    }
                }
            }

            .view-panel {
                .fields-list {
                    .single-field {
                        width: 29.8%;

                        &:nth-of-type(2n) {
                            margin-right: $space50;
                        }

                        &:nth-of-type(3n) {
                            margin-right: 0;
                        }
                    }
                }

                .view-ed-detail {

                    .education-cards {
                        max-height: 536px;
                    }

                    .details {
                        .list-type2 {
                            .ed-list {
                                .ed-value {
                                    width: 22%;
                                }
                            }

                            .m-year {
                                .syear {
                                    .ed-value {
                                        width: 22%;
                                    }
                                }
                            }
                        }
                    }
                }

                .nice-select-drp {

                    .list {
                        min-width: 286px;
                        max-height: 300px;
                        left: 0;
                    }
                }

                .test-form {
                    .single-field {
                        &:nth-of-type(3) {
                            margin-right: $space50;
                        }

                        &:nth-of-type(4) {
                            margin-right: 0;
                        }
                    }
                }
            }
        }
    }

}

@media screen and (min-width:1400px) {
    .profile-section {
        .right {
            .view-panel {
                .view-ed-detail {
                    .education-cards {
                        max-height: 700px;
                    }
                }
            }
        }
    }
}