/*-----------------------------------------------------------------------------
 *
 * General Views
 *
 *-----------------------------------------------------------------------------
 */

 /** Dasktop View **/
 .right-most, .right-most-cp{
    position: relative;
    float: right;
    clear: right;
    width: 30%;
    padding-left: 0px;
    margin-top: 10px;
    /*margin-top: -10px;*/
}

.lineup {
    float:left;
    width:220px;
    font-size:13px;
    font-weight: normal;
}

div.radio-toolbar {width:410px;}


 #header ul {
    list-style: none;
    padding:0;
    margin:0;
}

#header li {
    display: inline;
    border: solid;
    border-width: 1px 1px 0 1px;
    margin: 0 0.5em 0 0;
}

#header li a {
    padding: 0 1em;
}

#content {
    border: 1px solid;
}

#header #selected {
    padding-bottom: 1px;
    background: white;
}

.pagelimit{
     position: relative;
     float: right;
}

.pagelimit-70{
    margin-right: 30%;
}

.div-70{
    width: 70%;
}

.card-title{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0px;
    text-align: center;
}

.top-product, .hourly-table, .top-product-cp, .hourly-table-cp{
    width: 98%;
    margin-left: 5px;
    margin-right: 5px;
}

.top-product th, .top-product tr, .hourly-table th, .hourly-table tr{
    height: 25px;
    font-size: 14px;
}

.top-product-cp th, .top-product-cp tr, .hourly-table-cp th, .hourly-table-cp tr{
    height: 25px;
    font-size: 14px;
}

.dashboard-1 {
    box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important;
    width: 90%;
    overflow: hidden;
    margin-bottom: 20px;
}

.cp-dashboard-1 {
    box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important;
    overflow: hidden;
    margin-bottom: 20px;
}

.d-total, .d-total-cp {
    font-size: 60px;
    color: green;
    font-weight: bold;
    text-align: center;
    margin-left: -10px;
}

.d-total-label, .d-total-label-cp{
    margin-top: -35px;
    text-align: center;
    /*margin-left: 270px;*/
    color: gray;
    font-weight: bold;
    font-size: 18px;
}

.d-item-p{
    float:left;
    display: inline;
    padding-left: 10px;
}

.d-items, .d-items-cp{
    font-size: 45px;
    font-weight: bold;
    text-align: left;
}

.d-items-label, .d-items-label-cp{
    color: gray;
    font-weight: bold;
    font-size: 18px;
    margin-top: -25px;
}

.d-orders-p {
    float:right;
    display: inline;
    padding-right: 10px;
}

.d-orders, .d-orders-cp {
    font-size: 45px;
    font-weight: bold;
    text-align: left;
}

.d-orders-label, .d-orders-label-cp{
    color: gray;
    font-weight: bold;
    font-size: 18px;
    margin-top: -25px;
}

.dashboard-2 {
    overflow: hidden;
    margin-top: -10px;
}

.d2-left {
    padding-left: 5px;
    float:left;
    width: 70%;
}

.d2-right {
    float:left;
    width: 30%;
    padding-right: 5px;
}

.d2-total {
    padding-top: 20px;
    font-size: 28px;
    color: green;
    font-weight: bold;
    text-align: left;
}

.d2-total-label{
    margin-top: -25px;
    text-align: left;
    color: gray;
    font-weight: bold;
    font-size: 14px;
}

.d2-right-value {
    font-size: 20px;
    font-weight: bold;
    text-align: right;
}

.d2-right-value-label{
    color: gray;
    font-weight: bold;
    font-size: 12px;
    margin-top: -20px;
    text-align: right;
}

