@charset "utf-8";
/* CSS Document */
@media screen and (max-width: 1920px) {
    /*.pagewrap {
		width: 79%;
	}*/
    #myModal .modal-content {
        height: 900px;
    }
}

@media screen and (max-width: 1600px) {
    #myModal .modal-content {
        height: 800px;
    }
    .bootstrap-select .btn {
        width: 97% !important;
    }
    .bigTextArea {
        width: 100%;
    }
    .logo_360 {
        width: 20%;
        margin-left: 30%;
    }
}

@media screen and (max-width: 1366px) {
    #myModal .modal-content {
        height: 668px;
    }

    
    /*.sidebar a, .dropdown-btn {
    padding: 8px 8px 8px 15px;
    font-size: 12px;
    width: 90%;
}*/
    .colF {
        display: inline-block;
        width: 20%;
        margin-right: 4%;
        text-align: left;
        padding: 0;
    }

    .searchbox {
        width: 98%;
    }
}

@media screen and (max-width: 1280px) {
    /*.pagewrap {
		width: 79%;
	}*/
    #myModal .modal-content {
        height: 550px;
    }
    .custom-table-Responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
    }
    .table-column-sm {
        width: 80px;
    }
    .table-column-md {
        width: 110px;
    }
}
/************************************************************************************
smaller than 980
*************************************************************************************/


@media screen and (max-width: 1024px) {
    /*.pagewrap {
		width: 79%;
	}*/
    #myModal .modal-content {
        height: 668px;
    }

    #header {
        height: auto;
        width: 100%;
    }

    .logo_360 {
        margin-left: 20%;
        width: 28%;
    }

    .colF {
        display: inline-block;
        width: 19%;
        margin-right: 5%;
        text-align: left;
        padding: 0;
    }

    .orderRow {
        width: 70%;
    }

    .PODetailsL {
        width: 95%;
    }

    .PODetailsR {
        width: 95%;
    }
    .InputContainerL .custom-select {
        width: 87%;
    }

    .InputContainerR .custom-select {
        width: 87%;
    }
    .form-control {
        width: 96%;
    }
    .bootstrap-select .btn {
        width: 91% !important;
    }
    .orderContainer {
        width: 98% !important;
    }
   }

/************************************************************************************
smaller than 768
*************************************************************************************/
@media (min-width: 768px) {
    .col-sm-12 {
        padding-right: 0;
        padding-left: 0;
    }
    
}



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


    .logo_247 {
        width: 21%;
        /*height: 80px;*/
    }

    .logo_360 {
        width: 32%;
        /*height: 80px;*/
        margin-left: 13%;
    }

    .staywarmLogo {
        width: 27%;
        /*height: 80px;*/
        margin-left: 5%;
    }

    .float-r {
        width: 25%;
    }

    .openbtn {
        margin-top: 10px;
    }
    /*.sidebar a, .dropdown-btn {
    padding: 8px 8px 8px 8px;
    font-size: 10px;
    text-align: center;
}
.sidebar span {
    margin-right: 0;
    display: block;
    width: 100%;
    height: 20px;
	margin-bottom:5px;
}
.fa-caret-down {
    float: right;
    padding-right: 0px;
    margin-top: -5px;
}
.sidebar em {
    color: #ccc;
    padding-left: 4px;
	font-size:10px;
}*/
    .rowL {
        width: 100%;
        margin-right: 0;
    }

    .rowR {
        width: 100%;
    }

    .rowF {
        width: 100%;
    }

    .colF {
        margin-right: 6%;
        width: 42%;
        margin-bottom: 10px;
    }

    .float-r {
        width: 100%;
    }

    .custom-select {
        width: 91%;
    }

    .formBox {
        overflow: scroll;
    }

    .searchbox {
        width: 90%;
        padding: 0 5% 0 14%;
    }

    .modal-content {
        width: 80%;
    }

        .modal-content .custom-select {
            width: 91%;
        }
    
    .orderRow {
        width: 100%;
    }
    .InputContainerL {
        width: 100%;
        margin-right:0;
    }
    .InputContainerR {
        width: 100%;
    }
    .InputContainerL .custom-select {
        width: 91%;
    }

    .InputContainerR .custom-select {
        width: 91%;
    }
    .form-control {
        width: 94%;
    }
    .bigTextArea {
        width: 95%;
    }
    .orderContainer {
        width: 100% !important;
    }
    .topSearch1 {
        display:none;
    }
    .headerRow {
        width: 100%;
        display: block;
    }
    .topSearchMob {
        float: left;
        margin: 7px;
        margin-top: 0px;
        display: block;
        width: 100%;
    }
    /*#header {
         background:none; 
         border-bottom: 0; 
         box-shadow:none; 
    }*/
    .accountControl {
        padding-top: 24px;
        float: right;
    }
    .bigInput {
        display: inline-block;
        width: 83%;
        height: 38px;
    }
    .topSearchMob .btn-sm {
        padding: 0.35rem 0.5rem;
    }
}

