/* 
------------------------------------------------------------------------------------------------------------------------------
    globals / general
------------------------------------------------------------------------------------------------------------------------------
*/

:root {
   --main-dark-color: #003F59;
   --accent-1: #13688C;
   --accent-2: #4d9bd5;
   --accent-2-highlight: #1988C6;
   --accent-3: #8BC3E2;
   --accent-alt-dark: #70BB44;
   --accent-alt-light: #b4dd37;
   --error-color: #A00000;
   --green-color: #017201;
   --bg-light-1: #efefef;
   --bg-light-2: #cfcfcf;
   --bg-light-3: #afafaf;
   --bg-read-only-color: #cfcfcf;
   --bg-disabled: #c0c0c0;
   --bg-dark-1: #1E1E1E;
   --bg-dark-2: #2E2E2E;
   --bg-dark-3: #3E3E3E;
   --text-disabled-color: #7b7b7b;
   --text-light-color-1: #e0e0e0;
   --text-light-color-2: #d0d0d0;
   --text-light-color-3: #c0c0c0;
   --text-dark-color-1: #202020;
   --text-dark-color-2: #282828;
   --text-dark-color-3: #303030;
   --add-10-white: rgba(255, 255, 255, .1);
   --add-25-white: rgba(255, 255, 255, .25);
   --add-50-white: rgba(255, 255, 255, .50);
   --add-75-white: rgba(255, 255, 255, .75);
   --add-90-white: rgba(255, 255, 255, .90);
   --add-10-black: rgba(0, 0, 0, .1);
   --add-25-black: rgba(0, 0, 0, .25);
   --add-50-black: rgba(0, 0, 0, .50);
   --add-75-black: rgba(0, 0, 0, .75);
   --add-90-black: rgba(0, 0, 0, .90);
   --corner-radius: .35rem;
}

html, body {
   font-size: 14px;
   font-family: "Segoe UI",SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
   background: var(--bg-light-1);
   color: var(--text-dark-color-1);
   margin: 0;
   padding: 0;
}

@media (min-width: 768px) {
   html, body {
      font-size: 16px;
   }
}

a {
   text-decoration: none;
}

/*root container for everything*/
.main-root {
   margin: 0;
   padding: 0;
   display: block;
}

::-webkit-scrollbar {
   width: 0.65rem;
   height: 0.65rem;
}

::-webkit-scrollbar-track {
   background-color: #cfcfcf;
}

::-webkit-scrollbar-thumb {
   border-radius: .35rem;
   background-color: rgba(0, 63, 89, .5);
}

   ::-webkit-scrollbar-thumb:hover {
      background-color: #1988C6;
   }

a, .btn-link {
   color: #0071c1;
}

.btn-primary {
   color: #fff;
   background-color: #1b6ec2;
   border-color: #1861ac;
}

.content {
   padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
   outline: 1px solid #26b050;
}

.invalid {
   outline: 1px solid red;
}

.validation-message {
   color: red;
}

#blazor-error-ui {
   background: lightyellow;
   bottom: 0;
   box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
   display: none;
   left: 0;
   padding: 0.6rem 1.25rem 0.7rem 1.25rem;
   position: fixed;
   width: 100%;
   z-index: 1000;
}

   #blazor-error-ui .dismiss {
      cursor: pointer;
      position: absolute;
      right: 0.75rem;
      top: 0.5rem;
   }

.blazor-error-boundary {
   background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
   padding: 1rem 1rem 1rem 3.7rem;
   color: white;
}

   .blazor-error-boundary::after {
      content: "An error has occurred."
   }

/*
--------------------------------
 Landing page -- index
--------------------------------
*/

.main-content {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.logo source, .logo img {
   width: 90vw;
   max-width: 400px;
   margin: 2rem 0 1rem 0;
   display: block;
}

.landing {
   position: relative;
   text-align: center;
   color: white;
   width: 90vw;
   max-width: 1024px;
   min-width: 400px;
   margin: 0;
}

   .landing picture source, .landing img {
      width: 90vw;
      max-width: 1024px;
      min-width: 300px;
      margin: 0;
   }

.link-buttons {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-self: center;
   width: auto;
   gap: 1rem;
}

   .link-buttons a {
      width: 250px;
      height: 100px;
      min-width: 8rem;
      background-color: var(--accent-2);
      margin: .5rem auto;
      box-shadow: 3px 3px 5px var(--add-50-black);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      color: var(--text-light-color-1);
      font-size: .85rem;
      border-radius: var(--corner-radius);
   }

      .link-buttons a:hover {
         background-color: var(--accent-2-highlight);
         box-shadow: 3px 3px 5px var(--add-75-black);
         text-decoration: none;
      }

      .link-buttons a:active {
         box-shadow: 0 0 0 white;
      }

      .link-buttons a div {
         word-wrap: break-word;
         max-width: 225px;
         height: auto;
         align-items: center;
         font-size: 16px;
         text-align: center;
         font-weight: 500;
      }

/*
--------------------------------
 Video
--------------------------------
*/

#matched-rooms ul {
   list-style: none;
}