a.button {
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-top: 10px;
    margin-left: 8px;
    margin-right: 2px;
    margin-bottom: 5px;
    cursor:pointer;
    width: 65%;
    height: 55px;
    vertical-align:top;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
}
a.button:hover{
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
a.button:active {
    color: #000;
    border-color: orange;
}

.selbutton {
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-top: 5px;
    margin-left: 8px;
    margin-right: 2px;
    margin-bottom: 5px;
    cursor:pointer;
    width: 65%;
    border-color: orange;
    height: 55px;
    vertical-align: top;
    text-align: center;
    font-size: 14px;
    box-shadow: 0px 0px 10px #D6C731;
    line-height: 20px;
}

.selbutton:hover{
    color: #333;
    border-color: orange;
    -moz-box-shadow: 0px 0px 10px #D6C731;
    -webkit-box-shadow:0px 0px 10px #D6C731;
    box-shadow: 0px 0px 10px #D6C731;
}

.topbutton {
    color: white;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 28px 5px 0px 5px;
    position: relative;
    float: left;
    text-shadow: 0 0px 3px #000;
    background: #0288d1;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-top: 5px;
    margin-left: 25px;
    margin-right: 0px;
    margin-bottom: 15px;
    cursor: pointer;
    width: 17%;
    height: 85px;
    text-align: center;
    font-size: 15px;
    line-height: 18px;
    border-radius: 5px;
    letter-spacing: 1px;
    transition: all .1s ease-in-out;
}
.topbutton:hover,.topbutton:focus{
    color:white!important;
    text-decoration: none;
    /*font-style: italic;*/
    transform: scale(1.05);
    box-shadow: 0px 5px 15px #95A2FB;
}
.topbutton:active {
    color: #000;
    border-color: orange;
}

.topbutton2 {
    color: black;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 28px 5px 0px 5px;
    position: relative;
    float: left;
    text-shadow: 0 1px 10px #FFF;
    background: #F8C736;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-top: 5px;
    margin-left: 25px;
    margin-right: 0px;
    margin-bottom: 15px;
    cursor: pointer;
    width: 17%;
    height: 85px;
    text-align: center;
    font-size: 15px;
    line-height: 18px;
    border-radius: 5px;
    letter-spacing: 1px;
    transition: all .1s ease-in-out;
}

.topbutton2:hover, .topbutton2:focus {
    color: black!important;
    text-decoration: none;
    font-style: italic;
    transform: scale(1.02);
    box-shadow: 0px 2px 15px #27507E;
}

.topbutton2:active {
    color: #000;
    border-color: orange;
}

.topbutton-cp {
    color: white;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 15px 5px 0px 5px;
    position: relative;
    float: left;
    text-shadow: 0 0px 3px #000;
    background: #0288d1;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-top: 5px;
    margin-left: 15px;
    margin-right: 0px;
    margin-bottom: 5px;
    cursor: pointer;
    width: 10vw;
    height: 70px;
    text-align: center;
    font-size: 1.1vw;
    line-height: 18px;
    border-radius: 5px;
    letter-spacing: 1px;
    transition: all .1s ease-in-out;
}
.topbutton-cp:hover,.topbutton-cp:focus{
    color:white!important;
    text-decoration: none;
    /*font-style: italic;*/
    transform: scale(1.05);
    box-shadow: 0px 5px 15px #95A2FB;
}
.topbutton-cp:active {
    color: #000;
    border-color: orange;
}

.terminal_button {
    box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.6)!important;
    overflow: hidden;
    text-decoration: none;
    /*padding: 5px 5px 0px 5px;*/
    position: relative;
    float: left;
    text-shadow: 0 1px 10px #FFF;
    background: #e0eef7;
    /*background: #4CAFEB;*/
    /*background: white url(../img/vivipos.png) no-repeat top center;*/
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-top: 5px;
    margin-left: 25px;
    margin-right: 0px;
    margin-bottom: 15px;
    cursor: pointer;
    width: 30%;
    height: 185px;
    text-align: center;
    border-radius: 5px;
    letter-spacing: 1px;
    transition: all .1s ease-in-out;
}

.terminal_button:hover, .terminal_button:focus {
    color: black!important;
    text-decoration: none;
    font-style: italic;
    transform: scale(1.02);
    box-shadow: 0px 2px 15px #27507E;
}

.terminal_button:active {
    color: #000;
    border-color: orange;
}

