@media screen and (max-width: 1200px) {
    .dashboard-wrapper {
        grid-template-areas: "header header"
            "nav content"
            "sider auto";
        grid-template-columns: 280px calc(100% - 280px);
        grid-template-rows: 70px 1fr 1fr;
    }

    .dashboard-wrapper aside {
        margin-top: 0;
    }

    .dashboard-wrapper.full-width main {
        margin: 0;
        width: 100%;
    }

    .dashboard-wrapper main .formArea,
    .dashboard-wrapper main .titleSec.sm_head,
    .dashboard-wrapper main .myJobs-pg {
        padding-left: 15px;
        padding-right: 15px;
    }

    .dashboard-wrapper main .followers-pg .followers-notify-sec .followers-wrap .folWrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-wrapper main .followers-pg .followers-notify-sec .followers-wrap .folWrap .col-right {
        padding-left: 30px;
        margin-top: 20px;
    }

    #header .profile-sec ul.dropdown {
        z-index: 10;
    }

    .dashboard-wrapper main .titleSec .btn-group>button,
    .dashboard-wrapper main .titleSec .btn-group>a {
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 865px) {
    .loginwrap .form-container {
        min-width: auto;
        padding: 15px;
        width: 100%;
    }

    #userTypeBt>p {
        padding: 0px 10px;
    }

    #userTypeBt ul li label {
        width: 280px;
    }

    #userForm {
        padding: 50px 0px;
        display: inline-block;
    }

    #userForm .signupForm {
        padding: 15px;
        width: calc(100% - 30px);
    }

    #userForm .tl-logo {
        width: 100%;
        text-align: center;
    }

    #userForm .tl-logo img {
        width: 180px;
        margin: auto;
    }

    .menuwrapper {
        position: relative;
    }

    #header .menuwrapper .toggleMenu {
        display: flex;
    }

    #header .header-right {
        flex-direction: column;
        top: 40px;
        position: absolute;
        right: -120px;
        z-index: 99;
        background: #fff;
        box-shadow: 0px 4px 4px 0px rgb(0 0 0 / 25%);
        min-width: 200px;
        margin-left: 0;
        display: none;
    }

    #header .header-right.show {
        display: flex;
    }

    #header .header-right a {
        width: auto;
        height: 40px;
        text-align: left;
        padding: 0px 20px;
        margin-right: 0;
        position: relative;
    }

    #header .header-right a:before {
        content: "";
        background: #fff;
        display: inline-block;
        width: 200px;
        height: 45px;
        position: absolute;
        z-index: -1;
        top: 0;
    }

    #header .header-right a.active:before {
        background: #220063;
    }

    .menuwrapper .toggleMenu {
        display: flex;
    }

    .dashboard-wrapper main .formArea {
        padding: 0;
    }

    .videoWrapper video {
        max-width: 400px;
    }

    .dashboard-wrapper.follower-wrapper.full-width .followers-pg {
        padding: 10px;
    }
}

