/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
}

html{padding:0; margin:0; touch-action: manipulation;}
body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background: #473c3e;
    font-family:Arial, sans-serif;
    font-size:14px;
    height:100%;
    margin:0px;
    padding:0px;
    width:100%;
}
body.browser{
    height:calc(100vh - 75px);
}
body.android{
    height:calc(100vh - 85px);
}
body.ios{
    height:calc(100vh - 80px);
}
body.store_count_1 .hidden_on_1{
    display:none !important;
}
h1,h2,h3,h4,h5,h6{text-transform: uppercase;}



/* SCREENS */
.content_screen{
    height: calc(100vh - 80px);
    border:0;
    margin:0;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.page_overlay{
    display: none;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    bottom:80px;
    left:0;
    background: #FFF;
    border:20px solid #DDD;
    padding:20px;
    overflow: auto;
    z-index: 20;
}
.page_overlay  .close_button{
    float:right;
    font-size:24px;
}
.page_overlay a{
    color:#666;
}
.page_overlay  .action_button{
    color:#FFF;
    background:#999;
    display: inline-block;
    padding:3px 10px;
    font-size:18px;
    text-decoration: none;
    border:0;
    outline:0;
}
.page_overlay .page_heading{
    margin-right:20px;
}
.page_overlay .page_heading .mdi, .page_overlay button .mdi{opacity: .6;}
#iframeBox{
    overflow: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 10;
    padding-bottom:75px;
    height: calc(100vh - 75px);
}
#mainWindow{
    padding:0;
    margin:0;
    border:0;
    outline:0;
}
body.ios #mainWindow{
    margin-bottom:75px;
}
body.ios .hidden-ios{
    display:none;
}
body.android .hidden-android{
    display:none;
}

#offersWindow{
}
#settingsWindow{
}
#settingsWindow .store-name{
    margin-bottom:0;
}
#locationsList a, #selectedLocationsList a, #storeSettings, #serviceStatus{
    color:#000 !important;
    text-decoration: none;
    background-color: #DDD;
    padding:5px 10px;
    display: block;
    margin-bottom: 5px;
    font-size:12px;
}
#storeSettings h2, #serviceStatus h2{
    font-size:18px;
    margin:5px 0;
}
#storeSettings p, #serviceStatus p{
    margin:10px 0;
}

#locationsList a:nth-of-type(2n), #selectedLocationsList a:nth-of-type(2n){background-color:#EEE;}
#locationsList a:nth-of-type(2n+1), #selectedLocationsList a:nth-of-type(2n+1){background-color:#DDD;}

#locationsList strong, #selectedLocationsList strong{
    font-size:14px;
}

/* CONTROL BUTTONS */
#controlsOverlay{
    font-size:11px;
    font-weight: 300;
    text-align: center;
    margin:0;
    color:#FFF;
    background-color: #000;
    height: 80px;
    width:100%;
    font-weight: 100;
    padding:7px 15px;
    box-sizing: border-box;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    bottom:0;
    left:0;
    z-index: 2000;
}
#controlsOverlay #dockButtons{display:none;}
#controlsOverlay .dock-box{
    display: inline-block;
    width:66px;
    text-align: center;
}
#controlsOverlay a.dock-button{
    display: inline-block;
    color:#FFF;
    text-decoration: none;
    font-size: 28px;
    padding:8px 0;
    text-align: center;
    border-radius: 50%;
    background: #000;
    margin:0 0 5px;
    width:48px;
    height: 48px;
    box-sizing: border-box;
}
#controlsOverlay .dock-box .dock-label{
    font-weight: 300 !important;
}
#userId{
    padding:10px 0;
}

#statusOutput{
    padding:15px 5px 5px; 
    text-transform: lowercase; 
    font-size:10px;
    line-height:16px; 
    font-weight: 300;
    text-align: center;
    margin:0;
    color:#FFF;
    background-color: #000;
    max-height: calc(30vh);
    width:100%;
    font-weight: 100;
    box-sizing: border-box;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    bottom:0;
    left:0;
    z-index: 2500;
    overflow:hidden;    
}

input[type=text], select{
    border:1px solid #999;
    border-radius: 0;
    height:24px;
    width: calc(100vw - 150px);
    padding:4px 6px;
    outline:none;
    font-size: 14px;
    margin-bottom:5px;
}
.search_box{
    width:calc(100vw - 200px) !important;
    max-width:400px;
}
.search_button{
    width:90px;
}
input[type=button], button{
    height:34px;
    width:70px;
    background-color: #CCC;
    outline:none;
    border:none;    
    border-radius: 0;
    margin-bottom:5px;
    color:#FFF;
}

button{
    width:auto;
}

.smartzone-alert{color:#FFF !important; padding:6px 8px; margin:3px 0; font-size:16px;}
.smartzone-alert .mdi{font-size:32px; float:left; margin-right:12px; margin-top:0; opacity: .8}
.smartzone-alert small{font-size:12px;}
#smartZoneDescription strong{font-size:16px;}
.settings_label{padding-left:5px; width:80px; display: inline-block;}

body.keyboardOpen{
    height: calc(100vh - 5px) !important;
}
body.keyboardOpen #controlsOverlay{
    display:none !important;
}
body.keyboardOpen .content_screen{
    height: calc(100vh - 5px);
}
@media (max-height: 470px) {
    #controlsOverlay{
        display:none !important;
    }
    body{
        height: calc(100vh - 5px) !important;
    }
    .content_screen{
        height: calc(100vh - 5px);
    }
}