/* XL Device :1200px. */

@media (min-width: 220px) and (max-width: 1400px) {

    .sidebar {
        width: 290px;
    }

    .main-content {
        padding: 20px;
    }


    .job-wrapper {
        padding-top: 14px;
    }


    .job-details-title-right p {
        font-size: 15px;
        margin-bottom: 5px;
    }


    .job-details-title-right h4 {
        font-size: 19px;
        line-height: 21px;
        margin-bottom: 4px;
    }








}

@media (min-width: 220px) and (max-width: 1200px) {
    .sidebar {
        position: fixed;
        left: -100%;
        opacity: 0;
        visibility: hidden;
        z-index: 10;
        background: #fff;
        top: 0;
        transition: .3s;
        height: 100vh;
    }

    .offcanvas-area {
        position: fixed;
        left: -100%;
        opacity: 0;
        visibility: hidden;
        z-index: 12;
        background: #fff;
        top: 0;
        transition: .3s;
        height: 100vh;
        width: 290px;
        border-right: 1px solid #ddd;
        padding: 55px 10px;
        padding-right: 0;
        display: block;
    }

    .sidebar.active, .offcanvas-area.active {
        left: 0;
        opacity: 1;
        visibility: visible;
    }

    .sidebar-open {
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        margin-left: 20px;
    }

    .sidebar-close,
    .offcanvas-close {
        display: block;
    }

    .header-links a.active {
        margin-bottom: 10px;
    }


    .sidebar-open {
        display: block;
    }



    .back-link a {
        font-size: 22px;
    }





}


/* LG Device :992px. */

@media (min-width: 320px) and (max-width: 991px) {
    .header {
        padding: 20px 4px;
    }

    .back-link a {
        font-size: 20px;
    }

    .header-links.d-flex {
        display: none !important;
    }

    .menu-open {
        display: block;
    }
}

@media (min-width: 320px) and (max-width: 767px) {
    .back-link a {
        font-size: 18px;
    }
    .host-name {
        padding-top: 17px;
        padding-bottom: 15px;
    }

    .application-status .form-select {
        margin-left: 0;
    }


    .application-status p {
        text-align: left;
    }

    .job-report-wrapper>* {
        margin-bottom: 3px;
    }

    .header {
        padding: 15px 3px;
    }

    .header-logo a img {
        max-width: 130px;
    }

    .header-logo p {
        display: none;
    }

    .job-btn a {
        padding: 10px 18px;
        padding-left: 12px;
        font-size: 15px;
        line-height: 20px;
    }


}

@media (min-width: 320px) and (max-width: 575px) {

    .job-item {
        align-items: flex-start;
        flex-direction: column;
    }


    .job-item-icon {
        flex: 0 0 auto;
        margin-right: 20px;
        margin-bottom: 19px;
    }

    .job-item-right {
        flex-direction: column;
        align-items: flex-start;
    }

    .job-btn {
        flex: 0 0 auto;
        margin-left: 0;
        margin-top: 14px;
    }

    .p {
        font-size: 15px;
        line-height: 20px;
    }



}


/* MD Device :768px. */

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

    .data__protaction__box__wrapper {
        margin: 0 auto;
        margin-top: 35px;
    }

    .vault__logo img {
        height: 60px;
    }

    .welcome__text h4 {
        font-size: 30px;
        margin-top: 43px;
    }

    .signin__form>h4 {
        font-size: 28px;
    }

    .vault__left__inner__blk {
        max-width: 366px;
        margin: 0 auto;
    }

    .check__main__blk {
        overflow: hidden;
    }

    .vault__left__wrap {
        overflow: hidden;
    }

    .click__to__hide {
        display: none;
    }
}


/* SM Small Device :320px. */

@media only screen and (min-width: 320px) and (max-width: 767px) {

    .data__protaction__box__wrapper {
        margin: 0 auto;
        margin-top: 35px;
    }

    .vault__logo img {
        height: 60px;
    }

    .welcome__text h4 {
        font-size: 30px;
        margin-top: 43px;
    }

    .signin__form>h4 {
        font-size: 28px;
    }

    .vault__left__inner__blk {
        max-width: 366px;
        margin: 0 auto;
    }

    .single__input__blk input {
        width: 100%;
    }




    .click__to__hide {
        display: none;
    }

    .add__new__pass__wrap {
        flex-direction: column;
    }

    .add__new__pass__wrap h4 {
        flex: 0 0 auto;
        text-align: left;
        width: 100%;
        margin: 0;
        margin-bottom: 8px;
        font-size: 18px;
    }

    .add__new__pass__wrap input {
        width: 100%;
    }

    .add__new__pass__wrap .single__input__blk {
        width: 100%;
    }

    .add__new__pass__bottom__list {
        max-width: 100%;
    }

    .check__main__blk>p {
        font-size: 24px;
        margin-bottom: 20px !important;
    }

    .check__main__blk h6 {
        font-size: 20px;
    }

    .check__main__blk h6 span {
        font-size: 14px;
    }

    .error__content p {
        font-size: 15px;
        display: flex;
        justify-content: center;
        line-height: 22px;
    }

    .vault__area .col-lg-12 .check__main__blk>p {
        font-size: 20px;
        line-height: 32px;
    }

    .verify__code input {
        width: 41px;
        height: 55px;
        border-radius: 10px;
        margin: 0 8px;
        padding: 6px;
        font-size: 18px;
    }

    .verify__code {
        margin-top: 50px;
    }

    .verify__code~.signin__button {
        margin-top: 100px;
    }

    .check__main__blk {
        overflow: hidden;
    }

    .vault__left__wrap {
        overflow: hidden;
    }

    .add__new__pass~.signin__button {
        margin-top: 50px;
    }

    .mobile__top__space__control {
        padding-top: 15px !important;
    }
}


/* SM Small Device :550px. */

@media only screen and (min-width: 320px) and (max-width: 576px) {
    .vault__left__inner__blk {
        max-width: 100%;
        margin: 0 auto;
    }

    .vault__logo img {
        height: 36px;
    }

    .back__btn {
        top: 15px;
        left: 15px;
    }

    .vault__area {
        padding-top: 79px;
    }

    .data__protaction__content__blk h4 {
        font-size: 27px;
        line-height: 39px;
    }

    .data__protaction__box__wrapper p {
        font-size: 16px;
        line-height: 29px;
    }

    .vault__logo p {
        font-size: 14px;
        line-height: 42px;
        margin-top: 10px;
    }

    .cros__bottom__content p {
        font-size: 20px;
        line-height: 31px;
    }

    .verify__page__blk .view__terms__content a {
        font-size: 22px;
        line-height: 42px;
    }

    .check__ico img {
        height: 123px;
    }
}