.terminal_button_terminal_label {
    color: white;
    background: #9e6464;
    font-size: 22px;
    width: 100%;
    text-shadow: 0 1px 5px #FFF;
}

.terminal_button_store_label{
    margin-top: 0px;
    color: black;
}

.terminal_footer {
    padding-left: 10px;
    padding-top: 5px;
    padding-right: 10px;
    overflow: hidden;
    margin-top: -10px;
    background: gray;
    position:absolute;
    width: 100%;
    height: 30px;
    bottom : 0px;
}

.terminal_footer_left, .terminal_footer_left a{
    color:white;
    text-shadow: 0px 1px 1px black;
    float: left;
    width: 20%;
}

.terminal_footer_right{
    float:left;
    text-align: right;
    width: 80%;
}

.terminal_button_send {
    box-shadow:none;
    overflow: hidden;
    position: relative;
    float: left;
    cursor: pointer;
    text-align: center;
}

.tooltiptext {
    float: left;
    visibility: hidden;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    z-index: 1;
}

.terminal_footer_right:hover .tooltiptext {
    visibility: visible;
}

.terminal_footer_right:hover .status_icon_green {
    visibility: hidden;
}

.status_icon{
    visibility: visible;
    width: 100%;
    height: 20px;
}

.status_icon_green {
    background: url('../img/green.png') no-repeat top right;
}

.status_icon_yellow {
    background: url('../img/yellow.png') no-repeat top right;
}

.status_icon_red {
    background: url('../img/red.png') no-repeat top right;
}

.topSelbutton {
    color: white;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 28px 5px 0px 5px;
    position: relative;
    float: left;
    text-shadow: 0 0px 3px #000;
    background: #0288d1;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-top: 5px;
    margin-left: 25px;
    margin-right: 0px;
    margin-bottom: 15px;
    cursor: pointer;
    width: 17%;
    height: 85px;
    text-align: center;
    font-size: 15px;
    line-height: 18px;
    border-radius: 5px;
    letter-spacing: 1px;
    transition: all .1s ease-in-out;
    border: 2px solid #FFFFFF;
    box-shadow: 0px 0px 10px #0288D1;
    font-style: italic;
}

.centertabs {
    position: absolute;
    left: 50%;
     /*-webkit-transform: translate(-50%, -50%); */
    transform: translate(-50%);

}

.centertabs2 {
    position: relative;
    left: 40%;
}

.topSelbutton:hover{
    text-decoration: none;
    color:white;
/*  color: #333;
    border-color: orange;
    -moz-box-shadow: 0 2px 0 rgba(0.8, 0, 0, 0);
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);*/
}

/*.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
    text-align: center;
}

.middle {
    display: table-cell;
    vertical-align: top;
}

.inner {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}*/

.side_list{
    position: relative;
    float: left;
    border: 1px solid #27507E;
    width: 25%;
    text-align: center;
}

.side_list2{
    position: relative;
    float: left;
    border: 1px solid #27507E;
    width: 25%;
    text-align: center;


    /*position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -240px;
    width: 480px;
    height: 300px;
    */

    /*position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);*/


    border-radius: 5px;
    border: 2px solid #aaaaaa;
}

.center_list{
    /*position: relative;
    float: left;
    border: 1px solid #27507E;
    */


    /*position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -240px;
    width: 480px;
    height: 300px;
    */

    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    width: 90%;
    max-width: 480px;
    min-width: 320px;
    padding: 25px;
    border-radius: 5px;
    border: 2px solid #aaaaaa;
}

.top_list{
    position: relative;
    border: 1px solid #aaaaaa;
    width: 100%;
    padding: 5px;
    border-radius: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    box-sizing: border-box;
}

.top_list > .topbutton,
.top_list > .topbutton2,
.top_list > .topbutton-cp {
    float: none;
    width: auto;
    margin: 0;
    box-sizing: border-box;
}

.productBasic {
    font-size: 15px;
    font-weight: bold !important;
    height: 164px;
    list-style-type: none;
    margin: 1px 1px 0px 0px;
    padding: 0 0 0 0;
    width: 600px;
    -moz-appearance: none;
    -moz-user-focus: ignore;
    -moz-background-clip: border;
}

