/********************
    Responsive CSS
********************/

/*For Extra Large Screen*/
@media (max-width:1462px) {
}

@media (min-width:992px) {
    .page-wrapper.hrm-wrapper {
        margin-left: 275px !important
    }

    .modal-open .modal.custom-modal {
        top: 60px !important;
        left: 270px !important
    }

}

@media screen and (max-width:1426px) and (min-width:1200px) {
    .custom-dash-widget-icon {
        left: 9px !important;
    }

    .custom-mail-tab {
        padding: 8px !important;
    }

    .pl-lg-20 {
        padding-left: 20px !important;
    }

}

@media screen and (max-width:1600px) and (min-width:1000px) {
    .dashboard-custom .card-box {
        margin: 0px !important;
        margin-bottom: 50px !important;
    }

}

@media screen and (max-width:1350px) and (min-width:1200px) {
    .custom-screen-break {
        width: 100% !important;
    }

}

@media screen and (max-width:1400px) {
    .col-md-custom-3 {
        width: 30%
    }

    .col-md-custom-7 {
        width: 70%
    }

}

@media (max-width:1024px) {
    .slide-nav-toggle .sidebar {
        margin-left: 0px !important;
    }

    .custom-sidebar:hover {
        left: 0px !important;
    }

}

/*For Large Screen*/
@media (min-width:768px) {
    .narow-rap {
        table-layout: fixed;
    }

}

@media only screen and (max-width:991px) {
    .profile-info-left {
        border-bottom: none !important;
        margin-bottom: 20px;
    }

    .header-wrapper {
        flex-flow: column;
        text-align: center !important;
        margin-bottom: 0;
        justify-content: center;
    }

    .header-wrapper .col {
        margin-bottom: 10px;
        width: 100%
    }

    .header-field-wrapper {
        justify-content: center;
        width: 100%;
    }

    .header-field-wrapper .form-control {
        height: 35px;
    }
    .header-field-wrapper .ess-group i.fa {
        top: 10px;
    }
    .header-field-wrapper .btn-ess:active, .header-field-wrapper .btn-ess:focus, .header-field-wrapper .btn-ess {
        font-size: 14px;
        height: 35px;
    }
    .header-field-wrapper .select2-container .select2-selection--single {
        height: 35px !important;
    }
    .header-field::placeholder, .header-select2 .select2-selection__rendered {
        line-height: 32px !important;
    }
    .select2-selection__arrow {
        height: 34px !important;
    }
    .header-col {
        width: 100%;
    }

    ol.custom-breadcrumb {
        text-align: center !important;
    }

    .col-md-custom-3 {
        width: 100%;
        display: flex;
    }

    .col-md-custom-3 .card-box {
        width: 50%;
        margin-right: 10px;
    }

    .summary-detail {
        width: 30%;
    }

    .summary-detail ul li {
        margin-top: 0;
        margin-bottom: 8px;
    }

    .col-md-custom-7 {
        width: 100%
    }

    .page-wrapper {
        margin-left: 0 !important;
    }

}

@media (max-width:990px) {
    .custom-wizard ul.anchor li a {
        width: 100% !important;
        border-radius: 0px !important;
        border: 1px solid #ddd !important;
    }

    ul.custom-wizard-menu li {
        padding: 0px !important;
        width: 33.33% !important;
        margin-bottom: 5px !important;
    }

    .custom-wizard ul.anchor li a .stepDesc {
        float: none !important;
        text-align: center !important;
    }

    .custom-wizard ul.anchor {
        padding: 0px 10px !important;
    }

    .custom-sidebar {
        margin-left: -312px !important;
    }

    .project-members ul li span {
        display: block;
        text-align: left;
        width: 100%;
    } 
    .page-wrapper>.content {
        padding: 15px 30px 30px;
    }
    .header-wrapper{
        margin-bottom: 10px;
    }
}

