@media only screen and (max-width: 1800px) {
.masterSettings .settings .smallBtn { width: 110px;}
}

@media only screen and (max-width: 1680px) {
.dailyRevenueTotal .valueBox .qty { width:23%;}
.dailyRevenueTotal .valueBox .price { width:36%;}
}

@media only screen and (max-width: 1439px) {
.settings .col2 { width:100%;}
.settings .col4 { width:50%;}

.masterSettings .settings .smallBtn { width: 160px;}

.userReportSearch.advanceSearch .formLeft { width:70%;}
.userReportSearch.advanceSearch .formRight { width:30%;}
}

@media only screen and (max-width: 1366px) {
.dailyRevenueTotal .valueBox .price { width:37%;}
}

@media only screen and (max-width: 1279px) {
.userReportSearch.advanceSearch .formLeft { width:65%;}
.userReportSearch.advanceSearch .formRight { width:35%;}
}

@media only screen and (max-width: 1170px) {
.softwareUpdateList table th { display:none;}
.softwareUpdateList table td { display:block; border:0 none; padding:5px 12px;}
.softwareUpdateList table td.firstTd { padding:15px 12px 5px 12px; width:100%; float:left;}
.softwareUpdateList table td.lastTd { padding:5px 12px 15px 12px; border-bottom:1px solid #ccc;}
.softwareUpdateList table td:before{ color: #333; content: ""attr(data-label)"";  font-size:16px; font-weight:600; display: block; width:130px; float:left;}
.softwareUpdateList table .active td:before{ color: #fff;}
.softwareUpdateList .containerCheck { margin:0;}
.softwareUpdateList table td.softSelectionTD { width:100%; float:left;}
.softwareUpdateList table td.softSelectionTD .containerCheck .checkmark { top:-5px;}

.dailyRevenueTotal .valueBox .qty { width:25%;}
.dailyRevenueTotal .valueBox .price { width:40%;}
}
@media only screen and (max-width: 1169px) {
.masterSettings .ingredient .smallBtn { width: 110px;}
.addCustomerOtherInfo .col2 { width:100%;}
.userReportSearch.advanceSearch .formLeft { width:60%;}
.userReportSearch.advanceSearch .formRight { width:40%;}

.cnangePassBox .cmnBtn,
.cnangePassBox .lineBtn { width:160px;}


}

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

.popupBox { position:absolute;}

.userList table th { display:none;}
.userList table td { display:block; border:0 none; padding:5px 12px;}
.userList table td.firstTd { padding:15px 12px 5px 12px;}
.userList table td.lastTd { padding:5px 12px 15px 12px; border-bottom:1px solid #ccc;}
.userList table td:before{ color: #333; content: ""attr(data-label)"";  font-size:16px; font-weight:600; display: block; width:130px; float:left;}
.userList table .active td:before{ color: #fff;}


.customerList table th { display:none;}
.customerList table td { display:block; border:0 none; padding:5px 12px; width:100%; float:left;}
.customerList table td.firstTd { padding:15px 12px 5px 12px;}
.customerList table td.lastTd { padding:5px 12px 15px 12px; border-bottom:1px solid #ccc;}
.customerList table td:before{ color: #333; content: ""attr(data-label)"";  font-size:16px; font-weight:600; display: block; width:190px; float:left;}
.customerList table .active td:before{ color: #fff;}
.customerList table {border-top: 0 none;}
.customerList table td:first-child { border-top:1px solid #ccc !important; }


.multi-selectbox {width:100%; height:88px; position:relative; overflow:auto; margin:15px auto;  border: 1px solid #ddd; border-radius: 4px; background:#fff;}
.selectbox-scrollable{ overflow-y:scroll;  position:absolute; padding:0 7px 0 0; width: 100%; height:86px; border:0; z-index:999;}
.selectbox-scrollbar-rail { position:absolute; overflow:auto; top:0px; right:0px; bottom:0; z-index:2; background:#ddd; width:5px; border-radius:0px; display:none;}
.selectbox-scrollbar{ cursor:n-resize; position:absolute; overflow:auto; top:0px; right:0px; z-index:3; background:#444; width:5px; border-radius:8px; display:none;}
.multi-selectbox option { padding:7px 10px; -webkit-transition-duration:0.5s; -moz-transition-duration:0.5s; -o-transition-duration: 0.5s; transition-duration:0.5s; }
.multi-selectbox option:checked, .multi-selectbox option:hover { background:#fff; cursor:pointer; color:#333;}

.ingredientMain .userList table td.alignCenter { text-align:left;}

}
@media only screen and (max-width: 1023px) {
.boxPadding { padding-top:30px;}
.fixed  { position:relative;}

.advanceSearch .formLeft,
.advanceSearch .formRight { width:100%;}
.advanceSearch .formRight li { width:auto; padding:0 15px; text-align:left;}

.showingData { width:100%; padding-top:0; padding-bottom:15px;}
.tablePagination { width:100%;}

.addCustomerOtherInfo .col3 { width:50%;}

.unitList table th { display:none;}
.unitList table td { display:block; border:0 none; padding:5px 12px;}
.unitList table td.firstTd { padding:15px 12px 5px 12px;}
.unitList table td.lastTd { padding:5px 12px 15px 12px; border-bottom:1px solid #ccc;}
.unitList table td:before{ color: #333; content: ""attr(data-label)"";  font-size:16px; font-weight:600; display: block; width:130px; float:left;}
.unitList table .active td:before{ color: #fff;}

.drinkReportList table th { display:none;}
.drinkReportList table td { display:block; border:0 none; padding:5px 12px; width:100%; float:left;}
.drinkReportList table td.firstTd { padding:15px 12px 5px 12px;}
.drinkReportList table td.lastTd { padding:5px 12px 15px 12px; border-bottom:1px solid #ccc;}
.drinkReportList table td:before{ color: #333; content: ""attr(data-label)"";  font-size:16px; font-weight:600; display: block; width:130px; float:left;}

.userReportList table th { display:none;}
.userReportList table td { display:block; border:0 none; padding:5px 12px;}
.userReportList table td.firstTd { padding:15px 12px 5px 12px;}
.userReportList table td.lastTd { padding:5px 12px 15px 12px;}
.userReportList table td:before{ color: #333; content: ""attr(data-label)"";  font-size:16px; font-weight:600; display: block; width:130px; float:left;}

.dailyRevenueList table td:before{width:100%; padding-bottom:2px;}
.dailyRevenueList table th { display:none;}
.dailyRevenueList table td { display:block; border:0 none; padding:5px 12px; width:100%; float:left;}
.dailyRevenueList table td.firstTd { padding:15px 12px 5px 12px;}
.dailyRevenueList table td.lastTd { padding:5px 12px 15px 12px; border-bottom:1px solid #ccc;}
.dailyRevenueList table td:before{ color: #333; content: ""attr(data-label)"";  font-size:16px; font-weight:600; display: block; width:130px; float:left;}

.dailyRevenueTotal .labelBox { width:35%;}
.dailyRevenueTotal .valueBox { width:65%;}
.dailyRevenueTotal .valueBox .qty { width:50%; text-align:left;}
.dailyRevenueTotal .valueBox .price { width:50%;}

.addCustomerOtherInfo table th { display:none;}
.addCustomerOtherInfo table td { display:block; border:0 none; padding:5px 12px; width:100%; float:left;}
.addCustomerOtherInfo table td.firstTd { padding:15px 12px 5px 12px; height:50px; display:none;}
.addCustomerOtherInfo table td.lastTd { padding:5px 12px 15px 12px; border-bottom:1px solid #ccc;}
.addCustomerOtherInfo table td:before{ color: #333; content: ""attr(data-label)"";  font-size:16px; font-weight:600; display: block; width:130px; float:left;}
.addCustomerOtherInfo table .active td:before {color: #fff; }
.addCustomerOtherInfo .containerCheck { margin:0;}

.customerSiteLocation table th { display:none;}
.customerSiteLocation table td { display:block; border:0 none; padding:5px 12px; width:100%; float:left;}
.customerSiteLocation table td.firstTd { padding:15px 12px 5px 12px;}
.customerSiteLocation table td.lastTd { padding:5px 12px 15px 12px;  border-bottom:1px solid #ccc;}
.customerSiteLocation table td:before{ color: #333; content: ""attr(data-label)"";  font-size:16px; font-weight:600; display: block; width:130px; float:left;}
.customerSiteLocation table .active td:before{ color: #fff;}
.addCustomerUnit.customerSiteLocation table .active td:before{ color: #fff;}

.userReportSearch.advanceSearch .formLeft { width:100%;}
.userReportSearch.advanceSearch .formRight { width:100%;}

.permissionUserList table th { display:revert;}

table {border-top: 1px solid #ccc;}

.permissionUserListTable .containerCheck b {display:block; font-weight:normal;}
.ingredientMain .advanceSearch .formRight li { width: 50%; text-align: center;}
.borderTop {border-top: 1px solid #ccc !important; border-collapse: separate;}

}

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

}
@media only screen and (max-width: 960px) { }
@media only screen and (max-width: 959px) {
.masterSettings .settings .smallBtn {width: 130px;}
.masterSettings .ingredient .smallBtn {width: 80px;}

.cnangePassBox .cForm li.col2 { width:100%; text-align:center;}

.SecurityAPICus li.col2{ width:100%;}

}

@media only screen and (max-width: 839px) {
.userEditPage .cForm li.col3 { width:50%;}
.unitsDetailsPage .cForm li.col3 { width:50%;}
.unitsDetailsPage .selectBoxStyle { margin:0;}


.ingredient .col2 { width:100%;}

.masterSettings .settings .smallBtn {width: 120px;}
.masterSettings .ingredient .smallBtn {width: 120px;}

}

@media only screen and (max-width: 800px) {
.advanceSearch .cForm li.col3 { width:50%;}
.advanceSearch .formRight li { width:50%; text-align:center;}

.addCustomerPersonalInfo .cForm li.col3 { width:50%;}
.addCustomerOtherInfo .col3 { width:100%;}

.addIngredientL { width:100%;}
.addIngredientR { width:100%;}
.addIngredientR .uploader {margin-top: 0px;}
}

@media only screen and (max-width: 768px) {
.helpTabCnt .col2 { width:100%;}

.cnangePassBox .col2 { width:100%;}
.cnangePassBox .cForm li.col2 { width:50%; text-align:center;}

.permissionUser .col2 { width:100%;}

.deahbord .col2 { width:100%;}
}

@media only screen and (max-width: 767px) {
.logo { margin-left:30px;}
.loginHeader .logo { margin-left:0;}

.inquiry-now-btn { display:block;}
.loadedSlideMenu .fullwidth { padding-left:0;}
#nav ul li a.masterIngredientIco { background:none; }
.slideNav {width:280px; height:100%; background:#f5f5f5; position:fixed; left:0; top:0; overflow-y:auto; display:none;}
.slideNav .wrap-inner { padding:0;}
.headerNav { display:none;}
.inquiry-now-btn a { color:#fff;}
.inquiry-now-btn-color a { color:#003F7E;}
.loadedSlideMenu .inquiry-now-btn a { color:#003F7E;}

/*Navigation*/
.menu-icon{display:none;}
.menuPart { width:100%; float:left; padding-top:80px;}
#nav{ width:100%; float:left;}
#nav > li{width:100%; margin:0;}
#nav > li > a{display:block; padding:14px 15px 12px 15px !important}
#nav > li a::before { display:none;}
#nav > li:hover > a{color:#fff; background-color:#003F7E;}
#nav > li > a::after, #nav > li > a::before{display:none;}
#nav li:hover > ul { display: none;}
#nav ul{ display: none; position: relative; width: 100%; background-color:#fff; box-shadow:none;}
#nav ul li a{display:block; padding:12px 30px 12px 15px; line-height:20px; color:#333;}
.arrowclick{display:block;}

.deahbord .col2 { width:100%; padding:15px 5px;}

.settings .col4 { width:100%;}
.settings .cForm li.col2 { width:100%; text-align:center;}
.settings .cForm li.col2 label { text-align:left;}

.popupBox .popupBg.large { width:92%; margin-left:0; left:4%;}

.customerUnitList table th { display:none;}
.customerUnitList table td { display:block; border:0 none; padding:5px 12px;}
.customerUnitList table td.firstTd { padding:15px 12px 5px 12px;}
.customerUnitList table td.lastTd { padding:5px 12px 15px 12px;}
.customerUnitList table td:before{ color: #333; content: ""attr(data-label)"";  font-size:16px; font-weight:600; display: block; width:130px; float:left;}

.dailyRevenueTotal .labelBox { width:30%;}
.dailyRevenueTotal .valueBox { width:70%;}
.dailyRevenueTotal .valueBox .qty { width:45%;}
.dailyRevenueTotal .valueBox .price { width:55%;}

.masterSettings .settings .smallBtn {width: 160px;}
.masterSettings .ingredient .smallBtn {width: 160px;}


.helpPage .helpCntTab { display:none;}
.helpPage .helpTabCnt { padding-left:0;}
.helpPage .helpTabCnt .r-tabs-accordion-title { width:100%; float:left; display:block;}
.helpPage .helpTabCnt .r-tabs-accordion-title a { width:100%; float:left; display:block; background:#f8f8f8; padding:12px 20px; font-weight:bold; margin-bottom:1px;}
.helpPage .helpTabCnt .r-tabs-accordion-title.r-tabs-state-active a { background:#003F7E; color:#fff;}
.helpPage .helpTabCnt .r-tabs-accordion-title.r-tabs-state-active a {color:#fff;}
.versionTabCnt span { font-size:12px; text-transform:uppercase;}

/*.masterSettings .settingsCntTab { display:none;}*/
.masterSettings .settingsCntTab { padding:0;}
.masterSettings .settingsCntTab .r-tabs-accordion-title { width:100%; float:left; display:block;}
.masterSettings .settingsCntTab .r-tabs-accordion-title a { width:100%; float:left; display:block; background:#f8f8f8; padding:12px 20px; font-weight:bold; margin-bottom:1px;}
.masterSettings .settingsCntTab .r-tabs-accordion-title.r-tabs-state-active a { background:#003F7E; color:#fff;}
.masterSettings .settingsCntTab .r-tabs-accordion-title.r-tabs-state-active a {color:#fff;}

.permissionUserList table th { display:none;}
.permissionUserList table td:before{width:100%; padding-bottom:2px;} table th { display:none;}
.permissionUserList table td { display:block; border:0 none; padding:5px 12px; width:100%; float:left;}
.permissionUserList table td.firstTd { padding:15px 12px 5px 12px;}
.permissionUserList table td.lastTd { padding:5px 12px 15px 12px; border-bottom:1px solid #ccc;}
.permissionUserList table td:before{ color: #333; content: ""attr(data-label)"";  font-size:16px; font-weight:600; display: block; width:130px; float:left;}
.permissionUserList label.containerCheck { float:left;}
.permissionUserListTable .containerCheck b {display:none;}
   
}
@media only screen and (max-width: 640px) {
.pagination a {padding:5px 15px;}
}
@media only screen and (max-width: 639px) {
.wrap-inner { padding:0 10px;}
.logo span { display:none;}
.loginHeader .logo span { display:inline-block;}

.colTit .cmnBtn { padding:8px 15px 8px 30px !important; margin:0 5px; font-size:16px; font-family: 'tt_commonsdemibold'; width:auto;}
.colTit .cmnBtn::before { font-size:18px; top:5px; left:7px;}

.colTit .cmnBtn.exportIco { padding:8px 15px 8px 40px !important; }
.exportIco { padding:8px 15px 8px 40px !important; background:url(../images/export-ico.png) 10px 7px no-repeat #003f7e !important; }
.exportIco:hover { background:url(../images/export-ico.png) 10px 7px no-repeat #0268d0 !important;}


.userEditPage .cForm li.col3 { width:100%;}
.unitsDetailsPage .cForm li.col3 { width:100%;}

.popupBox .popupBg.medium { width:92%; margin-left:0; left:4%;}

.dailyRevenueTotal .labelBox { width:100%; text-align:left;}
.dailyRevenueTotal .valueBox { width:100%;}
.dailyRevenueTotal .valueBox .qty { width:50%;}
.dailyRevenueTotal .valueBox .price { width:50%;}

.cmnBtn,
.lineBtn,
.redBtn,
.greenBtn {width:160px;}


.customerList table td:before{ display: block; width:auto; float:none;}
.masterSettings .ingredient .smallBtn {width: 100px;}

.addCustomerOtherInfo table td::before { width:auto; float:none;}

.customerSiteLocation table td:before{ width:auto; float:none;}

.addIngredientL .cForm li.col2 {width: 100%;}

.softwareUpdateFilter .col2 { width:100%; float:left; padding:5px;}
.softwareUpdateDropdownFilter {float:left;}

}
@media only screen and (max-width: 480px) {
.loginBox { left:0; margin-left:0; padding:0 15px;}

.userList table td:before{width:auto; float:none; padding-bottom:2px;}
.softwareUpdateList table td:before{width:auto; float:none; padding-bottom:2px;}
.customerList table td:before{width:100%; padding-bottom:2px;}

.advanceSearch .cForm li.col3 { width:100%;}
.customerPage  .cForm li.col2 { width:100%;}
.addCustomerPersonalInfo .cForm li.col3 { width:100%;}

.customerSiteList table th { display:none;}
.customerSiteList table td { display:block; border:0 none; padding:5px 12px;}
.customerSiteList table td.firstTd { padding:15px 12px 5px 12px;}
.customerSiteList table td.lastTd { padding:5px 12px 15px 12px;}
.customerSiteList table td:before{ color: #333; content: ""attr(data-label)"";  font-size:16px; font-weight:600; display: block; width:130px; float:left;}

.popupBox .popupBg { top:100px;}

.ingredientMain .advanceSearch .cForm li.col2 { width:100%;}
}
@media only screen and (max-width: 479px) {
.advanceSearch .formRight li { width:100%; padding:5px 15px;}
.softwareUpdatePage .colTit .btnBox { width:100%; float:left;}
.ingredient .cForm li.col3 { width:100%; text-align:center;}

.customerPage .colTit .btnBox { width:100%; float:left;}
.customerPage .colTit .cmnBtn { margin:0 10px 0 0;}

.addCustomerPersonalInfo .col1,
.addCustomerPersonalInfo .colCnt,
.addCustomerOtherInfo .col1,
.addCustomerOtherInfo .colCnt { padding:15px 0px;}

.addCustomerOtherInfo .col3 { padding:15px 10px;}

.unitList table td:before{width:auto; float:none; padding-bottom:2px;}
.unitPage .colTit .btnBox { width:100%; float:left;}
.unitPage .colTit .cmnBtn { margin:0 10px 0 0;}

.popupBox .popupBg.small { width:92%; margin-left:0; left:4%;}

.drinkReportList table td:before{width:auto; float:none; padding-bottom:2px;}

.userReportList table td:before{width:100%; padding-bottom:2px;}

.dailyRevenueList table td:before{width:auto; float:none; padding-bottom:2px;}

.dailyRevenueTotal .valueBox .qty { width:100%; padding:5px;}
.dailyRevenueTotal .valueBox .price { width:100%; padding:5px;}

.loginBox .cmnBtn,
.loginBox .lineBtn,
.loginBox .redBtn,
.loginBox .greenBtn {
    width: 120px;}

.cnangePassBox .col2 { padding:0;}
.cnangePassBox .cForm li.col2{ width:100%;}
.cnangePassBox .rightBox .cnangePassCnt { margin-bottom:30px;}

.masterSettings .ingredient .smallBtn {width: 160px;}

.addCustomerSite .cForm li.col2 { width:100%; text-align:center;}

.addIngredient .cForm.btnBox li { margin:0;}
.addIngredient .cForm.btnBox li .col2 { width:100%; text-align:center; padding:10px;}

.ingredientMain .advanceSearch .formRight li { width: 100%;}

}
@media only screen and (max-width: 414px) {
.login { padding:65px 0;}
.popupBox .popupBg { top:50px;}
}
@media only screen and (max-width: 413px) {
.cForm li.col2.forgotBox { width:100%; text-align:left; min-height:inherit;}
.cForm li.col2.rememberBox { width:100%; margin-bottom:15px;}
.login { padding: 15px 0;}

.userPage .colTit .btnBox { width:100%; float:left;}
.userPage .colTit .cmnBtn { margin:0 10px 0 0;}
.userEditPage .cForm li .col2 { width:100%; text-align:center;}

.softwareUpdatePage .tableBtm input[type="submit"]{ margin:5px;}

.addCustomer .btnBox .cForm .col2 { width:100%; text-align:center;}
.customerSiteList table td:before{width:100%; padding-bottom:2px;}
.customerUnitList table td:before{width:100%; padding-bottom:2px;}
}

@media only screen and (max-width: 359px) {
.logo img { width:75%;}
.loginHeader .logo { font-size:30px;}
.loginHeader .logo img { width:auto;}
.header-right .profileBox .profileCnt span { font-size:20px;}
.inquiry-now-btn {top: 30px;}
.header-right .profileBox .profileCnt img { width:45px;}
.header-right .profileBox .profileCnt span { padding:10px 28px 0 0;}
.header-right .profileBox .profileCnt::before {top:9px; right:47px;}
.header-right {padding-top:19px;}

.masterSettings .settingsCntTab ul li a { padding:10px 31px;}

}
@media only screen and (max-width: 320px) {
.popupBox .popupBg.x-small { width:92%; margin-left:0; left:4%;}
}