#matched-rooms li {
   border: 1px solid darkgray;
   border-radius: 4px;
   box-shadow: 2px 2px 4px lightgray;
   margin: 4px;
   padding: 4px;
   background-color: lightgray;
}

   #matched-rooms li:hover {
      background-color: purple;
   }

   #matched-rooms li.selected:hover {
      background-color: darkgreen;
   }

   #matched-rooms li.selected {
      background-color: green;
   }


/*
--------------------------------
 Util
--------------------------------
*/

.hidden {
   display: none !important;
}

.center-horiz {
   display: flex;
   flex-direction: column;
   align-items: center;
}


/*
--------------------------------
 Survey
--------------------------------
*/

.error-message {
   color: var(--error-color);
   font-weight: bold;
   font-size: 14px;
   min-height: 20px;
}

.error-color {
   color: var(--error-color);
}

.asterisk {
   font-size: 30px;
   vertical-align: sub;
   margin-left: 5px;
   font-weight: bold;
}

.survey-header {
   margin: 0;
   padding: 20px 10%;
   display: flex;
   flex-direction: row;
   height: auto;
   background-color: #231F20;
   color: #EEEEEE;
   min-height: 180px;
}

   .survey-header span {
      width: 196px;
      margin: auto 20px auto 0;
      height: 96px;
   }

   .survey-header img {
      display: block;
      width: 100%;
      height: auto;
      min-width: 10px;
   }

   .survey-header .survey-title-description {
      display: flex;
      flex-direction: column;
      margin-left: 20px;
      width: 100%;
   }

      .survey-header .survey-title-description h1 {
         font-weight: 400;
         font-size: 1.8em;
         min-height: 38px;
         color: #EEEEEE;
      }

      .survey-header .survey-title-description span {
         display: block;
         width: 100%;
         margin: auto 0;
         min-height: 100px;
         color: #EEEEEE;
      }

.survey-questions {
   color: #222222;
   padding: 0 5vw;
}

   .survey-questions .question {
      display: flex;
      flex-direction: row;
      margin: 10px 5vw;
      border: 2px solid #0ca6df;
      background-color: #FEFEFE;
      border-radius: 6px;
   }

@media (max-width: 768px) {
   .survey-questions .question {
      margin: 10px 0;
   }
}

.survey-questions .question.answered {
   background-color: #BBBBBB;
   pointer-events: none !important;
}

   .survey-questions .question.answered input, .survey-questions .question.answered textarea {
      background-color: #CCCCCC;
   }

.question-header {
   width: 10vw;
   min-width: 40px;
   background-color: #222222;
   color: #EEEEEE;
   font-size: 1.4em;
   font-weight: 600;
   position: relative;
   border-radius: 5px 0 0 5px;
}

   .question-header span {
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
   }

.question-details {
   display: flex;
   flex-direction: column;
   margin-left: 20px;
   padding: 10px 0;
   flex-grow: 1;
}

   .question-details label {
      margin: 10px 8px 0 0;
      font-size: 1.2rem;
      font-weight: 600;
   }

   .question-details input {
      margin: 10px 10px 10px 0;
   }

      .question-details input[type="radio"] {
         margin: 10px;
      }