/*For Large Screen*/
@media (max-width:768px) {
    ul.master-menu-list li {
        width: 10%;
    }

    .custom-sidebar {
        margin-left: -312px !important;
        width: 310px !important;
    }

    .plr-sm-15 {
        padding: 0px 15px;
    }

    .hrm-wrapper ul.custom-navpills {
        padding: 0px !important;
    }

    .hrm-wrapper ul.custom-navpills li {
        width: 50% !important;
        margin-top: 0px;
        text-align: center;
    }

    .hrm-wrapper ul.custom-navpills li a {
        border-left: none !important;
    }

    .hrm-wrapper ul.custom-navpills li a:hover {
        opacity: 1;
    }

    .table-responsive {
        padding: 0px;
        border: none !important
    }

    .text-sm-center {
        text-align: center;
    }

    .float-md-left-sm-center {
        text-align: center !important;
    }

    .float-md-right-sm-center {
        float: none;
        margin-bottom: 10px;
    }

    .text-sm-left {
        text-align: left !important;
    }

    .page-wrapper > .content {
        padding-top: 15px !important;
    }

    .btn-xs-master {
        width: 30% !important;
        display: inline-block !important;
        margin-top: 0px !important;
        margin-bottom: 30px !important;
    }

    .btn-xs-sub-master {
        width: 49%;
        display: inline-block;
        margin-top: 0px !important;
        margin-bottom: 30px !important;
    }

    .active-master-button:after,
    .active-master-button:before,
    .active-sub-master-button:after,
    .active-sub-master-button:before {
        top: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .active-master-button:after,
    .active-sub-master-button:after {
        border-color: rgba(136, 183, 213, 0);
        border-top-color: inherit;
        border-width: 17.05px;
        margin-left: -15px;
    }

    #action_area .panel.panel-default {
        max-width: 100% !important;
    }

    ul.custom-wizard-menu li {
        width: 50% !important;
    }

    .profile-nav {
        background-color: transparent !important;
        border: none !important;
    }

    .profile-nav > li {
        width: 33%;
        padding: 0 10px;
    }

    .profile-nav > li > a {
        width: 100%;
    }

    .nav-tabs > li:first-child {
        padding-left: 0px !important
    }

    .nav-tabs > li:last-child {
        padding-right: 0px !important
    }

}

/*For Small Screen*/
@media only screen and (max-width:550px) {
    .header-field-wrapper {
        flex-direction: column;
    }

    .header-col {
        margin-top: 10px !important
    }

    .profile-nav > li {
        width: 100%;
        padding: 0 !important;
        margin-bottom: 5px;
    }

    .col-md-custom-3 {
        display: block;
    }

    .col-md-custom-3 .card-box {
        width: 100%;
        margin-right: 0;
    }

    .summary-detail {
        width: 100%;
    }

    .summary-detail ul li {
        margin-top: 8px;
        margin-bottom: 0px;
    }
    .leave-application li{
        width: 50%;
        margin: 0 !important;
    }
    .leave-application li a{
        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
}

}

