body * {
  display: block;
}

script {
  display: none;
}

html,
body {
  margin: 0;
  padding: 0;

  font-size: 8pt;
  font-family: "San Francisco", "Helvetica", "arial", sans-serif;
  color: #667;
  overscroll-behavior: none;
}

body {
  background: #c7c7c7;
  background: linear-gradient(
    149deg,
    rgba(199, 199, 199, 1) 0%,
    rgba(237, 237, 237, 1) 100%
  );
  background-attachment: fixed;
  color: black;
}

label {
  display: block;
  font-size: 10pt;
  color: #888;
  margin-bottom: 3px;
}

h1,
h2,
h3,
h4 {
  font-family: "San Francisco", "Helvetica", "arial", sans-serif;
  font-optical-sizing: auto;
}

h1 {
  font-size: 26pt;
}

h2 {
  font-size: 22pt;
}

h2 {
  font-size: 18pt;
}

a {
  color: inherit;
  text-decoration: none;
}

phone,
memnum {
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
}

input,
textarea,
button {
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-size: 14pt;
  display: inline;
}

input,
button {
  display: inline-block;
}

button {
  padding: 6px 12px;
}

back{
	background: black;
	border: 2px solid white;
	color: white;
	padding: 11px 22px;
	text-align: center;
	vertical-align: middle;
	margin-bottom: 22px;
	display: inline-block;
	border-radius: 22px;
	cursor: pointer;
	font-size: 16px;
	margin: 11px 44px 0;
}

members,
form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

member,
lookupform {
  background: white;
  box-sizing: border-box;
  min-width: 500px;
  max-width: 600px;
  height: auto;
  margin: 44px;
  padding: 22px;

  font-family: "San Francisco", "Helvetica", "arial", sans-serif;
  font-size: 14pt;

  border: 1px solid #aaa;
  border-radius: 8px;
  overflow: hidden;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  position: relative;
}

member::before,
lookupform::before {
  content: "";
  background: url("./assets/RLO_logo_hrz_wht.png") 44px center no-repeat black;
  background-size: 200px;
  height: 70px;
  display: block;
  position: relative;
  top: -22px;
  left: -44px;
  width: calc(100% + 88px);
  /*border-top-right-radius: 5px;
	border-top-left-radius: 5px;*/
}

member.selected {
  position: fixed;
}

member.hidden {
  display: none;
}

member close{
  width: 32px;
  height: 32px;
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  background: black;
  color: white;
  cursor: pointer;
 
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  font-size: 24px;
  
  border: 2px solid white;
  box-shadow: 0 0 7px white;
}

member close::before{
  content: "×";
  color: white;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  font-size: 24px;
  display: block;
  width: 100%;
  height: 100%;
}

lookupform label {
  display: inline-block;
}

