* { font-family: 'Roboto', sans-serif; -webkit-overflow-scrolling: touch; }
html, body { height: 100vh; width: 100vw; padding: 0; margin: 0; background-color: white; }

:root {
  --main-green: rgb(113, 181, 44);
}

@keyframes spin {
  from { transform: rotate( 0deg ) }
  to { transform: rotate( 360deg ) }
}

#app { height: 100%; width: 100%;  }
.myButt { background-color: var( --main-green ); color: white; font-size: 8px }
.myButtN { background-color: var( --main-green ); color: white; font-weight: bold }
.butWhite { background-color: whitesmoke; }
.centered { height: 100%; display: flex; justify-content: center; align-items: center }

.navBar { display: flex; flex-direction: row; background-color: white; height: 36px; align-items: center; padding-left: 10px;
    padding-right: 10px; border-bottom: 1px solid #878787; 
}
.navBar div, .hdl { font-size: 20px; font-weight: bold; flex: 1; text-align: center;  }

.mainContainer { display: flex; height: 100%; width: 100%; overflow: hidden; }
.splash { height: 100%; width: 100%; padding: 8px;
  background-image: url( icon192.png); background-repeat: no-repeat; background-position: center; }

.aboutBody { display: flex; flex-direction: column; height: 90%; justify-content: center; margin: 14px; background-color: #CECECE }
.row { flex-direction: row; line-height: 28px; }
.appLogo { width: 180px; height: 180px;  }

.addGrave { display: flex; flex-direction: column; width: 96%; margin-top: 10px; padding: 0 8px 0 8px }

.inRow { display: flex; flex-direction: row; justify-content: space-between; }
.btRow { display: flex; flex-direction: row; justify-content: space-around; margin-top: 4px }
.imgBox { display: flex; width: 100%; justify-content: center; align-items: center; }
.addGrave img { height: 300px; margin-top: 10px;  }

/*.gridCont { display: grid; grid-template-columns: 1.25fr 2fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 1px 1px; margin-top: 2px; font-size: 22px; font-weight: bold; color: black; line-height: 1.2em;
  background-color: floralwhite; padding: 4px; }
.gridCont div.label { color: rgb(113, 181, 44); }
*/

.action { text-align: center; margin-top: 50px; font-size: 28px; color: #CECECE; }

.metaCont2 { display: flex; flex-direction: column; color: black; 
  background-color: white; padding: 8px; }
.metaItem { flex: 1; background-color: floralwhite; padding-left: 4px; margin-right: 4px; padding-top: 4px; margin-bottom: 4px }
.metaLabel { font-size: 14px; color: var( --main-green );  }
.metaValue { font-size: 16px; margin-bottom: 8px;  }

.metaCont { display: flex; flex-direction: column; margin-top: 2px; font-size: 20px; font-weight: bold; color: black; line-height: 1.2em;
  background-color: floralwhite; padding: 4px; }
.metaCont .row { display: flex; flex-direction: row; line-height: 28px; }
.metaCont .row .label { width: 38%; color: var( --main-green ) }

.getPos { display: flex; flex-direction: column; width: 100%; max-height: 98vh; }
#mapContainer { flex: 1; width: 100%; }
.posData { height: 160px; background-color: whitesmoke;  }
.posData .tab { display: grid; grid-template-columns: 1fr 2fr; grid-auto-rows: auto; max-height: 375px;
  grid-gap: 1px 1px; padding: 18px; color: var( --main-green ); font-size: 18px; }
/*.posData .btRow { display: flex; flex-direction: row; justify-content: space-around; margin-top: 4px }*/

#infoBar { height: 140px; background-color: white; border-top: 1px dotted var( --main-green ); transition: height 1s; }
#infoBar .scan { display: flex; height: 100%; justify-content: center; align-items: center; }
#infoBar .scan p { font-size: 22px; color: var( --main-green ); font-weight: bold }
#infoBar .info { display: flex; height: 100%; flex-direction: column }
#infoBar .info .close { height: 10px; width: 80px; background-color: var( --main-green ); margin: auto; border-radius: 40px; margin-bottom: 8px }
#infoBar .info .data { flex: 1; display:flex; flex-direction: row; width: 100%; padding: 0 8px 2px 8px }
#infoBar .info .data .meta{ flex: 1; height: 90%;
  display: grid; grid-template-columns: 1fr 2fr; grid-auto-rows: auto;
  grid-gap: 1px 1px; padding: 18px; color: black; font-size: 18px; 
}
#infoBar .info .data .img { width: 33%;  }
#infoBar .info .data .img img { width: 100%; height: 100% }

.srchBox { display: flex; flex-direction: column; width: 100%; }
.srchBox h2 { margin-left: 20px; margin-top: 20px; color: var( --main-green ) }

.waitLogin { display: flex; flex-direction: column; justify-content: center; align-items: center; font-weight: bold; font-size: 24px; text-align: center;
  color: rgb(113, 181, 44); }
.placeholderImg { animation-name: spin; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: linear; }

.carouselItem { display: flex; flex-direction: column; min-height: 320px; max-height: 340px;background-color: white; 
  justify-content: center; align-items: center; }
.imgSubLine { font-size: 18px; margin-top: 14px }

.courtSrch { height: 100%; width: 100%; overflow-y: scroll }

#_xClose { height: 8px; width: 40px; border-bottom: 4px solid var( --main-green ) }

.cardContainer { height: 100%; width: 100%; background-color: yellow; overflow: hidden; }
.trackToolBar { height: 140px; padding: 10px 4px 4px 4px; border-top: 2px solid var( --main-green ); overflow-y: auto }
.tbPanel { display: flex; height: 60%; width: 100%; justify-content: center; align-items: center }

.flexBox { display: flex; justify-content: center; align-items: center }
.upldItem { display: flex; flex-direction: row; justify-content: flex-start; align-items: center }

.brief { fonts-size: 10px; color: lightgray }
.path { color: rgb(113, 181, 44) }

@media only screen and (orientation: landscape) {
  .aboutBody { display: flex; flex-direction: column; height: 90%; justify-content: center; margin: auto; background-color: white; }
  .row { flex-direction: row; line-height: 20px; }
  .appLogo { width: 120px; height: 120px;  }

}


.am-drawer-overlay { background-color: rgba( 0, 0, 0, 0 ) !important; }
.am-drawer-sidebar { background-color: lightgreen !important; opacity: .9 !important; z-index: 999 !important }
.am-card { margin: 18px !important }

.am-picker-popup-item { color: var( --main-green ) }

.am-modal-button-group-v .am-modal-button { color: var( --main-green ) !important }
.am-modal-button-group-h .am-modal-button { color: var( --main-green ) !important }

.am-progress-bar { border: 2px var( --main-green ) solid !important }