.question-options {
   display: flex;
   flex-direction: column;
}

   .question-options .short {
      width: 150px;
   }

   .question-options input[type="checkbox"],
   .question-options input[type="radio"] {
      display: none;
   }

   .question-options label {
      display: inline-block;
      background-color: #204288;
      opacity: .8;
      color: white;
      padding: 8px;
      margin: 4px 8px 4px 0;
      font-size: 1rem;
      cursor: pointer;
      border-radius: 6px;
      display: flex;
      flex-direction: row;
      box-shadow: 3px 3px 5px #204288;
   }

      .question-options label .text {
         width: 1fr;
      }

      .question-options label .check {
         width: 32px;
      }

   .question-options a:link {
      text-decoration: none;
      color: #B4DD37;
   }

   .question-options a:visited {
      text-decoration: none;
      color: #B4DD37;
   }

   .question-options a:hover {
      text-decoration: none;
      color: #7B913B;
   }

   .question-options input[type="checkbox"]:hover + label,
   .question-options input[type="radio"]:hover + label {
      background-color: #204288;
      opacity: .6;
   }

   .question-options input[type="checkbox"]:active + label,
   .question-options input[type="radio"]:active + label {
      box-shadow: none;
   }

   .question-options input[type="checkbox"]:checked + label,
   .question-options input[type="radio"]:checked + label {
      background-color: #0ca6DF;
      opacity: 1;
      background-image: url(/img/check.svg);
      background-repeat: no-repeat;
      background-position: right 10px center;
   }

   .question-options input[type="checkbox"]:checked:hover + label,
   .question-options input[type="radio"]:checked:hover + label {
      opacity: .8;
   }

.survey-questions .check-mark {
   background-image: url(/img/check.svg);
   background-repeat: no-repeat;
   background-position: center;
}


.survey-questions input[type=text] {
   border: 1px solid #0ca6df;
   font-size: 16px;
   border-radius: 4px;
   padding: 12px 20px;
   margin: 8px 8px 8px 0;
   box-sizing: border-box;
}

   .survey-questions input[type=text]:focus {
      border: 1px solid #204288;
   }

.survey-questions .text-box-narrow {
   width: 50%;
   min-width: 150px;
}

.survey-questions .text-box-wide {
   min-width: 150px;
}

.survey-questions .large-text-area {
   height: 150px;
   min-width: 150px;
   border: 1px solid #0ca6df;
   font-size: 16px;
   border-radius: 4px;
   padding: 12px 20px;
   margin: 8px 8px 8px 0;
   box-sizing: border-box;
}

.aoc-logo {
   display: flex;
   flex-direction: column;
   align-items: center;
   font-size: .75em;
}

   .aoc-logo a {
      color: var(--text-dark-color-1);
      font-style: italic;
   }

   .aoc-logo img {
      width: 127px;
      height: 22px;
      min-width: 127px;
   }


.action-buttons {
   text-align: center;
   display: flex;
   flex-direction: row;
   margin: 5px 8px 5px 0;
}

.next-button {
   text-align: left !important;
   padding: 6px 6px 6px 20px;
   background-image: url(/img/arrow-right.svg);
   background-repeat: no-repeat;
   background-position: right 10px center;
}

.back-button {
   text-align: right !important;
   padding: 6px 20px 6px 6px;
   background-image: url(/img/arrow-left.svg);
   background-repeat: no-repeat;
   background-position: left 10px center;
}

.skip-button {
   text-align: left !important;
   padding: 6px 6px 6px 20px;
   background-image: url(/img/arrow-skip.svg);
   background-repeat: no-repeat;
   background-position: right 10px center;
}

.action-buttons button {
   background-color: #204288;
   border: none;
   color: white;
   margin: 6px;
   vertical-align: middle;
   text-decoration: none;
   font-size: .9em;
   cursor: pointer;
   height: 40px;
   width: 100px;
   background-repeat: no-repeat;
   border-radius: 6px;
   box-shadow: 3px 3px 5px #204288;
}

   .action-buttons button:hover {
      opacity: .8;
   }

   .action-buttons button:active {
      box-shadow: none;
   }

.question-slide-wrap {
   display: flex;
   flex-direction: column;
}

.question-slide-label {
   align-self: center;
   margin: 0.15rem 0.7rem 0px 0px;
   padding: .15rem .5rem;
   background-color: var(--accent-1);
   border-radius: .35rem;
   color: white;
   font-weight: bold;
}

   .question-slide {
      display: flex;
      flex-direction: row;
   }

   .question-slide span {
      background: #333333;
      color: #eeeeee;
      text-align: center;
      font-size: 13px;
      font-weight: 600;
      line-height: 35px;
      border-radius: 6px;
      padding: 5px 15px;
      margin: 0 5px;
   }