.deptmentPanel {
	border: solid 1px #5c5751;
	height: 265px;
	margin: 0 0 0 0;
	max-height: 265px;
	max-width: 295px;
	padding: 5px 5px 5px 5px;
	width: 295px;
	-moz-background-clip: border;
	-moz-border-radius-topright: 8px;
	-moz-border-radius-topleft: 8px;
}

.productPanel {
    background: white url(../img/numpadbg.gif) no-repeat top center;
    border: solid 1px #5c5751;
    height: 265px;
    margin: -103px 0 0 60px;
    max-height: 265px;
    max-width: 295px;
    padding: 27px 10px 10px 5px;
    width: 295px;
    -moz-background-clip: border;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-topleft: 8px;
}

#storeContact{
    padding: 25px;
    border-radius: 5px;
    border: 2px solid #aaaaaa;
}

#storeContact div div table{
    border:none;
}


/*#producttab{
    border:none;
}*/

#btnFontSize{
     margin:4px;
   float:left;
   width: 50%;

}

#btnFontSize label {
    float:left;
    width:150px;
    height: 40px;
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    text-align:center;
    font-size: 16px;
    font-weight:bold;
    padding-top: 10px;
}


#btnFontSize input{
    position:absolute;
    /*top:-300px;*/
    display: none;
}

#btnFontSize input:checked + label{
    border: solid 1px black;
    border-radius: 2px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.55);
}

#checkboxStyle{
    margin:10px;
    float:left;
    width: 100%;

}

#checkboxStyle label {
    float: left;
    width: 170px;
    height: 100px;
    margin: 4px;
    background-color: #EFEFEF;
    border-radius: 4px;
    border: 1px solid #000;
    overflow: auto;
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    padding-top: 30px;
    padding-left: 15px;
    padding-right: 15px;
    overflow-wrap: break-word;
}

#checkboxStyle label:hover{
    box-shadow: 0px 1px 10px rgb(51, 122, 183);
}

#checkboxStyle input{
    position:absolute;
    /*top:-300px;*/
    display: none;
}

#checkboxStyle input:checked + label{
    /*border: solid 2px #27507E;*/
    border: solid 2px red;
    border-radius: 4px;
    /*box-shadow: 0px 1px 10px rgb(39, 80, 126)*/
    box-shadow: 0px 1px 5px red;
    color: red;
}

.search_options{
    float:right;
    text-align: right;
}

.searchbox{
    float:right;

}

.searchby{
    float: right;
}

.searchbox_go{
    margin-right: -320px;
    float: right;
}

#hideChart{
    float: left;

}

#loading{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:url(../img/loading-4.gif) no-repeat center center rgba(255,255,255,0.9);
    /*background-size: 150px 150px;*/
}

.centerme{
    width:270px;
    height:150px;
    position:absolute;
    left:50%;
    top:50%;
    margin:75px 0 0 -135px;
    text-align:center;
}

.pagelimit-label {
    font-weight:bold;
    font-size:12px;
    margin-bottom: 0px;
}

.extra-terminal{
    display: table-cell;
}

.extra-mobile{
    display: none;
}

#btnStatsSelection{
    margin:4px;
    float:left;
    width: 90%;
    background-color: white;

}

#btnStatsSelection legend{
    text-align: center;
    margin-bottom: 0px;
}

#btnStatsSelection label {
    float:left;
    width:22%;
    height: 50px;
    margin:4px;
    /*background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;*/
    overflow:auto;
    text-align:center;
    font-size: 12px;
    font-weight:bold;
    padding-top: 10px;
    padding-left: 0px;
}


#btnStatsSelection input{
    position:absolute;
    display: none;
}

#btnStatsSelection input:checked + label{
    border: solid 1px black;
    border-radius: 2px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.55);
}

#btnStatsSelection-cp{
    float:left;
    width: 100%;
    margin-left: 15px;
    margin-top: -15%;
}

#btnStatsSelection-cp legend{
    text-align: center;
    margin-bottom: 0px;
}

