/* Canto and Choreo Panels ----------------------------------------------------------------------*/

.perf-panel {
  display: flex;
  flex-flow: column nowrap;
  position: absolute;
  top: 41px;
  right: 0;
  width: 0;
  background: #272d30;  /* Dark Blue Gray .darker.more */
  opacity: 0.85;
  color: #D4CDC9;       /* Warm Light Grey */
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  padding: 0;
  z-index: 1025;
}

/* main header */
.perf-panel .main-header {
  display: flex;
  flex-flow: row nowrap;
  min-height: 40px;
  padding-left: 20px;
}

.perf-panel .main-header .title {
  flex: 1 1 auto;   /* expand or contract to fill avail space */
  color: #e7d4ad; /* Pale Gold */
  font-size: 22px;
  font-weight: 600;
  padding: 18px 5px 0 0;
  cursor: default;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.perf-panel .main-header .buttons {
  display: flex;
  flex-flow: row nowrap;
}

.perf-panel .main-header .buttons .button {
  color: #e7d4ad; /* Pale Gold */  /*#A4BECE; /* Cornflower */
  font-size: 24px;
  font-weight: 400;
  line-height: 18px;
  padding: 6px 8px 6px 8px;
  cursor: pointer;
}

.perf-panel .main-header .buttons .button.w16 { min-width: 16px; }
.perf-panel .main-header .buttons .button.w18 { min-width: 18px; }
.perf-panel .main-header .buttons .button.w20 { min-width: 20px; }
.perf-panel .main-header .buttons .button.h18 { height: 18px; }

.perf-panel .main-header .buttons .button:hover {
  background: rgba(161, 221, 159, .35);  /* Mint */
  color: #d3e8f5;                        /* Cornflower.lighter */
}

.perf-panel .main-header .buttons .button.selected {
  background: rgba(161, 221, 159, .50);  /* Mint */
}

.perf-panel .main-header .buttons .button.user-coding {
  color: #e7d4ad; /* Pale Gold */  /*#A4BECE;  /* Cornflower */
  font-size: 24px;
  font-weight: 400;
  line-height: 18px;
  padding: 6px 8px 6px 8px;
  margin-left: 5px;
  z-index: 1140;
}

.perf-panel .main-header .buttons .button.user-coding:hover {
  background: rgba(159, 221, 202, 0.35);  /* Teal */
  border-radius:  0 0 7px 7px;
  cursor: pointer;
}

.perf-panel .main-header .buttons .button.user-coding.selected {
  background: rgba(159, 221, 202, 0.55);  /* Teal */
  border-radius:  0 0 7px 7px;
}

.perf-panel .main-header .buttons .button.canto-schema {
  color: #9fddca;  /* Teal */
  font-size: 24px;
  font-weight: 400;
  line-height: 18px;
  padding: 6px 8px 6px 8px;
  margin-left: 5px;
  z-index: 1141;
}

.perf-panel .main-header .buttons .button.canto-schema:hover {
  background: rgba(159, 221, 202, 0.35);  /* Teal */
  border-radius:  0 0 7px 7px;
  cursor: pointer;
}

.perf-panel .main-header .buttons .button.canto-schema.selected {
  background: rgba(159, 221, 202, 0.55);  /* Teal */
  border-radius:  0 0 7px 7px;
}

/* user coding subpanel */
.perf-panel .user-coding-subpanel {
  margin: 10px 0 0 0;
}

.perf-panel .user-coding-subpanel .user-coding-header {
  display: flex;
  flex-flow: row nowrap;
  gap: 4px;
  height: 40px;
  background: rgba(231, 212, 173, .35);     /* Pale Gold */
  border-bottom: rgba(231, 212, 173, .85);  /* Pale Gold */
  color: #D4CDC9;                           /* Light Warm Gray */  /*#d3e8f5; /* Cornflower .lighter */
  font-size: 12px;
  line-height: 40px;
  padding: 0 10px 0 20px;
}

.perf-panel .user-coding-subpanel .user-coding-header .title {
  flex: 1 1 auto;     /* expand or contract to fill avail space */
  color: #9fddca; /* Teal *?  /*#e7d4ad;   /* Pale Gold */
  font-size: 16px;
  margin-right: 10px;
  cursor: default;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.perf-panel .user-coding-subpanel .user-coding-header .nav-btn {
  font-size: 24px;
  font-weight: 400;
  line-height: 24px;
  height: 28px;
  width: 28px;
  min-width: 28px;
  cursor: pointer;
  padding: 6px 3px;
}

.perf-panel .user-coding-subpanel .user-coding-header .nav-btn:hover {
  background: rgba(159, 221, 202, 0.35);  /* Teal */
}

.perf-panel .user-coding-subpanel .user-coding-header .nav-btn.selected {
  background: rgba(159, 221, 202, 0.55);  /* Teal */
}


/* tab buttons are placed above main-content so that they don't scroll */
.perf-panel .tab-button-frame {
  margin: 10px 0 0 0;
  padding: 0 0 0 15px;
}

/* main content - the part that can overflow and scroll */
.perf-panel .main-content {
  flex: 1 1 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 0 0 0 15px;
  scrollbar-color: #878382 rgba(0, 0, 0, 0.2); /* thumb, track */
  scrollbar-width: thin;
}

.perf-panel .main-content.wide {
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  margin: 15px 0 0 0;
}

.perf-panel .main-content.tabbed {
  padding-top: 10px;
}

.perf-panel .main-content .metadata {
  overflow-wrap: break-word;
}

.perf-panel .main-content.wide .metadata {
  flex: 0 0 auto; /* size will be bound to the coding sheet width */
  width: 200px;
  min-width: 200px;
  padding-top: 15px;  /* so that song name lines up with row 1. on the coding side */
}

.perf-panel .main-content .metadata p {
  background-color: transparent;
  border-radius: 5px;
  margin: 1px 0 1px 0;
  padding: 4px 6px 4px 6px;
}

.perf-panel .main-content .metadata p.user {
  background-color:rgba(64, 240, 232, 0.25);
}

.perf-panel .main-content.wide .coding {
  flex: 0 0 auto; /* size will be bound to the coding sheet width */
  width: 490px;
}

.perf-panel .main-content .coding {
  background-color: transparent;
  border-radius: 12px;
  margin: 0;
  padding: 10px;
}

.perf-panel .main-content .coding.user {
  background: rgba(231, 212, 173, .15); /* Pale Gold */
  min-height: 1120px;
  margin-bottom: 10px;
}

.perf-panel .main-content .coding .user-comment { /* a textarea */
  background: rgba(212, 205, 201, .25); /* warm light grey */
  border: rgba(212, 205, 201, 0.65) 1px solid;
  border-radius: 7px;
  font-size: 15px;
  color: #4dc;  /*#6ee;  /*#4ca;*/
  width: 470px;
  padding: 8px 10px;
  margin-top: 15px;
  resize: none;
}

.perf-panel .main-content.tabbed .coding .user-comment {
  width: 447px;
}

.perf-panel ::placeholder {
  color: #d4cdc9 !important;
}

.perf-panel textarea:focus {
  outline: none !important;
  border-color: rgba(68, 238, 221, 0.35);
}

/* presentation details */
.canto-subtitle, .choreo-subtitle {
  color: #e7d4ad; /* Pale Gold */
  font-weight: 600;
}

.canto-heading, .choreo-heading {
  color: #f7efeb;  /* Warm Light Grey .brighter */
  font-weight: 600;
}

.canto-lyrics, .choreo-lyrics {
  font-size: 12px;
}

#choreoVideo, #journeyVideo {
  max-width: 720px;
}