.question-details .slider {
   appearance: none;
   height: 20px;
   flex-grow: 1;
   background: #292929;
   outline: none;
   opacity: 0.7;
   -webkit-transition: .2s;
   transition: opacity .2s;
   border-radius: 10px;
   margin: 0;
   align-self: center;
}

.slider:hover {
   opacity: 1;
}

.slider::-webkit-slider-thumb {
   appearance: none;
   width: 15px;
   height: 40px;
   background: #204288;
   cursor: pointer;
   border-radius: 10px;
}

.slider::-moz-range-thumb {
   width: 15px;
   height: 40px;
   background: #204288;
   cursor: pointer;
   border-radius: 10px;
}

@media (max-width: 768px) {
   .question-slide {
      display: grid;
      grid-template-rows: auto auto;
      grid-template-columns: auto 1fr auto;
   }

      .question-slide label {
         padding: 5px;
         margin: 0;
      }

      .question-slide .low-label {
         grid-row: 2;
         grid-column: 1;
         border-radius: 0 6px 6px 6px;
         margin-left: 0px;
      }

      .question-slide .high-label {
         grid-row: 2;
         grid-column: 3;
         border-radius: 6px 0 6px 6px;
         margin-right: 8px;
      }

   .question-details .slider {
      grid-column: 1 / span 3;
      grid-row: 1;
      margin: 0 8px 15px 0;
   }
}

/* star rating control */

.star-rating {
   position: relative;
   height: 3rem;
   width: 15rem;
   background: url(/img/off.svg);
   background-size: 3rem 3rem;
}

   .star-rating .star-rating-label {
      margin: 0;
      position: absolute;
      height: 100%;
      background-size: 3rem 3rem;
   }

   .star-rating .star-rating-input {
      position: absolute;
      height: 1px;
      width: 1px;
      overflow: hidden;
      clip: rect(1px, 1px, 1px, 1px);
   }

   .star-rating .star-rating-label:nth-of-type(1) {
      z-index: 5;
      width: 20%;
   }

   .star-rating .star-rating-label:nth-of-type(2) {
      z-index: 4;
      width: 40%;
   }

   .star-rating .star-rating-label:nth-of-type(3) {
      z-index: 3;
      width: 60%;
   }

   .star-rating .star-rating-label:nth-of-type(4) {
      z-index: 2;
      width: 80%;
   }

   .star-rating .star-rating-label:nth-of-type(5) {
      z-index: 1;
      width: 100%;
   }

.star-rating-input:checked + .star-rating-label,
.star-rating-input:focus + .star-rating-label,
.star-rating-label:hover {
   background-image: url(/img/on.svg);
}

   .star-rating-label:hover ~ .star-rating-label {
      background-image: url(/img/off.svg);
   }

/* loading indicator */

.lds-ellipsis {
   display: inline-block;
   position: relative;
   width: 80px;
   height: 80px;
}

   .lds-ellipsis div {
      position: absolute;
      top: 33px;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: #0ca6df;
      animation-timing-function: cubic-bezier(0, 1, 1, 0);
   }

      .lds-ellipsis div:nth-child(1) {
         left: 8px;
         animation: lds-ellipsis1 0.6s infinite;
      }

      .lds-ellipsis div:nth-child(2) {
         left: 8px;
         animation: lds-ellipsis2 0.6s infinite;
      }

      .lds-ellipsis div:nth-child(3) {
         left: 32px;
         animation: lds-ellipsis2 0.6s infinite;
      }

      .lds-ellipsis div:nth-child(4) {
         left: 56px;
         animation: lds-ellipsis3 0.6s infinite;
      }

@keyframes lds-ellipsis1 {
   0% {
      transform: scale(0);
   }

   100% {
      transform: scale(1);
   }
}

@keyframes lds-ellipsis3 {
   0% {
      transform: scale(1);
   }

   100% {
      transform: scale(0);
   }
}

@keyframes lds-ellipsis2 {
   0% {
      transform: translate(0, 0);
   }

   100% {
      transform: translate(24px, 0);
   }
}

/* 
------------------------------------------------------------------------------------------------------------------------------
    Report Viewer
------------------------------------------------------------------------------------------------------------------------------
*/

.report-viewer {
   display: grid;
   grid-template-rows: [header] auto [body] 1fr [footer] auto;
   height: 100vh;
}

   .report-viewer h1 {
      grid-row-start: header;
      margin: 1rem;
      font-size: 1.5rem;
      font-weight: 100;
   }

   .report-viewer .report-body {
      grid-row-start: body;
      margin: 1rem;
      display: flex;
      flex-direction: column;
   }

   .report-viewer iframe {
      height: calc(100vh - 12rem);
      width: calc(100vw - 2.5rem);
   }

