@charset "UTF-8";

/* Media Quiries */
@media only screen and (max-width:1920px) {}

@media only screen and (max-width:1680px) {}

@media only screen and (max-width:1440px) {
    .menuInner {
        width: 75%;
    }
}

@media only screen and (max-width:1366px) {}

@media only screen and (max-width:1280px) {
    .menuInner {
        width: 85%;
    }

    .card_head h4 {
        font-size: 20px;
    }

    .to_do_list_inner .card_head h4 label {
        left: 18% !important;
        font-size: 13px;
    }

    .pro-btn button {
        font-size: 12px;
        padding: 6px;
        min-width: 60px;
    }
}

@media only screen and (max-width : 1200px) {
    .to_do_list h3 {
        font-size: 16px;
    }

    /* .selectbox select {
        font-size: 14px;
    } */

    .to_do_list p {
        font-size: 12px;
        overflow-wrap: break-word
    }

    /* .to_do_list {
        padding-right: 0;
    } */

    #inprogressdetails .to_do_list a.NextBtn {
        margin-right: 0px;
        padding-right: 0px
    }

    .to_do_list a.startBtn {
        padding: 8px 10px;
    }

    .to_do_list_inner .card_head h4 label {
        padding-right: 40px;
    }
}

@media only screen and (max-width:1080px) {
    .menuInner {
        width: 100%;
    }

    .menuNavigation ul li {
        padding: 0 20px 0 0;
    }

    .to_do_list h3 {
        padding-right: 42px;
        overflow-wrap: break-word;
    }

    .to_do_list_inner .card_head h4 label {
        left: 24% !important;
    }

    .to_do_list a.startBtn {
        font-size: 14px;
    }
}

@media only screen and (max-width:1024px) {}

@media only screen and (max-width : 992px) {}

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

    .menuNavigation ul li {
        padding: 0 10px 0 0;
    }


}

@media only screen and (max-width : 899px) {
    .to_do_list_inner .card_head h4 label {
        font-size: 11px;
        padding-right: 40px;
    }

    .card_head h4 {
        font-size: 18px;
    }

    .topNav {
        position: relative;
    }

    .topusernav {
        margin-right: 50px;
    }

    .side-nav-toggler {
        position: absolute;
        bottom: 20px;
        right: 15px;
        background: transparent;
        border: none;
        display: block;
        width: 24px;
        height: 20px;
        transform: rotate(0deg);
        transition: .5s cubic-bezier(.25, .1, .23, 1);
        cursor: pointer;
        z-index: 999;
        outline: none;
    }

    .side-nav-toggler span {
        display: block;
        position: absolute;
        height: 2px;
        width: 100%;
        background: #fff;
        opacity: 1;
        transform: rotate(0deg);
        transition: .25s cubic-bezier(.25, .1, .23, 1);
        left: 0;
    }

    .side-nav-toggler span:first-of-type {
        top: 0px;
    }

    .side-nav-toggler span:nth-of-type(2),
    .side-nav-toggler span:nth-of-type(3) {
        top: 6px;
    }

    .side-nav-toggler span:nth-of-type(4) {
        top: 12px;
    }

    .side-nav-toggler:focus span,
    .side-nav-toggler:hover span {
        background-color: #fff;
    }

    .open.side-nav-toggler span:first-of-type,
    .open.side-nav-toggler span:nth-of-type(4) {
        top: 6px;
        width: 0;
        left: 50%;
    }

    .open.side-nav-toggler span:nth-of-type(2) {
        transform: rotate(45deg);
    }

    .open.side-nav-toggler span:nth-of-type(3) {
        transform: rotate(-45deg);
    }

    .menuNavigation {
        width: 260px;
        position: fixed;
        right: 0px;
        top: 150px;
        background: #0066a8;
        z-index: 101;
        transform: translateX(100%);
        transition: all .25s cubic-bezier(.25, .1, .23, 1);
        display: block;
        padding: 10px;
        overflow: auto;
        border-top: 0;
        margin-top: -1px;
    }

    .menuNavigation ul li {
        padding: 10px;
    }

    .menuNavigation-open {
        transform: translateX(0);
        right: 0;
    }

}

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

    .side-nav-toggler {
        bottom: -20px;
    }

    .topusernav {
        margin-right: 0;
    }

    .to_do_edit {
        width: 40px;
    }

    .to_do_edit a {
        width: 30px;
        height: 30px;
        margin-bottom: 5px;
    }

    .to_do_edit a img {
        width: 30px;
    }

    .selectbox select {
        font-size: 12px;
        height: auto;
        padding: 10px;
        white-space: normal
    }

}

@media only screen and (max-width:773px) {}

@media only screen and (max-width:768px) {
    .topNav {
        justify-content: flex-end;
    }

    .logoMain {
        width: 60%;
    }

    .topNav p {
        text-align: right;
        display: block;
    }

    .tableMain {
        padding-top: 0px;
    }

    .tableTitle .heading,
    .tableTitle .buttonDiv,
    .form-head .subhead,
    .form-head .buttonDiv {
        width: 50%;
    }

    .to_do_list_inner .card_head h4 label {
        font-size: 15px;
        padding: 5px 25px 5px 10px;
    }
}

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

@media only screen and (max-width:736px) {}

@media only screen and (max-width:731px) {}

@media only screen and (max-width:667px) {}

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

    /* .topusernav{padding: 10px 0;} */
    .topusernav li a {
        font-size: 15px;
    }


}

@media only screen and (max-width:600px) {}

@media only screen and (max-width:568px) {
    .topusernav li {
        padding: 0 10px;
    }

    .topusernav li a {
        font-size: 14px;
    }

}

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

    /* .topusernav li a span{display: none;} */
    /* .table-responsive{width: 100%;overflow-y:scroll;}
} */
    @media only screen and (max-width:480px) {
        .btn {
            min-width: inherit;
        }

        .formtablemain .container {
            padding: 0;
        }

        .tableTitle {
            padding: 10px 0;
        }

        .headerSec {
            display: block;
        }

        .logoMain {
            width: 100%
        }

        .navbrand {
            text-align: center
        }

        .navbrand img {
            width: 80%;
        }

        .topNav,
        .topusernav {
            display: block;
        }

        .topNav p {
            text-align: center
        }

        .logout a,
        .logout a span {
            text-align: center;
            width: 100%
        }

        ul.topusernav li a {
            display: block;
            width: 100%;
            text-align: center
        }

        ul.topusernav li a span {
            text-align: center;
            width: 100%
        }
    }

    @media only screen and (max-width:435px) {}

    @media only screen and (max-width:414px) {}

    @media only screen and (max-width:411px) {}

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

        .bodytopSec .heading {
            display: block;
        }
    }

    @media only screen and (max-width:375px) {}

    @media only screen and (max-width:360px) {}

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