/* Full HD - TV Layout: 2560px. */
/* Full HD - Small TV Layout: 2000px. */
/* HD Layout: 1920px. */
/* Laptop with HDPI: 1440px */
/* Normal PC: 1366px */
@media only screen and (min-width: 1301px) and (max-width: 1399px) {
    body {
        font-size: 15px;
    }

    .fs-12 {
        font-size: 11.25px;
    }

    .fs-14 {
        font-size: 13.125px;
    }

    .fs-15 {
        font-size: 14.0625px;
    }

    .fs-16 {
        font-size: 15px;
    }

    .fs-18 {
        font-size: 16.875px;
    }

    .fs-20 {
        font-size: 18.75px;
    }

    .fs-24 {
        font-size: 22.5px;
    }
}
/* Laptop with MDPI: 1280px */
/* Medium Layout: 1080px. */
/* Medium Layout(iPad Pro): 1024px. */
/* Tablet Layout: 768px. */
@media only screen and (max-width: 991px) {
    html,
body {
        overflow-x: hidden;
    }

    .w-xs-35 {
        width: 35%;
    }

    .w-xs-40 {
        width: 40%;
    }

    .fs-xs-11 {
        font-size: 11px;
    }

    .fs-xs-12 {
        font-size: 12px;
    }

    .lh-xs-20 {
        line-height: 20px;
    }

    .lh-xs-24 {
        line-height: 24px;
    }

    .common-padding {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .common-padding-top {
        padding-top: 20px;
    }

    .common-padding-bottom {
        padding-bottom: 20px;
    }

    .d-xs-none {
        display: none !important;
    }

    .d-xs-block {
        display: block !important;
    }

    .d-xs-flex {
        display: flex !important;
    }

    .d-xs-inline {
        display: inline !important;
    }

    .flex-xs-column-reverse {
        flex-direction: column-reverse !important;
    }

    .justify-content-xs-between {
        justify-content: space-between !important;
    }

    .justify-content-xs-start {
        justify-content: flex-start !important;
    }

    .sidebar-area {
        position: fixed;
        top: 0;
        left: -300px;
        width: 300px;
        height: 100%;
        transition: 0.3s;
        z-index: 2000;
    }

    .sidebar-area.active {
        left: 0;
    }

    .col-content {
        width: 100%;
    }

    .breadcrumb-option-bar .text-end {
        text-align: left !important;
    }

    .page-content-area {
        margin-top: 10px;
    }

    .breadcrumb-buttons {
        justify-content: flex-start !important;
        flex-direction: column;
    }

    .breadcrumb-buttons a, .breadcrumb-buttons button {
        margin-left: 0 !important;
        margin-bottom: 5px;
    }

    .col-content {
        padding: 15px;
        padding-top: 20px;
    }

    .single-task-group-area {
        margin-right: 15px;
    }

    .form-info-area,
.task-info-area {
        padding: 15px;
    }

    .team-content {
        width: 90%;
    }

    .team-person-list {
        width: 98%;
    }

    .notification-area {
        width: 100%;
    }

    .notification-buttons {
        justify-content: flex-start !important;
        flex-wrap: wrap;
    }

    .notification-buttons a, .notification-buttons button {
        margin-left: 0 !important;
        margin-right: 15px !important;
        margin-bottom: 5px;
    }
}
/* Mobile Layout: 375px. */
@media only screen and (max-width: 767px) {
    .task-record-label-title {
        width: 100%;
    }

    .task-record-title {
        width: calc(100% - 120px);
    }

    .task-record-date-link {
        width: 100%;
        justify-content: space-between;
        margin-top: 10px;
    }

    .single-attachment,
.task-comment-attachment-add-area .single-attachment {
        width: calc(40% - 25px);
    }

    .team-person {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .team-person > span {
        width: 100% !important;
    }

    .team-person > span.action {
        justify-content: space-between !important;
        margin-top: 10px;
    }

    .team-person > span.action .select2 {
        width: 100% !important;
    }
}
/* Wide Mobile Layout(Nexus 7): 600px. */
/* Wide Mobile Layout: 480px. */
@media only screen and (max-width: 500px) {
    .d-xss-none {
        display: none !important;
    }

    .d-xss-flex {
        display: flex !important;
    }

    .login-box {
        width: 100%;
    }

    .team-content,
.team-person-list {
        width: 100%;
    }

    .notification-buttons {
        flex-direction: column;
    }

    .notification-buttons a, .notification-buttons button {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 5px;
    }
}
/* Mobile Layout(Pixel 2): 480px. */
/* Mobile Layout(iPhone 6): 400px. */
@media only screen and (max-width: 400px) {
    .fs-xss-16 {
        font-size: 16px;
    }

    .fs-xss-17 {
        font-size: 17px;
    }

    .lh-xss-20 {
        line-height: 20px;
    }

    .lh-xss-27 {
        line-height: 27px;
    }
}
/* Mobile Layout(Samsung Galaxy S5): 360px. */
/* Mobile Layout(iPhone 4): 320px. */