.report-body label {
   font-size: 14px;
}

.report-body input {
   padding: 6px;
   border-radius: 4px;
   border-color: var(--accent-2);
   border-width: 1px;
   margin: 4px 0;
   width: 175px;
}

.report-body button {
   padding: 8px;
   border-radius: 4px;
   border-color: var(--accent-2);
   background-color: var(--accent-1);
   color: white;
   margin: 4px;
   width: 85px;
}

   .report-body button:hover {
      background-color: var(--accent-2);
      cursor: pointer;
   }

.report-viewer .report-logo {
   grid-row-start: footer;
}

.report-viewer .error {
   margin: 4px 0;
   font-weight: bold;
   color: darkred;
}


/* 
------------------------------------------------------------------------------------------------------------------------------
    Chat Texts
------------------------------------------------------------------------------------------------------------------------------
*/

.chat-wrap {
   display: grid;
   grid-template-rows: [header-row] auto [chats-row] 1fr [message-row] auto;
   height: 100vh;
   overflow: hidden;
}

@supports(height: 100dvh) {
   .chat-wrap {
      height: 100dvh;
   }
}

.chat-wrap .header-row {
   height: 3rem;
   background-color: var(--bg-dark-1);
   color: var(--text-light-color-1);
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
}

   .chat-wrap .header-row img {
      margin: .25rem .5rem;
      height: 2.5rem;
   }

   .chat-wrap .header-row h1 {
      margin: .25rem;
      font-size: 1.35rem;
      color: var(--text-light-color-1);
      font-weight: normal;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      min-width: calc(40%);
      text-align: center;
   }

   .chat-wrap .header-row .menu {
      margin: .25rem .5rem;
   }

      .chat-wrap .header-row .menu img {
         margin: .25rem;
         padding: .25rem;
         border-radius: var(--corner-radius);
         height: 2rem;
         width: 2rem;
         cursor: pointer;
      }

         .chat-wrap .header-row .menu img:hover {
            background-color: var(--bg-dark-2);
         }

#chat-texts {
   overflow: hidden;
   overflow-y: auto;
   grid-row-start: chats-row;
   width: 100vw;
}

   #chat-texts ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
   }

      #chat-texts ul li {
         margin: .75rem .5rem;
         padding: 0 1rem;
         border: 1px solid transparent;
         color: white;
         width: 90vw;
         box-shadow: 3px 3px 5px var(--add-50-black);
         border-radius: 10px;
      }

         #chat-texts ul li audio {
            width: 90vw;
            margin: .5rem 0;
         }

   #chat-texts li.local {
      margin-left: calc(10vw - 1.5rem);
   }

   #chat-texts li.user {
      background: #2B7D9B;
   }

   #chat-texts li.channel {
      background: #395990;
   }

   #chat-texts li.remote {
      /*margin-right: calc(10vw - .5rem);*/
   }

   #chat-texts li.contact {
      background: #274854;
   }

@keyframes fade-in-message {
   from {
      border: 2px solid var(--accent-alt-light);
      background-color: transparent;
   }
}

#chat-texts li.newly-added {
   border: 2px solid transparent;
   animation-name: fade-in-message;
   animation-duration: 2s;
}

#chat-texts .name {
   font-weight: bold;
   font-size: .7rem;
   color: var(--add-75-white);
}

#chat-texts .date {
   font-size: .7rem;
   color: var(--add-50-white);
}

#chat-texts .message {
   font-size: .9rem;
   display: block;
   margin: .25rem .25rem .25rem 0;
   overflow-wrap: anywhere;
}

   #chat-texts .message a {
      color: var(--accent-alt-light);
   }

      #chat-texts .message a:hover {
         color: var(--accent-alt-dark);
      }

   #chat-texts .message img {
      border-radius: var(--corner-radius);
      margin: .25rem .25rem .25rem 0;
      cursor: pointer;
   }

#text-message-editor, #text-message-editor:active {
   outline: none;
   border-radius: var(--corner-radius);
}

