@charset "utf-8";
/* CSS Document */

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


}
@media screen and (max-width: 1366px) {
	.logo_360 {
	margin-left:72%;
}
/*.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%;
}
}

/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 1024px) {
    .formBox {
        overflow: scroll;
        width: 95%;
    }
		#header {
    height: auto;
    width: 100%;
}
    .logo_360 {
        margin-left: 72%;
        width: 28%;
    }
        .logo_360 img {
            height: auto;
            margin-left: -10rem;
        }
.colF {
    display: inline-block;
    width: 19%;
    margin-right: 5%;
    text-align: left;
    padding: 0;
}
    .topData {
        width: 96%;
    }

}

/************************************************************************************
smaller than 768
*************************************************************************************/
@media (min-width: 768px){
    #ABBR, #PriorityLabel, #datepicker {
        width: 25%;
        margin-left: 15px;
    }
.col-sm-12 {
   padding-right:0;
    padding-left:0;
}
    #lbl {
        width: 20%;
    }
    .rowF {
        display: inline-block;
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
        margin-right: 0;
        margin-left: 0;
    }
    .modal-header h4{
        font-size:18px;
    }
}



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

    #header {
        height: auto;
        width: 100%;
    }
    .rowF {
        display: inline-block;
        width: 100%;
        text-align: left;
        margin-bottom: 10px;
        margin-right: 0;
        margin-left: 0;
    }

.logo_247 {
    width: 21%;
    height: 80px;
}
.logo_360 {
    width: 32%;
    /*height: 80px;*/
	margin-left: 65%;
}
.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;
        width: 95%;
    }
.searchbox {
    width: 90%;
    padding: 0 5% 0 14%;
}
    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: 200px;
        border-radius: 0 0 12px 12px;
        border: 1px #86b3f4 solid;
        overflow: scroll;
    }
    .form-control {
        width: 90%;
        margin-bottom:7px;
    }
        .modal-content {
    width: 60%;
}
.modal-content .custom-select {
    width: 91%;
}
    .autho-1 {
        max-width: 90% !important;
        flex: 0 0 90% !important;
    }

    .autho-3 {
        max-width: 90% !important;
        flex: 0 0 90% !important;
    }

    .autho-5 {
        max-width: 90% !important;
        flex: 0 0 90% !important;
    }

}

@media screen and (max-width: 540px) {
    .logo_360 {
        margin-left: 50%;
    }

}


    /************************************************************************************
smaller than 560
*************************************************************************************/
    @media screen and (max-width: 480px) {
        #ABBR, #PriorityLabel, #datepicker {
            width: 50%;
            margin-left: 15px;
        }

        #PLabelID {
            width: 15%;
        }
        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: 5px;
            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: 32%;
            /*height: 40px;*/
            margin-left: 52%;
        }

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

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

        .form-control-sm {
            height: 22px;
        }
        /*.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 {
            border-radius: 0 0 12px 12px;
            border: 1px #86b3f4 solid;
            overflow: scroll;
        }

        .modal-content {
            width: 80%;
            max-height: 600px;
            overflow-y: scroll;
        }

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

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

        .label {
            font-size: 10px;
        }

        textarea.form-control {
            height: 24px;
        }
    }

    @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;
        }
    }

    @media screen and (max-width: 320px) {
        .modal-content {
            margin-top: -55px;
        }

        .form-control {
            margin-bottom: 0px;
        }
    }