#btnStatsSelection-cp label {
    float:left;
    width:22%;
    height: 40px;
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    text-align:center;
    font-size: 12px;
    font-weight:bold;
    padding-top: 10px;
    padding-left: 0px;
}


#btnStatsSelection-cp input{
    position:absolute;
    display: none;
}

#btnStatsSelection-cp input:checked + label{
    border: solid 1px black;
    border-radius: 2px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.55);
}

.dashboardSwitchCtrl{
    margin:4px;
    float:left;
    width: 300px;

}

.dashboardSwitchCtrl legend{
    text-align: center;
    margin-bottom: 0px;
}

.dashboardSwitchCtrl label {
    float:left;
    width:47%;
    height: 50px;
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    text-align:center;
    font-size: 15px;
    font-weight:bold;
    padding-top: 12px;
    padding-left: 0px;
}


.dashboardSwitchCtrl input{
    position:absolute;
    display: none;
}

.dashboardSwitchCtrl input:checked + label{
    border: solid 1px black;
    border-radius: 2px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.55);
}

.dashboardSwitchCtrl2{
    margin:4px;
    float:left;
    width: 300px;

}

.dashboardSwitchCtrl2 legend{
    text-align: center;
    margin-bottom: 0px;
}

.dashboardSwitchCtrl2 label {
    float:left;
    width:30%;
    height: 50px;
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    text-align:center;
    font-size: 15px;
    font-weight:bold;
    padding-top: 12px;
    padding-left: 0px;
}


.dashboardSwitchCtrl2 input{
    position:absolute;
    display: none;
}

.dashboardSwitchCtrl2 input:checked + label{
    border: solid 1px black;
    border-radius: 2px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.55);
}

#dashboardSwitchCtrl-cp{
    float:left;
    width: 100%;
    margin-left: 15px;
    margin-top: -15%;
}

#dashboardSwitchCtrl-cp legend{
    text-align: center;
    margin-bottom: 0px;
}

#dashboardSwitchCtrl-cp label {
    float:left;
    width:22%;
    height: 40px;
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    text-align:center;
    font-size: 12px;
    font-weight:bold;
    padding-top: 10px;
    padding-left: 0px;
}


#dashboardSwitchCtrl-cp input{
    position:absolute;
    display: none;
}

#dashboardSwitchCtrl-cp input:checked + label{
    border: solid 1px black;
    border-radius: 2px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.55);
}

.top-most {
    width: 70%;
    margin-top: -30px;
}

.top-most-right, .top-most-left{
    float: left;
    width: 50%;
}

.top-most-left-top{
    position: absolute;
}

/* The Modal (background) */
.myModal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.myModal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    font-size: 25px;
}

