/*--=======================================================================================================================
*
*  Filename:        main.css
*  Version:         1.16
*
*  Description:     CSS style sheet 
*
*  Date          UserID / Name         Notes
*  ======        =============         =====
*  30-Jun-2015   Andrew Pearson        Original Version
*  18-May-2017   John Hattersley       Cleaned up code and added comments for clarity
*  24-May-2017   John Hattersley       Added threeOptionFooter styling 
*  01-Jun-2017   John Hattersley       Edited footer and threeOptionFooter background color to prevent text cut off 
*  07-Jun-2017   John Hattersley       Created html and body sections 
*  26-Jun-2017   John Hattersley       Added scrolling functionality to customer search page for iOS devices 
*  22-Aug-2017   John Hattersley       Added panel ellipsis styling to allow info in the tabs in the app to overlap neatly
===========================================================================================================================*/

html {
    height: 100%;
    background-color: white;
    overflow: hidden;
}

body{
  height: 100%;
  background-color: white;
  margin: 0px;
  overflow: hidden;
}

/*==========================================
    Disable Scrollbars
============================================*/

::-webkit-scrollbar {
  display: none;
}

/*==========================================
    Disable Text Selection
============================================*/


/** {
   -webkit-user-select: none;
}*/


/*==========================================
    Enable Text selection on input
============================================*/


/*input[type="text"] {
    -webkit-user-select: text;
}
*/

/*==================================================
    Animates Elements on a page
  Used for loading spinners and page transitions
====================================================*/
.speedAnim {
  -webkit-transform: translate3d(0, 0, 0);
}

/*==========================================
    Pages Container
============================================*/

#Pages {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/*==========================================
    All Pages
============================================*/

.page {
  /* Maybe... */
  position: absolute;
  top: 0px;
  /*Background*/
  background-color: #eee;
  /*Fill Screen*/
  min-height: 100%;
  width: 100%;
  min-width: 100%;
  height: 100%;
  /*Footer and Header Padding*/
  padding-top: 0px;
  /* 30px - before removing the Header */
  margin-bottom: 45px;
  /*For Scrolling Info*/
  overflow: scroll;
  /*Giving content room at edges*/
  padding: 5px;
}

/*==========================================
    Login Page
============================================*/

#loginPage {
  background-color: #333;
  color: #eee;
}

/*==========================================
    Search Page
============================================*/

#result-table{
  overflow: hidden;
  -webkit-overflow-scrolling:touch;
}

/*==========================================
    For pages that have a header and footer
===========================================*/

.infoPage {
  padding-top: 10px;
  /* 30px - before removing the Header */
  padding-bottom: 45px;
}

/*==========================================
    Navigation bar
============================================*/

.navbar-toggle {
  display: inline;
}
#nav-bar {
  /*display: none;*/
  opacity: 0;
}
#navbar-brand {
  color: white;
}

/*==========================================
    Regular Two Button Footer
============================================*/

#footer {
  display: inline-block;
  position: absolute;
  bottom: -10px;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 67px;
  background-color: #2d3033;
  z-index: 3;
  opacity: 0;
  /*min-height:100%;*/
}

.footer-button {
  width: 45%;
  height: 67px;
  position: relative;
  text-align: center;
  padding-top: 10px;
  font-size: 15px;
  cursor: pointer;
}
#button-one {
  color: #ffdddd;
  float: left;
  font-weight: bold;
  cursor: pointer;
}
#button-split {
  float: left;
  font-size: 30px;
}
#button-two {
  color: #ddffdd;
  float: right;
  font-weight: bold;
  cursor: pointer;
}

/*==========================================
    Three Button Footer
============================================*/
#threeOptionFooter {
  position: absolute;
  bottom: -10px;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 67px;
  background-color: #2d3033;
  z-index: 2;
  /*display: none;*/
  opacity: 0;
}
/*Allows the footers to be switched*/
#threeOptionFooter {
  opacity: 0;
}
.threeOptionFooter-button{
  width: 31%;
  height: 67px;
  position: relative;
  text-align: center;
  padding-top: 10px;
  font-size: 15px;
}
#three-option-button-one {
  color: #ffdddd;
  float: left;
  font-weight: bold;
  cursor: pointer;
}
#three-option-button-split {
  float: left;
  font-size: 30px;
}
#three-option-button-two {
   color: #42d4f4;
  float: left; /*was right*/
  font-weight: bold;
  cursor: pointer;
}
#three-option-button-three {
  color: #ddffdd;
  float: left;
  font-weight: bold;
  cursor: pointer;
}

/*==========================================
    Spinner
============================================*/

#dataSpinner {
  text-align: center;
  display: none;
  margin: auto;
  position: absolute;
  top: 25%;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}
#deviceInfo-div {
  z-index: 1;
}

/*==========================================
    Upload Progress
============================================*/

#review-upload {
  width: 100%;
  text-align: center;
  display: none;
  margin: auto;
  position: absolute;
  top: 25%;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
}

/*==========================================
    Customer Search
===========================================*/

#customerSearch {
  padding-top: 0%;
}
#search-input {
  font-size: 20px;
}

/*==========================================
    Signature styling
============================================*/

#sigDoc {}

/*==========================================
    Iframe styling
============================================*/

#electronicDocumentViewPage {
    position: relative;
    height: 0;
    overflow: scroll;
}
#documentIframe .iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*==========================================
    Signature field styling
============================================*/
#signature-label {
  color: #8d9093;
  font-size: 12px;
  padding: 0px;
  position: relative;
  z-index: 2;
  float: left;
  margin: 110px 0px 0px 40px;
}
#signature {
  opacity: 0;
}


/*================================================================
    Bootstrap panels (attachments, maintenance CI's, etc.)
    Keeps the panel info from overlapping on smaller devices
=================================================================*/
.panel-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*================================================================
    Removes left and right padding (gutterspace) of an element
    Used in bootstrap panels
=================================================================*/
.no-padding{
    padding-right:0;
    padding-left:0;
}

#barscanner-site-viewport.viewport, #barscanner-customer-viewport.viewport {
    position: relative;
    max-height: 200px;
    overflow: hidden;
}

#barscanner-site-viewport.viewport > canvas, #barscanner-site-viewport.viewport > video, #barscanner-customer-viewport.viewport > canvas, #barscanner-customer-viewport.viewport > video {
    max-width: 300px;
    width: 100%;
}