#chat-text-footer {
   grid-row-start: message-row;
   display: grid;
   grid-template-columns: [editor-col] 1fr [actions-col] auto;
   height: 3rem;
   background-color: var(--bg-dark-1);
}

   #chat-text-footer .editor {
      grid-column-start: editor-col;
      margin: .25rem 0 .25rem .25rem;
   }

   #chat-text-footer .actions {
      grid-column-start: actions-col;
   }

.editor textarea {
   width: 100%;
   height: 2.5rem;
   font-size: .9rem;
}

.actions {
   display: flex;
   flex-direction: row;
}

   .actions img {
      height: 2.5rem;
      width: 2.5rem;
      padding: .5rem;
      margin: .25rem;
      border-radius: var(--corner-radius);
   }

   .actions .menu-item {
      cursor: pointer;
   }

      .actions .menu-item:hover {
         background-color: var(--bg-dark-2);
      }

#chat-texts .ticket-expired, #chat-texts .ticket-error {
   display: flex;
   height: 100%;
   margin: 0 1rem;
   justify-content: center;
   align-items: center;
}

#chat-texts .ticket-expired {
   flex-direction: column;
   gap: .65rem;
   font-size: .9rem;
}

   #chat-texts .ticket-expired button {
      width: 6rem;
      align-self: center;
   }

   #chat-texts .ticket-expired input, #chat-texts .ticket-expired span {
      max-width: 20rem;
      align-self: center;
   }

   #chat-texts .ticket-expired .verify-error {
      align-self: center;
      color: var(--error-color);
      font-weight: bold;
      text-align: center;
   }

#chat-texts .ticket-error {
   font-size: 1rem;
   color: var(--main-dark-color);
   font-weight: bold;
}

@keyframes skeleton-loading {
   0% {
      background-color: rgba(0, 0, 0, 0.05);
   }

   100% {
      background-color: rgba(0, 0, 0, 0.1);
   }
}

.skeleton {
   animation: skeleton-loading 2s ease-in-out infinite alternate;
}

.skeleton-text {
   height: 3rem;
   animation: skeleton-loading 2s ease-in-out infinite alternate;
   margin: .5rem !important;
   border-radius: var(--corner-radius);
}


.sub-man-root .sub-man-body {
   padding: 2rem;
   height: calc(100vh - 40px);
   overflow-y: scroll;
}

.sub-man-root h1 {
   font-size: 1.5rem;
}

   .sub-man-root h4 {
      font-size: 1.1rem;
      padding-bottom: .25rem;
      border-bottom: 1px solid var(--accent-1);
   }

.email-label-wrap {
   margin-bottom: 1rem;
   display: flex;
   flex-direction: row;
}

.sub-man-root .email-label {
   margin-right: .5rem;
   font-weight: bold;
   align-self: center;
}

.sub-man-root .email-display {
   background-color: var(--add-10-black);
   padding: .25rem .5rem;
   border: 1px solid var(--main-dark-color);
   border-radius: var(--corner-radius);
}

.sub-man-root .unsub-directions {
   margin-bottom: .5rem;
   font-size: .9rem;
   font-style: italic;
}

.sub-man-root .unsub-list {
   list-style: none;
   margin: 0;
   padding: 0;
}

.sub-man-root .unsub-item {
   display:flex; 
   flex-direction: row;
   margin: .35rem;
}

.sub-man-root .unsub-check {
   min-height: 1.25rem;
   min-width: 1.25rem;
   background-color: #eee;
   align-self: center;
   margin: 0 .35rem;
}

.sub-man-root .button-wrap {
   display: flex;
}

.sub-man-root .unsub-button {
   margin: .5rem auto;
   background-color: var(--main-dark-color);
   color: var(--text-light-color-1);
   padding: .25rem .5rem;
   border: 1px solid var(--main-dark-color);
   border-radius: var(--corner-radius);
}

.sub-man-root .unsub-button:hover {
   background-color: var(--accent-1);
}

.sub-man-root .message {
   margin: .5rem 0;
   font-size: .9rem;
   font-weight: bold;
}

.survey-button {
   display: flex;
   align-content: center;
   justify-content: center;
}

   .survey-button a {
      border: 1px solid var(--accent-2);
      border-radius: .35rem;
      padding: .5rem .75rem;
      background-color: var(--accent-1);
      color: var(--text-light-color-1);
      font-size: .9rem;
      box-shadow: 3px 3px 5px var(--add-50-black);
   }

      .survey-button a:hover {
         background-color: var(--accent-2-highlight);
      }

      .survey-button a:active {
         box-shadow: none;
      }