.myModal-content a {
    font-size: 25px;
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
/* Mobile Portrait */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
        body{
            padding-top: 50px;
        }

        .right-most{
            position: relative;
            right: 1px;
            width: 95%;
            padding-left: 10%;
        }

        .card-title{
            font-size: 60px;
        }

        .top-product th, .top-product tr, .hourly-table th, .hourly-table tr{
            height: 100px;
            font-size: 48px;
        }

        .d-total {
            font-size: 120px;
            margin-left: 0px;
        }

        .d-total-label{
            font-size: 48px;
        }

        .d-item-p{
            float:none;
            display: block;
            padding-left: 0px;
        }

        .d-items {
            font-size: 120px;
            text-align: center;
        }

        .d-items-label{
            font-size: 48px;
            margin-top: -55px;
            text-align: center;
        }

        .d-orders-p {
            float:none;
            display: block;
            padding-right: 0px;
        }

        .d-orders {
            font-size: 120px;
            text-align: center;
        }

        .d-orders-label{
            font-size: 48px;
            margin-top: -55px;
            text-align: center;
        }

        .dashboard-1 {
            box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)!important;
            width: 90%;
            overflow: hidden;
            margin-bottom: 60px;
        }

        .pagelimit-70{
            margin-right: 0%;
        }

        .pagelimit-70 a{
            font-size: 32px;
        }

        .div-70, .div-70 a{
            width: 100%;
            font-size: 32px;
        }

        .pagelimit-label {
            font-weight:bold;
            font-size:32px;
        }

        .search_options {
            font-size: 32px;
        }

        .extra-terminal{
            display: none;
        }

        .extra-mobile{
            display: table-cell;
            white-space: nowrap
        }

        .terminal_button_terminal_label {
            font-size: 55px;
        }

        #dashboardSwitchCtrl{
            width: 100%;
        }

        #dashboardSwitchCtrl label {
            width: 43%;
            margin-left: 40px;
            font-size: 35px;
            height: 70px;
        }

        #dashboardSwitchCtrl input:checked + label{
            border: solid 1px black;
            border-radius: 2px;
            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.55);
        }

        .terminal_button_store_label {
            font-size: 36px;
        }

        .table-70 .terminal_button {
            height: 430px;
            margin-bottom: 60px;
            width: 80%;
            margin-left: 15%;
        }

        .terminal_footer {
            padding-left: 10px;
            padding-top: 5px;
            padding-right: 10px;
            overflow: hidden;
            margin-top: -10px;
            background: gray;
            position:absolute;
            width: 100%;
            height: 70px;
            bottom : 0px;
        }

        .terminal_footer_left, .terminal_footer_left a{
            color:white;
            text-shadow: 0px 1px 1px black;
            float: left;
            width: 20%;
            font-size: 45px;
        }

        .terminal_footer_right{
            float:left;
            text-align: right;
            width: 80%;
            padding-top: 10px;
        }

        .terminal_button_send {
            box-shadow:none;
            overflow: hidden;
            position: relative;
            float: left;
            cursor: pointer;
            text-align: center;
        }

        .tooltiptext {
            height: 50px;
            font-size: 32px;
            text-align: right;
            padding-right: 35px;
        }

        .status_icon{
            visibility: visible;
            width: 100%;
            height: 70px;
        }


        .status_icon_green {
            background: url('../img/green-big.png') no-repeat top right;
        }

        .status_icon_yellow {
            background: url('../img/yellow-big.png') no-repeat top right;
        }

        .status_icon_red {
            background: url('../img/red-big.png') no-repeat top right;
        }

        .d2-total {
            font-size: 80px;
        }

        .d2-total-label{
            margin-top: -40px;
            font-size: 40px;
        }

        .dashboard-2 {
            margin-top: -35px;
        }

        .d2-right-value {
            margin-top: -10px;
            font-size: 55px;
        }

        .d2-right-value-label{
            font-size: 35px;
            margin-top: -30px;
        }

        #btnStatsSelection label {
            width: 22%;
            margin-left: 8px;
            font-size: 16px;
        }

        .right-most-cp{
            width: 100%;
            float: right;
            position: relative;
        }

        .top-most {
            width: 100%;
            margin-top: -30px;
            position: relative;
            right: 1px;
            float: right;
        }

        .top-most-right, .top-most-left{
            float: right;
            width: 100%;
        }

        .top-most-left-top{
            position: absolute;
        }

        div.dbSelect{
            border: none;
            float: left;
            width: 40%;
            padding: 0px;
            margin: 0px;
        }

        .topbutton-cp {
            width: 85%;
            height: 110px;
            font-size: 30px;
            line-height: 25px;
            padding: 30px 5px 0px 5px;
        }

        .cp-stats{
            float: right;
            width: 55%;
        }

        .top_list {
            width: 100%;
        }

        .cp-dashboard-1 .cp-dashboard-1{
            font-size: 100px;
        }

        .d-total-cp {
            font-size: 100px;
            margin-left: 0px;
        }

        .d-total-label-cp{
            font-size: 40px;
        }

        .d-items-cp {
            font-size: 100px;
            text-align: center;
        }

        .d-items-label-cp{
            font-size: 40px;
            margin-top: -55px;
            text-align: center;
        }

        .d-orders-cp {
            font-size: 100px;
            text-align: center;
        }

        .d-orders-label-cp{
            font-size: 40px;
            margin-top: -55px;
            text-align: center;
        }

        .top-product-cp th, .top-product-cp tr, .hourly-table-cp th, .hourly-table-cp tr{
            height: 50px;
            font-size: 30px;
        }

        .center_list {
            position: relative;
            /*top: 30%;
            left: 50%;*/
            transform: translate(-50%, -50%);
            padding: 25px;
            border-radius: 5px;
            border: 2px solid #aaaaaa;
            text-align: center;
            width: 80%;
        }

        .center_list form{
            font-size: 30px;
        }

        .center_list form input{
            width: 600px;
            height: 80px;
            font-size: 50px;

        }

        .center_list form input.btn{
            font-size: 40px;
        }

        .myModal-content {
            width: 100%;
            font-size: 40px;
        }

        .myModal-content a {
            font-size: 40px;
        }

        .close {
            font-size: 90px;
        }
}