@media only screen and (max-width:480px) {
    .profile-img-wrap img {
        height: auto;
    }
}
@media only screen and (max-width:448px) {
    .dashboard-custom {
        padding-top: 0px !important;
    }

    .custom-dash-widget-icon {
        border-radius: 0 !important;
        height: 60px !important;
        line-height: 60px !important;
        width: 60px !important;
        position: inherit !important;
    }

    .dashboard-custom .card-box {
        margin: 20px 15px !important
    }

    .plr-sm-15 {
        padding: 0px 15px;
    }

    .table-responsive {
        padding: 0px;
        border: none !important
    }

    .text-sm-center {
        text-align: center;
    }

    .float-md-left-sm-center {
        text-align: center !important;
    }

    .float-md-right-sm-center {
        float: none;
        margin-bottom: 10px;
    }

    .modal-sm-full-width {
        width: 100% !important;
    }

    .text-sm-left {
        text-align: left !important;
    }

    .margin-sm-5 {
        margin: 5px;
    }
    .page-wrapper>.content {
        padding: 15px 10px 30px !important;
    }

    .btn-xs-master {
        width: 30% !important;
        display: inline-block !important;
        margin-top: 0px !important;
        margin-bottom: 30px !important;
    }

    .btn-xs-sub-master {
        width: 49%;
        display: inline-block;
        margin-top: 0px !important;
        margin-bottom: 30px !important;
    }

    .active-master-button:after,
    .active-master-button:before,
    .active-sub-master-button:after,
    .active-sub-master-button:before {
        top: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .active-master-button:after,
    .active-sub-master-button:after {
        border-color: rgba(136, 183, 213, 0);
        border-top-color: inherit;
        border-width: 17.05px;
        margin-left: -15px;
    }

    ul.custom-wizard-menu li {
        width: 100% !important;
    }

    .custom-sidebar {
        width: 310px !important;
    }

    ul.master-menu-list {
        padding-left: 0px;
    }

    ul.master-menu-list li {
        margin: 0px !important;
        width: 49% !important;
        margin-bottom: 15px !important;
    }

    .custom-modal .modal-content.modal-lg {
        width: 100% !important;
    }

}

/*FOr Extra Small Screen*/
@media only screen and (max-width:320px) {
    .custom-sidebar {
        width: 310px !important;
    }

    .custom-dash-widget-icon {
        border-radius: 0 !important;
        height: 60px !important;
        line-height: 60px !important;
        width: 60px !important;
        position: inherit !important;
    }

    .plr-sm-15 {
        padding: 0px 15px;
    }

    .table-responsive {
        padding: 0px;
        border: none !important
    }

    .text-sm-center {
        text-align: center;
    }

    .float-md-right-sm-center {
        float: none;
        margin-bottom: 10px;
    }

    .modal-sm-full-width {
        width: 100% !important;
    }

    .text-sm-left {
        text-align: left !important;
    }

    .margin-sm-5 {
        margin: 5px;
    }

    .page-wrapper > .content {
        padding-top: 30px !important;
    }

    .btn-xs-master {
        width: 30% !important;
        display: inline-block !important;
        margin-top: 0px !important;
        margin-bottom: 30px !important;
    }

    .active-master-button:after,
    .active-master-button:before,
    .active-sub-master-button:after,
    .active-sub-master-button:before {
        top: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .active-master-button:after,
    .active-sub-master-button:after {
        border-color: rgba(136, 183, 213, 0);
        border-top-color: inherit;
        border-width: 17.05px;
        margin-left: -15px;
    }

    ul.master-menu-list {
        padding-left: 0px;
    }

    ul.master-menu-list li {
        margin: 0px !important;
        width: 49% !important;
        margin-bottom: 15px;
    }

    ul.master-menu-list li h5 {
        margin-bottom: 15px !important;
    }

    .custom-modal .modal-content.modal-lg {
        width: 100% !important;
    }

}

@media screen and (max-width: 768px){
    .custom-sidebar .sidebar-menu > ul > li > a {
        display: block;
        text-align: left;
        min-height: inherit;
    }

    .custom-sidebar .sidebar-menu > ul > li > a{
        padding: 6px 10px !important;
    }

    .sidebar-icon {
        max-height: 30px;
        margin-right: 10px;
        margin-bottom: 0;
    }
    .sidebar-menu > ul > li + li {
        margin-top: 10px;
    }
    .text-xs-center{
        text-align: center !important;
    }
    .float-xs-none{
        float: none !important;
    }
    .slide-nav-toggle .page-wrapper {
        left: 0 !important;
    }
    .header-wrapper {
        margin-bottom: 0;
        padding: 0 15px;
    }
    .card-box {
        padding: 15px;
    }
}

@media screen and (max-width: 600px){
    .login-wrapper {
        height: inherit;
        display: block;
        padding: 40px 0 0;
    }
    .login-wrapper .account-box .login-heading h4 {
        font-size: 22px;
    }
    .login-wrapper .account-wrapper {
        padding: 60px 15px;
    }
}