* {
  font-family: helvetica-light,Arial,sans-serif;
  font-size: 14px;
}

.auth-page { display: none; }
.on-auth-page .auth-page { display: block; }

.calls-page { display: none; }
.on-calls-page .calls-page {display: block; }

.auth-page {
  text-align: center;
  padding-top: 4em;
}
.auth-box {
  width: 500px;
  margin: 2em auto;
  padding: 1.5em 0px 1em;

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 2px 2px #999999;
  -webkit-box-shadow: 0px 2px 2px #999999;
  box-shadow: 0px 2px 2px #999999;
}
.auth-box label {
  display: inline-block;
  text-align: right;
  padding-right: 5px;
  width: 140px;
}
.auth-box input {
  font-family: 'helvetica';
  font-size: 14px;
  height: 26px;
  border: thin solid #2589ca;
  margin: 4px 0px;
  padding-left: 5px;
  padding-right: 5px;
  width: 220px;
  background-color: #FFF;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;  
}
.auth-message {
  margin: 1em auto 0px;
  color: #2589ca;
  width: 500px;
}

.queue-item {
  display: inline;
  margin: 4px;
}
.queue-item.active-call {
  background-color: #cdf;
}
.reps-list {
  display: inline;
  vertical-align: top;
}
.rep {
  display: inline-block;
  width: 220px;
  min-height: 96px;
  position: relative;
  vertical-align: top;
  text-align: center;
  margin: 16px 8px;
  border: thin solid #fff;
  background-color: #fff;

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 2px 2px #999999;
  -webkit-box-shadow: 0px 2px 2px #999999;
  box-shadow: 0px 2px 2px #999999;
}
.rep.available {
  border: thin solid #060;
}
.active-call .rep {
  border: thin solid #880;
}

.rep-name {
  color: #888;
  padding: 2px 0px;
  font-size: larger;
}
.available .rep-name {
  background-color: #060;
  color: #fff;
}
.active-call .rep-name {
  background-color: #880;
  color: #fff;
}
.rep-cell, .rep-avail {
  color: #888;
  font-size: smaller;
  margin: 4px 0px;
}
.me.unavailable .rep-avail,
.me.available .rep-avail {
  color: #000;
  cursor: pointer;
  width: 128px;
  padding: 2px 0px;
  background-color: #eee;
  margin: 4px auto;
  
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 2px 2px #999999;
  -webkit-box-shadow: 0px 2px 2px #999999;
  box-shadow: 0px 2px 2px #999999;
}
.available .rep-cell, .available .rep-avail {
  color: #000;
}
.active-call .rep-cell, .active-call .rep-avail {
  color: #000;
}
.rep-avail-btn {
  display: none;
  position: absolute;
  right: -8px;
  top: 8px;
  width: 48px;
  height: 48px;
  background-image: url("/img/phone.red.png");
  background-size: 48px 48px;
}
.available .rep-avail-btn {
  display: block;
  background-image: url("/img/phone.green.png");
}
.active-call .rep-avail-btn {
  display: block;
  background-image: url("/img/phone.yellow.png");
}
.im-calling .not-me .rep-avail-btn {
  display: block;
  background-image: url("/img/forward.green.png");
  cursor: pointer;
}
.im-calling .not-me.forwarding .rep-avail-btn {
  opacity: 0.25;
}

.notices {
    display: flex;
    justify-content: space-evenly;
    margin-top: 8px;
}
.notices .notice {
    border-radius: 32px;
    padding: 10px;
    border: 2px solid;
    display: inline-flex;
    width: 32px;
    height: 32px;
    font-size: 32px;
    justify-content: space-around;
    align-items: center;
}
.notices .notice-sms {
    background-color: #def;
    border-color: #789;
}
.notices .notice-unfinished {
    background-color: #fee;
    border-color: #f00;
}

.call {
  position: relative;
  display: inline-block;
  width: 312px;
  min-height: 96px;
  margin: 16px 8px;
  border: thin solid #48f;
  vertical-align: top;
  background-color: #fff;
  text-align: center;
  padding-bottom: 4px;

  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 2px 2px #999999;
  -webkit-box-shadow: 0px 2px 2px #999999;
  box-shadow: 0px 2px 2px #999999;
}
.call.unfinished {
  -moz-box-shadow: 0px 4px 4px #ff0000;
  -webkit-box-shadow: 0px 4px 4px #ff0000;
  box-shadow: 0px 4px 4px #ff0000;
}
.active-call .call {
  border-color: #880;
}
.call.sms {
  background-color: #def;
}
.call div {
  margin-top: 4px;
}
.call div.call-name {
  margin-top: 0px;
}

.call-name {
  color: #fff;
  padding: 2px 0px;
  font-size: larger;
  background-color: #48f;
}
.active-call .call-name {
  background-color: #880;
}

.call-time {
  font-size: smaller;
}

.call-agency-name, .call-agency-type {
  display: none;
}
.agency .call-agency-name, .agency .call-agency-type {
  display: inline;
}
.call-agency-type {
  font-style: italic;
}

.call-owner-row {
}
.sms .call-owner-row {
  display: none;
}
.call-owner-name {
  font-style: italic;
}
.call-owner input {
  margin-right: 4px;
}
.active-call .call-owner input {
  display: none;
}
.call-recording {
  position: absolute;
  top: 8px;
  right: -8px;
  cursor: pointer;
}
.active-call .call-recording {
  display: none;
}
.call-recording img {
  width: 48px;
  height: 48px;
}
.call-status-row {
}
.completed .call-status-row {
  display: none;
}
.call-status {
}
.call-sms-row {
  display: none;
  padding: 16px 4px;
}
.sms .call-sms-row {
  display: block;
}

button {
  font-family: 'helvetica';
  font-size: 14px;
  cursor: pointer;
  background: none;
  background-image: url(/img/btn-back.png);
  background-repeat: no-repeat;
  background-position: center top;
  border: none;
  height: 29px;
  width: 84px;
  margin: 12px 12px 0px;
}
button:hover, button:focus {
  background-image: url(/img/btn-back-over.png);
}
button.disabled {
  background-image: none;
  background-color: #eee;
  color: #999;
  cursor: default;
}