.report-title {
    color: #487f98;
    background-color: #f1f108;
    height: 40px;
    width: 100%;
    font-size: 30px;
    text-align: center;
}

/* ── Premium legacy control panel: side-by-side (Management left, Sales right compact) ── */
.legacy-control-panel-layout {
	display: grid;
	gap: 18px;
	margin-top: 10px;
}
@media (min-width: 980px) {
	.legacy-control-panel-layout {
		grid-template-columns: minmax(0, 1.55fr) 460px;
		grid-template-areas: "tools sales";
		align-items: start;
	}
	.legacy-control-panel-layout .cp-stats {
		grid-area: sales;
		float: none !important;
		width: auto !important;
		margin: 0 !important;
		position: sticky;
		top: 18px;
		background: #fff;
		border: 1px solid #dbe7ec;
		border-radius: 12px;
		padding: 12px 10px 14px;
		box-shadow: 0 10px 28px rgba(31,67,88,.08), 0 1px 4px rgba(31,67,88,.06);
	}
	.legacy-control-panel-layout .cp-stats .top-most,
	.legacy-control-panel-layout .cp-stats .right-most-cp,
	.legacy-control-panel-layout .cp-stats .top-most-left,
	.legacy-control-panel-layout .cp-stats .top-most-right {
		float: none !important;
		width: 100% !important;
		margin: 0 !important;
	}
	.legacy-control-panel-layout .cp-stats .dashboard-1,
	.legacy-control-panel-layout .cp-stats .cp-dashboard-1 {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		box-shadow: none !important;
		border: 1px solid #e2ecef;
		border-radius: 10px;
	}
	.legacy-control-panel-layout .cp-stats #btnStatsSelection {
		width: 100% !important;
		margin: 8px 0 10px !important;
	}
	.legacy-control-panel-layout .cp-stats #btnStatsSelection label {
		width: 21% !important;
		font-size: 11px !important;
	}
	.legacy-control-panel-layout .dbSelect {
		grid-area: tools;
		float: none !important;
		width: auto !important;
		margin: 0 !important;
		display: grid !important;
		gap: 14px;
		border: none !important;
		padding: 0 !important;
		background: transparent !important;
	}
	.legacy-control-panel-layout .dbSelect .top_list {
		width: auto !important;
		margin: 0 !important;
		display: grid !important;
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 8px;
		padding: 16px !important;
		background: #fff;
		border: 1px solid #dbe7ec;
		border-radius: 12px;
		box-shadow: 0 10px 28px rgba(31,67,88,.07);
	}
	.legacy-control-panel-layout .dbSelect .top_list .topbutton-cp {
		width: auto !important;
		margin: 0 !important;
		height: 72px !important;
		font-size: 12px !important;
		padding: 16px 8px 0 !important;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1.25 !important;
	}
}
@media (max-width: 979px) {
	.legacy-control-panel-layout .cp-stats { float: none; width: auto; }
}

.local-report-chart {
	display: inline-flex;
	width: 49%;
	min-height: 500px;
}

@media (max-width: 767px) {
	.local-report-chart {
		display: block;
		width: 100%;
		min-height: 360px;
	}
}