lookupform {
  margin: 44px 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

lookupform button{
  width: 100%;
  text-align: center;
}

/*member.selected{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) !important;
}*/

name {
  font-weight: bold;
  font-size: 22pt;
}

.contained {
  background: #f9fafc;
  border-radius: 3px;
  padding: 14px;
  box-sizing: border-box;
  margin: 12px 0;
  padding-left: 60px;
  position: relative;
}

birthday,
memberanniv {
  background: #60ec65;
  padding: 6px;
  box-sizing: border-box;
  padding-left: 56px;
  width: 100%;
  position: relative;
  top: -22px;
  left: -22px;
  font-size: 12pt;
}

phone::before,
email::before,
address::before,
memnum::before,
status::before,
notes::before,
time::before,
course::before,
qty::before,
birthday::before,
memberanniv::before,
gatecode::before,
eventcode::before {
  content: "";
  display: block;
  width: 20px;
  height: 100%;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 22px;
}

time::before,
course::before,
qty::before {
  left: 0;
}

phone::before {
  background-image: url(./assets/phone.png);
}

email::before {
  background-image: url(./assets/email.png);
}

address::before {
  background-image: url(./assets/pin.png);
}

memnum::before {
  background-image: url(./assets/hash.png);
}

status::before {
  background-image: url(./assets/shield.png);
}

time::before {
  background-image: url(./assets/clock.png);
}

course::before {
  background-image: url(./assets/golf-pin.png);
}

qty::before {
  background-image: url(./assets/golfer.png);
}

birthday::before {
  background-image: url(./assets/birthday.png);
}

memberanniv::before {
  background-image: url(./assets/special-date.png);
}

address {
  font-style: normal;
}

gatecode::before,
eventcode::before {
  background-image: url(./assets/keys.png);
}

notes::before {
  background-image: url(./assets/notes.png);
  height: 20px;
  background-position: center center;
  top: 22px;
}

notes label {
  top: 10px;
  position: relative;
  color: black;
  font-size: 12pt;
}

notes textarea {
  margin-top: 18px;
  width: 100%;
}

member.caller-unknown name {
  color: #a00;
}

memberimage {
  width: 200px;
  height: 200px;
  background-color: #555;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border: 3px solid white;
  border-radius: 50%;
  border-top-right-radius: 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 2;
}

homestead {
  width: 200px;
  height: 100px;
  background: transparent url(./assets/homestead.png) no-repeat 50% 50%;
  background-size: contain;
  position: absolute;
  z-index: 3;
  right: -10px;
  top: 140px;
}

notelog {
  margin: 0;
  padding: 22px;
  box-sizing: border-box;
  border: 1px solid #e8e8e8;
  border-radius: 5px;
}

notelog row {
  margin: 22px 0;
}

notelog row date {
  font-size: 9pt;
  color: #555;
}

upcoming {
  display: block;
  position: absolute;
  box-sizing: border-box;

  top: 44px;
  right: 44px;
  width: calc(100vw - 588px - 44px);
}

teetimes,
activities,
courts,
giftcards,
dining {
  background: white;
  position: relative;
  padding: 22px;
  margin-bottom: 44px;
  width: 100%;
  border: 1px solid #aaa;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  font-size: 14pt;
  box-sizing: border-box;
}

teetimes teetime,
activities activity,
courts court,
giftcards giftcard,
dining reservation {
  margin: 22px 0;
  padding: 11px;
}

teetimes teetime detail,
activities activity detail,
courts court detail,
giftcards giftcard detail,
dining reservation detail {
  display: table;
  width: 100%;
}

teetimes teetime detail > *,
activities activity detail > *,
courts court detail > *,
giftcards giftcard detail > *,
dining reservation detail > * {
  display: table-cell;
}

teetimes teetime conf,
activities activity conf,
courts court conf,
giftcards giftcard conf,
dining reservation conf {
  font-size: 14pt;
  color: #667;
  margin-bottom: 11px;
}

teetimes teetime date,
teetimes teetime time,
teetimes teetime qty,
activities activity date,
activities activity time,
activities activity qty,
courts court date,
courts court time,
courts court qty,
giftcards giftcard date,
giftcards giftcard time,
giftcards giftcard qty,
dining reservation date,
dining reservation time,
dining reservation qty {
  width: 100px;
  vertical-align: middle;
  position: relative;
}

teetimes teetime time,
activities activity time,
courts court time,
giftcards giftcard time,
dining reservation time {
  padding-left: 22px;
}

teetimes teetime course,
activities activity activityname,
courts court courtname,
giftcards giftcard cardnumber,
dining reservation venuename,
dining reservation seating {
  vertical-align: middle;
  position: relative;
}

teetimes teetime time,
teetimes teetime course,
teetimes teetime qty,
activities activity time,
activities activity activityname,
activities activity qty,
courts court time,
courts court courtname,
courts court qty,
giftcards giftcard time,
giftcards giftcard qty,
giftcards giftcard cardnumber, 
dining reservation time,
dining reservation venuename,
dining reservation qty {
  position: relative;
  left: 44px;
  padding-left: 33px;
}

teetimes teetime:nth-child(odd),
activities activity:nth-child(odd),
courts court:nth-child(odd),
giftcards giftcard:nth-child(odd),
dining reservation:nth-child(odd) {
  background: #f9fafc;
}

teetimes teetime:nth-child(even),
activities activity:nth-child(even),
courts court:nth-child(even),
giftcards giftcard:nth-child(even),
dining reservation:nth-child(even) {
  background: white;
}

teetimes teetime date,
activities activity date,
courts court date,
giftcards giftcard date,
dining reservation date {
  border: 1px solid #667;

  width: 44px;
  height: 44px;
}

teetimes teetime holes {
  font-size: 12pt;
  color: #abacae;
  display: inline-block;
}

teetimes teetime date month,
activities activity date month,
courts court date month,
giftcards giftcard date month,
dining reservation date month {
  background: #abacae;
  color: white;
  font-weight: bold;
  font-size: 9pt;
  text-align: center;
  width: 100%;
  height: 18px;
  vertical-align: middle;
  box-sizing: border-box;
  text-transform: uppercase;
  box-sizing: border-box;
  padding-top: 2px;
}

teetimes teetime date day,
activities activity date day,
courts court date day,
giftcards giftcard date day,
dining reservation date day {
  color: #667;
  font-weight: bold;
  font-size: 18pt;
  text-align: center;
  vertical-align: middle;
  width: 100%;
}

teetimes teetime date year,
activities activity date year,
courts court date year,
giftcards giftcard date year,
dining reservation date year {
  color: black;
  font-weight: bold;
  font-size: 12pt;
  text-align: center;
  vertical-align: middle;
  width: 100%;
}

giftcards giftcard expires{
	font-size: 12pt;
	width: 70px;
}

dining reservation note {
  margin-top: 11px;
  font-size: 10pt;
  color: #888;
  margin-bottom: 3px;
}

loader {
  width: 100%;
  text-align: center;
  position: relative;
  top: 88px;
}

loader p {
  display: block;
  width: 100%;
  text-align: center;
  padding: 22px;
  box-sizing: border-box;
  font-size: 22pt;
}

.loader {
  color: #0a431c;
  font-size: 10px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  animation: mulShdSpin 1.3s infinite linear;
  transform: translateZ(0);
  display: inline-block;
}

@keyframes mulShdSpin {
  0%,
  100% {
    box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em,
      0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
  }
  12.5% {
    box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em,
      0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  25% {
    box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0,
      0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
  }
  37.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em,
      0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  50% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em,
      0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
  }
  62.5% {
    box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
      0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
  }
  75% {
    box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em,
      0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
  }
  87.5% {
    box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
      0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
  }
}


@media( max-width: 750px ){
	
	back{
		margin: 11px 11px 0;
	}
	
	member,
    lookupform{
	  min-width: 0;
	  max-width: 100%;
	  width: calc( 100% - 22px );
	  position: static;
      margin: 22px 11px;
	}
	
	member.selected{
		position: static;
	}
  
    lookupform {
      margin: 44px 11px;
      position: 2tatic;
      left: 0;
      transform: translateX(0);
    }
    
    homestead {
      width: 150px;
      height: 75px;
      top: 90px;
    }
	
	upcoming {
		display: block;
		position: static;
		box-sizing: border-box;
		width: calc(100% - 22px);
		margin: 0 11px;
	}
	
	teetimes,
	activities,
	courts,
	dining {
	  margin-bottom: 22px;
	}
	
	teetimes teetime time,
	teetimes teetime course,
	teetimes teetime qty,
	activities activity time,
	activities activity activityname,
	activities activity qty,
	courts court time,
	courts court name,
	courts court qty,
	dining reservation time,
	dining reservation venuename,
	dining reservation qty {
		left: 22px;
		padding-left: 22px;
	}
	
	teetimes teetime time,
	activities activity time,
	courts court time,
	dining reservation time{
		width: 70px;
	}
	
	teetimes teetime qty,
	activities activity qty,
	courts court qty,
	dining reservation qty{
		width: 35px;
	}
	
	dining reservation venuename{
		padding-right: 22px;
	}
  
  memberimage {
    width: 130px;
    height: 130px;
  }
	
}