@media screen and (max-width: 800px) {
    .dashboard-wrapper {
        grid-template-areas: "header header"
            "content content"
            " nav sider";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 70px 1fr auto;
    }

    .dashboard-wrapper main {
        margin: 0;
        width: 100%;
    }

    .dashboard-wrapper nav,
    .dashboard-wrapper aside {
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
    }

    .dashboard-wrapper nav {
        margin-left: 0px;
    }

    .dashboard-wrapper aside {
        margin-right: 0px;
    }

    .dashboard-wrapper main .followers-pg .follower-filter-wrap {
        flex-direction: column;

    }

    .dashboard-wrapper main .followers-pg .follower-filter-wrap .fcol-left .filter-wrap {
        height: auto;
        width: 100%;
    }

    .dashboard-wrapper main .followers-pg .followers-container .follower-card .fl-wrap .skills ul li {
        flex: 0 0 100%;
    }

    .dashboard-wrapper main .titleSec .cPost-modal.show {
        width: 100%;
    }

    .dashboard-wrapper main .followers-pg .titleSec .btn-group .clabel-popup {
        right: auto;
    }

    .create-modal.show {
        width: 95%;
    }

    #header .header-right .follower-popup.show {
        width: 90vw;
        min-width: auto;
        top: 0;
        left: 55%;
        transform: translateX(-48%);
    }

    #header .header-right .follower-popup.show .pop-header .follow-action .viewall a:before {
        content: "";
        display: none;
    }

    .followers-pg .white-wrap .user-details {
        flex-direction: column;
        padding-bottom: 20px;
        align-items: flex-start;
    }

    .followers-pg .white-wrap .cardwrap .card-body .skills ul {
        flex-direction: column;
    }

    .followers-pg .white-wrap .cardwrap .card-body .skills ul li {
        flex-basis: 100%;
        flex-direction: column;
        margin: 0;
    }

    .followers-pg .white-wrap .cardwrap .card-body .skills ul li>span {
        margin-bottom: 20px;
    }

    .dashboard-wrapper main .followers-pg {
        padding: 0;
    }

    .followers-pg .cvWrapper .titleSec,
    .followers-pg .cvWrapper .cv-formWrapper {
        width: 100%;
        padding: 0;
    }


    .followers-pg .cvWrapper .cv-formWrapper .input-group.d-flex-jc-sp>.input-full:last-child {
        margin-left: 0;
    }

    .followers-pg .cvWrapper .cv-formWrapper .input-group>span:not(.select2),
    .followers-pg .cvWrapper .cv-formWrapper .input-group>label {
        margin: 5px 15px 5px 0px;
    }

    .dashboard-wrapper main .followers-pg .follower-filter-wrap.applicant-filter .followers-container .follower-card .fl-wrap>.skills {
        padding-bottom: 50px;
    }

    .dashboard-wrapper main .followers-pg .follower-filter-wrap.applicant-filter .followers-container .follower-card .skills ul li>span:first-child {
        display: block;
    }

    .dashboard-wrapper.follower-wrapper.userprofile-wrapper {
        grid-template-columns: 1fr;
    }

    .userProfile .tabs .upwrapper {
        flex-direction: column;
    }

    .userProfile .tabs .upwrapper .upleft {
        margin-right: 0;
    }

    .followers-pg .white-wrap .cardwrap .card-body ul.per-detail>li {
        flex: 0 0 100%;
    }

    .followers-pg .white-wrap .cardwrap .card-body ul.per-detail>li>span {
        flex: 0 0 100%;
    }

    .followers-pg .white-wrap .cardwrap .card-body ul.per-detail>li span:first-child {
        font-weight: bold;
        flex: auto;
        min-width: 100px;
    }
}

@media screen and (max-width: 650px) {

    #userForm {
        width: 100%;
    }

    #userForm .signupForm .form-group .form-field {
        width: 100%;
        min-width: 100%;
    }

    #header .profile-sec>a,
    #header .profile-sec .profile-wrap>a,
    #header .profile-sec .dropdown>li>a {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .dashboard-wrapper {
        grid-template-areas: "header"
            "content"
            " nav"
            "sider";
        grid-template-columns: 100%;
        grid-template-rows: 70px 1fr auto auto;

    }

    .dashboard-wrapper.full-width {
        grid-template-columns: 1fr;
    }

    .dashboard-wrapper main .myJobs-pg {
        padding: 15px;
    }

    .dashboard-wrapper main .titleSec,
    .dashboard-wrapper main .followers-pg .titleSec,
    .dashboard-wrapper main .followers-pg .titleSec .btn-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-wrapper main .followers-pg .titleSec .btn-group>div {
        margin-bottom: 10px;
    }

    .dashboard-wrapper main .titleSec h2,
    .dashboard-wrapper main .followers-pg .titleSec h2 {
        margin-bottom: 20px;
    }

    .logo img {
        width: 120px;
    }

    .dashboard-wrapper main,
    .dashboard-wrapper nav,
    .dashboard-wrapper aside {
        margin: 0px 10px 20px;
    }

    .dashboard-wrapper main {
        width: calc(100% - 20px);
    }

    .dashboard-wrapper main .formArea .three-col .input-group {
        flex-direction: column;
    }

    .followers-pg .white-wrap .cardwrap .card-body ul.per-detail {
        flex-direction: column;
    }

    .followers-pg .white-wrap .cardwrap .card-body ul.per-detail>li {
        margin-bottom: 20px;
    }

    .videoWrapper video {
        width: 100%;
        margin-top: 20px;
    }

    .videoWrapper {
        flex-direction: column;
    }

    .stickyWrapper .postWrap .form-group,
    .stickyWrapper .white-wrap .form-group {
        flex-direction: column;
    }

    .stickyWrapper {
        height: auto;
    }

    .stickyWrapper .postWrap .form-group select,
    .stickyWrapper .white-wrap .form-group select {
        width: 100%;
    }

    .followers-pg .cvWrapper .cv-formWrapper .input-group {
        flex-direction: column;
        align-items: flex-start;
    }
}


@media screen and (max-width: 480px) {
    .logo img {
        width: 110px;
    }

    #header .menuwrapper .toggleMenu {
        margin-left: 10px;
    }

    #header .menuwrapper .toggleMenu>span {
        display: none;
    }

    .dashboard-wrapper main .myJobs-pg .myjobscards ul li {
        margin-bottom: 10px;
    }
}