/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#header{position: fixed; z-index: 99;top: 0;left: 0;right: 0;width: 100%;}
#logo { width:50px;}
#topmenu{ float:right;width:auto;box-shadow: 0px 0px 0px 0px #e2e2e2;}
#menubar{ position:absolute; left:50px;}
.bbpslogo { float:left;}
.slidemenu{width:50px; height:70px; float:right; text-align:right; line-height:70px; display:block;}
.downarrow{float:right; font-size:13px; padding:35px 0; padding-right:20px; background-image:url(../images/icons/down-arrow.svg); background-size: 9px auto; background-position:center right; background-repeat:no-repeat; margin:0 25px 0 0;  width:auto; text-align:right}

.sidenav li { padding:15px; width:calc(100% - 30px); text-align:right;}
.sidenav li a{ list-style:none; text-decoration:none; color:#fff; font-size:16px; }
.profilemenu { position:fixed; top:70px; right:0;}
.profilemenu::after{ position:relative;}
.profilemenu ul li{background-color:#111; padding:5px 0;}
.profilemenu ul li a{font-size:16px;color:#fff;}
.profilemenu ul li a:hover{color:#ccc}
.loggedas{color:#fff;border-bottom:2px solid #333}
.lname strong {color:#35b0ff;}
.bal strong {color:#08d26f;}

#loggedas{ display:none;}
#sidemenu{ left:-50px; position:fixed; overflow:scroll; top:70px; z-index:9999; height:calc(100vh - 140px);}
.container { width:100%; padding:75px 10px 15px 10px ;}
#container { float:none; padding:10px; width:calc(100% - 20px); position:absolute; top:70px; }
.section div { float:none; }
.section v { font-size:22px; }
.col1,.col2,.col3,.col4{ width:calc(100% - 30px);margin:0 0 10px 0; }
.col5{ width:100% ; }
.col1{ min-height:300px;}

.form .col4{ width:100%;margin:0 0 10px 0;}

.iw-contextMenu {width:200px; left:100px !important;}
.iw-cm-menu li { padding:15px 0 15px 15px;}

.popupbox{background:rgba(37,48,59,1);}
.pagebar .ic-edit{ position:absolute; top:0; right:5px; background-size:24px auto;}
.ic-closepop{top:-25px;}

/* Table */
.table {display: block;}
.table_row:nth-child(2n+3) {background: none;}
.theader {display: none;}
.table_row:hover {background: #fff;}
.table_row > .table_small > .table_cell:nth-child(odd) {display: table-cell;width: 50%;}
.table_cell {display: table-cell;width: 50%; text-align:left; padding:5px 0 5px 3px; }
.table_row {display: table;width: 100%;border-collapse: separate;padding-bottom: 20px;margin: 5% auto 0;text-align: center;}
.table_small {display: table-row;}
.table_small .table_cell:nth-child(even) {border-bottom:1px solid #ebebeb;}

.table_row > .table_small:first-child > .table_cell:last-child {border-left: none;}
.table_row > .table_small > .table_cell:first-child {border-left: #ebebeb 1px solid;}
.table_row > .table_small:first-child > .table_cell:first-child {border-top: #ebebeb 1px solid;}
.table_row > .table_small:first-child > .table_cell:last-child {border-top: #ebebeb 1px solid;}
.table_row > .table_small:last-child > .table_cell:first-child {border-right: none;}
.table_row > .table_small > .table_cell:last-child {border-right: #ebebeb 1px solid;}
.table_row > .table_small:last-child > .table_cell:first-child {border-bottom: #ebebeb 1px solid;}
.table_row > .table_small:last-child > .table_cell:last-child {border-bottom: #ebebeb 1px solid;}

.table_small .disable_col{ font-size:0;border-bottom:0 !important;}

.fa-import{background-position: left+10px center;}
/*Search Bar */
.searchbox{width:auto;}
.selectbox{ width:100%;}
.pagetitle{ width:100%; display:inline-block;}
#search{ width:calc(100% - 17px) !important;} 
.searchbox a.button{line-height: 0; font-size: 0; position:absolute;}
.searchbox .fa-export{padding: 17px 20px 17px 20px; top:30px; right:20px;}
.searchbox .fa-import{padding: 17px 8px 17px 0; top:30px; right:20px;}
.searchbox .fa-movearrow{padding: 17px 20px 17px 20px; top:30px; right:60px;}
.searchbox .fa-add{padding: 17px 6px 17px 0; top:30px; right:25px;}
ul.actionmenu{ margin-top:-28px;}

.w20,.w30,.w40,.w50,.w60,.w70,.w80,.w90,.w100,.wp50,.wp70,.wp80,.w90,.wp100,.wp120,.wp140,.wp150,.wp180,.wp200,.wp250,.wpc150,.wpc200{ float:none; !important;} 
.wp120,.wp140,.wp150,.wp180,.wp200,.wp250,.wp100,.wp80,.wp70,.w50{ width:100% !important; margin:5px 0 !important;} 

:placeholder {color:transparent; opacity:  0;}
/* Mozilla Firefox 4 to 18 */
:-moz-placeholder {color:transparent; opacity:  0;}
/* Mozilla Firefox 19+ */
::-moz-placeholder {color:transparent;opacity:  0;}
/* Internet Explorer 10+ */
:-ms-input-placeholder {color:transparent;}

.has-float-label input{padding:15px 10px 5px 8px !important;;}
.rcpanel .has-float-label input{padding:15px 10px 5px 35px !important;;}

.rcpanel .has-float-label input, .rcpanel .has-float-label select, .rcpanel .has-float-label textarea{}
#vertical_tab_content {width: 100%; padding:0;}
#vertical_tab_content div { width:100%;}
#vertical_tab_nav ul{ width:100%;}
#vertical_tab_nav li { width:67px; float:left; }
#vertical_tab_nav li a{ font-size:0; border-left: 1px solid #e2e2e2; border-right:0;}
#vertical_tab_nav li a.icon { padding-top:30px; background-position:left+20px center; }

/*BBPS Response */
.bbpsleftcol,.bbpsrightcol{width:100%!important; height:30px; line-height:30px; padding:0 !important; }
.bbpsleftcol{background-color:#fff; }
.bbpsrightcol{ color:#666;}
.bbpsvalue{float:left;margin:9px 5px 0 0;}

/* Receipt Page*/
.printfont{clear:both;padding:5px 0;}
.rpleftcol,.rprightcol{width:100%!important; height:30px; line-height:30px; padding:0 !important; }
.rpleftcol{background-color:#fff; }
.rprightcol{ color:#666;}
.rpleftcol:after {content: '';}
.card .card-body { padding: 15px 5px;}
#printlogobox{width:100px; height:40px; float:left; background-color:#000000;}
#printlogo { background-image:url(../images/yapay-logo-white-b.svg); height:40px; width:100%; background-size: auto 25px; background-repeat:no-repeat; background-position:center center;}

}