@media screen and (max-width: 540px) {
    .headerRow {
        width: 98%;
    }
    .topSearchMob {
        position: relative;
        bottom: 10px;
    }
}
    /************************************************************************************
smaller than 560
*************************************************************************************/
    @media screen and (max-width: 480px) {

        body {
            font-size: 12px;
        }
        /*.sidebar {padding-top: 15px;}
.sidebar .closebtn {
    top: -11px;
    right: -5px;
    font-size: 25px;
}
.sidebar a, .dropdown-btn {
    padding: 4px;
    font-size: 9px;
    text-align: center;
}
.dropdown-container {
    padding-left: 0px;
}
.fa-caret-down {font-size:10px !important; margin-top:0;}*/
        h2 {
            font-size: 20px;
        }

        .float-r {
            float: left;
            width: 100%;
        }

        .pagewrap {
            width: 95%;
        }

        .pagewrap2 {
            width: 90%;
        }

        .openbtn {
            margin: 10px 0 20px 22px;
            padding: 5px 8px;
        }

        #header {
            height: auto;
            width: 100%;
        }

        .main {
            padding: 20px 0;
            min-height: 100px;
        }

        .colF {
            width: 90%;
            margin-right: 0%;
        }

        .rowL {
            width: 100%;
            margin-right: 0;
            ;
        }

        .rowR {
            width: 100%;
        }

        .rowF {
            width: 100%;
        }

        .label {
            font-size: 11px;
        }
        /*.smallSelect {
    width: 100%;
    height: 40px;
    padding: 0 10px;
}*/
        .smallInput {
            width: 65%;
        }

        .smallSelect {
            height: 38px;
        }

        .custom-select {
            width: 88%;
        }

        .searchbox {
            width: 88%;
            padding: 0 5% 0 14%;
        }

        .Btn {
            /*width: 94%;
        height: 40px;*/
        }

        .BtnB {
            width: 100%;
            height: 40px;
        }

            .BtnB i {
                width: 48px;
                height: 20px;
                padding: 10px 0;
            }

            .BtnB span {
                padding: 10px 0;
                display: block;
            }

        .fa-mobile-phone {
            padding-top: 6px !important;
            height: 24px !important;
        }

        .login_cont {
            margin: 50px auto;
            width: 90%;
        }

        .login {
            width: 90%;
            padding: 20px 5%;
        }

        .logo_247 {
            width: 18%;
            /*height: 40px;*/
        }

        .logo_360 {
            width: 42%;
            /*height: 40px;*/
            margin-left: 20%;
        }

        .staywarmLogo {
            width: 25%;
            /*height: 40px;*/
            margin-left: 2%;
        }

        .BtnNew {
            width: 100%;
            padding: 0;
        }

        .form-control-sm {
            height: 26px;
            margin-left: 12px;
        }
        /*.BtnEdit {
    width: 31px;
    height: 24px;
    border-radius: 6px;
    background-color:#090;
    color: #fff;
    font-family: Montserrat;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    border: 0;
    padding: 0 3px;
}
.BtnDelete {
    width: 31px;
    height: 24px;
    border-radius: 6px;
    background-color:#C00;
    color: #fff;
    font-family: Montserrat;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    border: 0;
    padding: 0 3px;
	margin-top:5px;
}*/

        ul.tabs {
            border-left: 1px #86b3f4 solid;
        }

            ul.tabs li {
                width: 100%;
                background: #4b89e2;
                border: 1px #86b3f4 solid;
                border-left: 1px #86b3f4 solid;
            }

                ul.tabs li a {
                    color: #fff;
                }

                    ul.tabs li a:hover {
                        background: #86b3f4;
                        color: #fff;
                    }

        html ul.tabs li.active a { /*--Makes sure that the active tab does not listen to the hover properties--*/
            background: #86b3f4;
            border-bottom: 1px #fff solid; /*--Makes the active tab look like it's connected with its content--*/
            color: #fff;
        }

        ul.tabs li:nth-child(1) {
            border-radius: 12px 12px 0 0;
        }

        ul.tabs li:nth-child(3) {
            border-radius: 0 0 0 0;
        }

        .tab_container {
            margin-top: 80px;
            border-radius: 0 0 12px 12px;
            border: 1px #86b3f4 solid;
            overflow: scroll;
        }

        .modal-content {
            width: 80%;
        }

            .modal-content .custom-select {
                width: 88%;
            }

        .orderRow {
            width: 100%;
        }

        .InputContainerL .custom-select {
            width: 80%;
        }

        .InputContainerR .custom-select {
            width: 80%;
        }

        .form-control {
            width: 92%;
        }

        .bootstrap-select .btn {
            width: 87% !important;
        }

        div.dataTables_wrapper div.dataTables_length, div.dataTables_wrapper div.dataTables_filter {
            text-align: left !important;
        }

        .mobileBtn {
            width: 94%;
        }

        .topSearch1 {
            padding-top: 4px;
        }

        .topSearch {
            flex-direction: column;
        }

            .topSearch a {
                margin-bottom: 7px;
            }

        .form-control {
            width: 92% !important;
        }

        .POSystemWidth {
            width: 100% !important;
        }
        .accountControl {
            padding-top: 15px;
            float: right;
        }
        .bigInput {
            display: inline-block;
            width: 76%;
            height: 38px;
        }
    }

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

        .label {
            font-size: 10px;
        }

        .custom-select {
            width: 85%;
        }

        .makeOrderHeader {
            width: 100%;
        }

        .makeOrderButtonContainer {
            width: 100%;
            text-align: left;
        }
        .bigInput {
            display: inline-block;
            width: 73%;
            height: 38px;
        }
    }

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

        .BtnEdit {
            width: 30px;
            height: 28px;
            border-radius: 3px;
            padding: 0 2px;
            font-size: 8px;
        }

        .BtnDelete {
            width: 30px;
            height: 28px;
            border-radius: 3px;
            padding: 0 2px;
            font-size: 8px;
        }

        .custom-select {
            width: 80%;
        }
        .bigInput {
            display: inline-block;
            width: 70%;
            height: 38px;
        }
        div.dataTables_wrapper div.dataTables_filter input {
            width: 83% !important;
        }
    }

    @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {

        /* Force table to not be like tables anymore */
        table, thead, tbody, th, td, tr {
            display: block;
        }

            /* Hide table headers (but not display: none;, for accessibility) */
            thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

        tr {
            margin: 0 0 1rem 0;
            background: #eee;
        }

            tr:nth-child(odd) {
                background: #ccc;
            }

        td {
            /* Behave  like a "row" */
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding: 8px 0 8px 50% !important;
            min-height: 14px;
        }

            td:before {
                /* Now like a table header */
                position: absolute;
                /* Top/left values mimic padding */
                top: 8px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
                font-weight: 700;
            }

        table.table-bordered.dataTable {
            border-left-width: 0;
        }

            table.table-bordered.dataTable th, table.table-bordered.dataTable td {
                border-left-width: 1px;
            }

        .rowFull div {
            width: 50%
        }

        .rowH {
            width: 100% !important;
            margin-right: 0px;
        }

        
        /*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/

        /* ResTable */
        .resTable td:nth-of-type(1):before {
            content: "PO Number";
        }

        .resTable td:nth-of-type(2):before {
            content: "Supplier";
        }

        .resTable td:nth-of-type(3):before {
            content: "Company";
        }

        .resTable td:nth-of-type(4):before {
            content: "PO Date";
        }

        .resTable td:nth-of-type(5):before {
            content: "Amount";
        }

        .resTable td:nth-of-type(6):before {
            content: "Raised By";
        }

        .resTable td:nth-of-type(7):before {
            content: "Approved By";
        }

        .resTable td:nth-of-type(8):before {
            content: "Order Number";
        }

        .resTable td:nth-of-type(9):before {
            content: "Order Date";
        }

        .resTable td:nth-of-type(10):before {
            content: "Status";
        }

        .resTable td:nth-of-type(11):before {
            content: "Attachment Added";
        }

        .resTable td:nth-of-type(12):before {
            content: "Action";
        }
        .resTable .btn {
            padding: 0.205rem 0.45rem !important;
            font-size: 0.5rem !important;
        }

        /**/

        /* General History */
        .hisTable td:nth-of-type(1):before {
            content: "Notes";
        }

        .hisTable td:nth-of-type(2):before {
            content: "Created Date";
        }
        a.hisPdf {
            float: none;
            margin-top:10px!important;
        }
        .hisTable .table-bordered {
            border: 0;
        }
    }