#triangle-graph {
  width: 60%;
  height: 100%;
}

.triangle {
  fill: url(#triangle-gradient);
  /* stroke: #000; */
  fill-rule: evenodd;
}

.triangle-stop-left {
  stop-color: #5bb;
}

.triangle-stop-right {
  stop-color: #66f;
}

.state {
  fill: #ddd;
  stroke: #ddd;
}

.pin {
  fill: #0af;
}

.pin-hole {
  fill: #fff;
}

.acm-global {
  --bg-light: #fff;
  --bg-dark: linear-gradient(to bottom, #4a4a4a, #222);
  --font-light: #000;
  --font-dark: #fff;
  --page-bg-light: #eee;
  --page-bg-dark: #1a1a1a;
  --font-secondary: #aaa;
  --altus-blue: #0af;
  color: var(--font-primary);
  background: var(--page-bg-primary);
  display: grid;
  grid-template-columns: 1fr auto;
  height: 100%;
  overflow: auto;
}

.acm-global * {
  font-family: "Futura PT";
}

.acm-dark {
  --font-primary: var(--font-dark);
  --bg-primary: var(--bg-dark);
  --page-bg-primary: var(--page-bg-dark);
}

.acm-light {
  --font-primary: var(--font-light);
  --bg-primary: var(--bg-light);
  --page-bg-primary: var(--page-bg-light);
}

.acm-main {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 375px 1fr;
  grid-template-areas: "trg trg trg map map" "grp grp grp cal cal";
  gap: 25px;
  padding: 30px;
  height: 100%;
  min-height: 750px;
  min-width: 1650px;
  overflow: auto;
}

.acm-triangle-graph-card {
  grid-area: trg;
}

.acm-triangle-graph {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.acm-map-card {
  grid-area: map;
}

.acm-card.acm-map-card hr {
  margin-bottom: 0px;
}

.acm-map {
  display: grid;
  grid-template-columns: repeat(3, calc((100% - 20px) / 3));
  grid-template-rows: calc(75% - 10px) 25%;
  grid-template-areas: "bsm bsm bsm" "int off pla";
  gap: 10px;
}

.acm-legend-circle {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 1px solid var(--font-primary);
  border-radius: 50%;
  padding-top: 10px;
  margin-right: 10px;
  text-align: center;
  opacity: 0.5;
}

.acm-key {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin: 5px 0px;
}

.acm-drafts {
  /* width: 300px; */
  width: 0px;
  background: linear-gradient(to bottom, #5bb, #66f);
}

.acm-graph-card {
  grid-area: grp;
  grid-template-rows: 100%;
}

.acm-graph {
  height: 100%;
}

.acm-card {
  background: var(--bg-primary);
  color: var(--font-primary);
  border-radius: 20px;
  box-shadow: 0px 0px 10px 0px #0005;
  --card-padding-top: 0.85rem;
  --card-padding-bottom: 1.5rem;
  --card-padding-hor: 2.5rem;
  padding: var(--card-padding-top) var(--card-padding-hor)
    var(--card-padding-bottom);
  overflow: hidden;
}

.acm-card-header {
  margin: 0px 0px var(--card-padding-top);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.acm-card-header h2 {
  margin: 0px;
  letter-spacing: 0.08em;
  font-size: 1.2em;
}

.acm-card-header p {
  margin: 0px;
  cursor: pointer;
  color: var(--altus-blue);
}

.acm-calendar-card .acm-card-header p {
  cursor: unset;
  color: var(--font-primary);
}

.acm-card-body {
  height: calc(
    100% - 25px - var(--card-padding-top) - var(--card-padding-bottom)
  );
}

.acm-card hr {
  margin: 0px calc(var(--card-padding-hor) * -1) var(--card-padding-bottom);
  border-color: var(--font-primary);
  opacity: 0.25;
}

#basic-map {
  grid-area: bsm;
}

.acm-map-legend {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  font-size: 12px;
}

.acm-key-section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.acm-line-carousel {
  height: calc(100% - 37px - var(--card-padding-bottom));
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.acm-line-carousel::-webkit-scrollbar {
  display: none;
}

.acm-line-carousel .x-axis,
.acm-line-carousel .y-axis {
  font-size: 16px;
}

#acm-clientInterested-graph,
#acm-interviews-graph,
#acm-offerAnticipated-graph,
#acm-offerExtended-graph,
#acm-placed-graph {
  /* position: relative; */
  display: inline-block;
  height: 100%;
  width: 100%;
}

.acm-calendar-controls {
  text-align: center;
}

.acm-calendar-card {
  grid-area: cal;
}

.acm-calendar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.acm-interviews-circle {
  grid-area: int;
}

.acm-offers-circle {
  grid-area: off;
}

.acm-placements-circle {
  grid-area: pla;
}

.cpt-background {
  fill: #eee;
}

.cpt-interviews {
  fill: #0ca;
}

.cpt-offer-extended {
  fill: #068;
}

.cpt-placed {
  fill: #0af;
}

#interviews-doughnut,
#offers-doughnut,
#placements-doughnut {
  width: 100%;
  height: calc(100% - 30px);
}

.acm-key-section p {
  font-size: 12px;
  margin-bottom: 1em;
}

.acm-graph-controls {
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  font-size: 1.2em;
}

.acm-graph-control {
  cursor: pointer;
}

.acm-graph-wrapper {
  height: 100%;
}

.acm-triangle-legend {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
}

.acm-circle-graph {
  width: 100%;
  position: relative;
  height: calc(100% - 1em);
}

.acm-key-value {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
}

#interviews-doughnut,
#offers-doughnut,
#placements-doughnut {
  width: 100%;
  height: 100%;
}

.acm-carousel-controls {
  text-align: center;
}

.acm-carousel-control {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid var(--font-secondary);
  border-radius: 10px;
  /* background: #fff; */
  margin-right: 5px;
  cursor: pointer;
}

.acm-control-selected {
  background: var(--font-secondary);
}

.acm-graph-labels {
  display: inline-block;
  width: 210px;
  height: 1em;
  overflow: hidden;
  white-space: nowrap;
}

.acm-graph-label {
  display: inline-block;
  width: 210px;
  letter-spacing: 0.08em;
}

.tri-connector {
  stroke: var(--font-primary);
  stroke-opacity: 0.5;
}

.tri-label-circle {
  stroke: var(--font-primary);
  stroke-opacity: 0.5;
}

.tri-label {
  fill: var(--font-primary);
  fill-opacity: 0.5;
  font-size: 16px;
}

.acm-next-graph {
  display: inline-block;
  width: 0px;
  height: 0px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid var(--altus-blue);
}

.acm-prev-graph {
  display: inline-block;
  width: 0px;
  height: 0px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 10px solid var(--altus-blue);
}

.acm-time-options {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.acm-time-option {
  cursor: pointer;
  margin: 0px;
}

.acm-option-label {
  color: var(--font-primary);
  opacity: 0.5;
  letter-spacing: 0.25em;
  font-size: 14px;
  margin: 0px;
}

.acm-time-selected {
  color: var(--altus-blue);
}

.acm-calendar-wrapper {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: calc(100% - 45px - var(--card-padding-top));
}

.acm-calendar-wrapper hr {
  margin-top: var(--card-padding-bottom);
  margin-bottom: var(--card-padding-bottom);
}

.acm-custom-date-inputs {
  text-align: center;
  margin: 0px;
}

.acm-custom-date-inputs input:first-child {
  margin-right: 1.5em;
}

.acm-custom-date-inputs input:last-child {
  margin-left: 1.5em;
}

.acm-custom-date-inputs input {
  background: transparent;
  border: 1px solid #999999;
  position: relative;
  padding-right: 10px;
}

.acm-custom-date-inputs input::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background: #00000000;
  cursor: pointer;
}

.acm-interviews {
  fill: #0ca;
}

.acm-offers {
  fill: #068;
}

.acm-placements {
  fill: #0af;
}

.acm-calendar-icon {
  margin-left: 1em;
}

.acm-card-sub-header {
  display: flex;
  justify-content: center;
}

.grid {
  stroke-dasharray: 5;
}