:root {
  --txt-color: rgb(200, 195, 188);
  --primary-color: rgb(204, 112, 0);
  --secondary-color: orange;
  --grayscale-color: gray;
  --highlight-color: #FC0;
  --menu-highlight-color: yellow !important;
  --menu-highlight-shadow: #FC0 1px 0 10px;
  --input-color: #d7c499;
  --input-bg-color: #201b17;
  --input-border: 1px solid #535353; }

@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in-out {
  0%, 100% {
    opacity: 0; }
  33%, 67% {
    opacity: 1; } }

@-webkit-keyframes fade-in-out {
  0%, 100% {
    opacity: 0; }
  33%, 67% {
    opacity: 1; } }

html, body {
  height: 100%;
  color: #fff7ee;
  overflow-y: hidden; }

label {
  color: var(--secondary-color);
  font-weight: 200;
  font-size: .75em;
  text-transform: uppercase;
  margin-left: 2px; }

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  background-color: #201b17;
  border: 1px solid #535353;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  padding: 9px;
  border-radius: 3px;
  display: inline-block;
  position: relative;
  margin: 0; }
  input[type="checkbox"]:active, input[type="checkbox"]:checked:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1); }
  input[type="checkbox"]:checked {
    background-color: #d69e69;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
    color: #99a1a7; }
    input[type="checkbox"]:checked:after {
      content: '\2714';
      font-size: 15px;
      position: absolute;
      top: 0px;
      left: 3px;
      color: #000; }

.th-home {
  height: 100%;
  font-family: NothingYouCouldDoRegular;
  background-image: url("../img/transformation-hall.jpg");
  background-position: center right;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
  z-index: 10;
  transition: opacity 1s ease-in-out 1s;
  -webkit-transition: opacity 1s ease-in-out 1s; }
  .th-home.overlay {
    opacity: 0.3;
    pointer-events: none;
    transition: opacity 1s ease-in-out 1s;
    -webkit-transition: opacity 1s ease-in-out 1s; }
  .th-home a {
    color: #f2de3c;
    text-shadow: #000 5px 0 8px;
    text-decoration: none;
    cursor: pointer; }
    .th-home a:hover {
      color: #ffb24e; }
  .th-home-title {
    display: flex;
    align-items: center;
    font-size: 3em;
    text-shadow: black 5px 0 6px;
    opacity: 0;
    transition: opacity 2s ease-in; }
    .th-home-title-container {
      position: absolute;
      top: 10px;
      right: 24px;
      color: #ffcb89; }
    .th-home-title -webkit-, .th-home-title -moz-, .th-home-title -ms-, .th-home-title -o- {
      transition: opacity 2s ease-in; }
    .th-home-title.loaded {
      opacity: 1; }
  .th-home-subtitle {
    font-size: 2.4em;
    text-align: center;
    text-shadow: black 5px 0 6px;
    opacity: 0;
    transition: opacity 2s ease-in 1s; }
    .th-home-subtitle -webkit-, .th-home-subtitle -moz-, .th-home-subtitle -ms-, .th-home-subtitle -o- {
      transition: opacity 2s ease-in 1s; }
    .th-home-subtitle.loaded {
      opacity: 0.66; }
  .th-home-lineage {
    font-size: 1.5em;
    text-align: center;
    text-shadow: black 5px 0 6px;
    border-bottom: 1px solid #b07f26;
    border-width: thin;
    margin-bottom: 8px;
    opacity: 0;
    transition: opacity 2s ease-in; }
    .th-home-lineage -webkit-, .th-home-lineage -moz-, .th-home-lineage -ms-, .th-home-lineage -o- {
      transition: opacity 2s ease-in 1s; }
    .th-home-lineage.loaded {
      opacity: 0.66; }
  .th-home-icon {
    height: 0.8em;
    margin: 0 12px; }
  .th-home-action-container {
    position: absolute;
    bottom: 320px;
    right: 24px;
    font-size: 3em;
    text-align: right; }
  .th-home-about, .th-home-account, .th-home-join, .th-home-create {
    opacity: 0; }
    .th-home-about.loaded, .th-home-account.loaded, .th-home-join.loaded, .th-home-create.loaded {
      opacity: 1; }
  .th-home-account {
    transition: opacity 2s ease-in 15s; }
    .th-home-account -webkit-, .th-home-account -moz-, .th-home-account -ms-, .th-home-account -o- {
      transition: opacity 2s ease-in 15s; }
  .th-home-join {
    transition: opacity 2s ease-in 17.5s; }
    .th-home-join -webkit-, .th-home-join -moz-, .th-home-join -ms-, .th-home-join -o- {
      transition: opacity 2s ease-in 17.5s; }
  .th-home-create {
    transition: opacity 2s ease-in 20s; }
    .th-home-create -webkit-, .th-home-create -moz-, .th-home-create -ms-, .th-home-create -o- {
      transition: opacity 2s ease-in 20s; }
  .th-home-about {
    font-size: 32px;
    margin-top: 32px;
    transition: opacity 2s ease-in 22.5s; }
    .th-home-about -webkit-, .th-home-about -moz-, .th-home-about -ms-, .th-home-about -o- {
      transition: opacity 2s ease-in 22.5s; }
    .th-home-about a {
      color: navajowhite; }
  .th-home-arrived, .th-home-home {
    position: absolute;
    bottom: 12px;
    right: 4vw;
    max-width: 82vw;
    opacity: 0; }
  .th-home-arrived {
    animation: fade-in-out 7.5s ease-in-out 4s; }
  .th-home-home {
    transition: opacity 3s ease-in-out 12.5s; }
    .th-home-home -webkit-, .th-home-home -moz-, .th-home-home -ms-, .th-home-home -o- {
      transition: opacity 3s ease-in-out 12.5s; }
    .th-home-home.loaded {
      opacity: 1; }
  .th-home-close {
    display: flex;
    align-items: center;
    justify-content: right;
    cursor: pointer;
    position: absolute;
    top: 6px;
    right: 6px;
    color: #f2de3c; }
    .th-home-close:hover {
      color: #ffb24e; }
    .th-home-close img {
      height: 24px;
      filter: invert(60%) sepia(100%) saturate(400%); }
      .th-home-close img:hover {
        filter: invert(50%) sepia(100%) saturate(400%) hue-rotate(338deg); }

.th-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  padding: 24px;
  border: 2px solid rgba(128, 83, 0, 0.95);
  background-color: rgba(29, 19, 0, 0.95);
  opacity: 0;
  height: 0;
  width: 66vw;
  min-width: 540px;
  overflow-y: scroll;
  scrollbar-color: #966100f2 #3d1d01;
  scrollbar-width: thin;
  z-index: -1;
  transition: all 1s ease-in;
  -webkit-transition: all 1s ease-in; }
  .th-panel h1, .th-panel h2, .th-panel h3, .th-panel h4, .th-panel h5 {
    color: var(--secondary-color);
    text-align: center;
    margin-top: 24px; }
  .th-panel p {
    color: var(--txt-color);
    font-size: 1.1em;
    line-height: 24px; }
    .th-panel p .link {
      cursor: pointer;
      border-bottom: 1px dotted; }
      .th-panel p .link:hover {
        color: var(--secondary-color);
        border-color: var(--secondary-color); }
  .th-panel .form-control {
    width: fit-content; }
    .th-panel .form-control.required {
      border: 2px solid orange; }
  .th-panel.overlay {
    opacity: 1;
    height: 85vh;
    z-index: 20;
    transition: all 1s ease-out 1s;
    -webkit-transition: all 1s ease-out 1s; }
  .th-panel-container {
    display: flex;
    flex-wrap: wrap;
    column-gap: 18px;
    margin-top: 12px; }
  .th-panel-column {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    width: fit-content; }
  .th-panel-node {
    display: flex;
    column-gap: 6px;
    align-items: center; }

.th-join-sanghas {
  position: relative;
  padding: 8px;
  display: flex;
  column-gap: 9px;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
  height: 583px; }
  .th-join-sanghas-orientation {
    position: absolute;
    right: 8px;
    top: -18px;
    z-index: 99;
    display: flex;
    column-gap: 8px; }
    .th-join-sanghas-orientation-columns, .th-join-sanghas-orientation-rows {
      display: inline-block;
      cursor: pointer;
      height: 28px;
      filter: invert(50%) sepia(100%) saturate(400%) hue-rotate(338deg);
      opacity: 0.3; }
      .th-join-sanghas-orientation-columns.active, .th-join-sanghas-orientation-rows.active {
        opacity: 1; }
      .th-join-sanghas-orientation-columns:hover, .th-join-sanghas-orientation-rows:hover {
        opacity: 1;
        filter: invert(60%) sepia(100%) saturate(400%); }
  .th-join-sanghas-count {
    font-size: 1.4em;
    color: var(--secondary-color); }

.th-join-create {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 1.2em; }
  .th-join-create a {
    cursor: pointer;
    color: #f2de3c; }
    .th-join-create a:hover {
      color: #ffb24e; }

.th-select-picklist {
  position: absolute;
  display: none;
  flex-direction: column;
  row-gap: 4px;
  border: 2px solid #805300;
  background-color: #1d1300;
  padding: 6px 14px;
  border-radius: 6px;
  z-index: 9; }
  .th-select-picklist.active {
    display: flex; }
  .th-select-picklist > div {
    color: #cc7000;
    cursor: pointer; }
    .th-select-picklist > div:hover {
      color: orange; }

.th-input {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 5px; }
  .th-input input, .th-input select, .th-input textarea {
    color: var(--input-color);
    background-color: var(--input-bg-color);
    border: var(--input-border); }
  .th-input div {
    position: absolute;
    top: 2px;
    right: 4px;
    color: var(--grayscale-color);
    font-size: 0.8em; }

.th-sangha {
  flex: 0 0 50%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px dotted #805300;
  background-color: #1d1300;
  padding: 6px 14px;
  border-radius: 6px; }
  .th-sangha-container {
    display: flex;
    column-gap: 9px;
    flex-wrap: wrap; }
  .th-sangha-none {
    text-wrap: nowrap;
    margin: 22px 0 0 22px; }
  .th-sangha-image {
    text-align: center; }
    .th-sangha-image img {
      max-height: 54px;
      max-width: 90%;
      margin-bottom: 8px; }
  .th-sangha-name {
    color: orange;
    font-size: 1.3em;
    text-align: center;
    border-bottom: 1px dotted orange;
    margin-bottom: 5px; }
    .th-sangha-name a {
      cursor: pointer; }
      .th-sangha-name a:hover {
        color: #cc7000; }
  .th-sangha-summary {
    color: orange;
    font-size: 1.1em;
    text-align: center; }
  .th-sangha-location {
    display: flex;
    justify-content: center;
    column-gap: 12px;
    color: #cc7000;
    text-align: center; }
    .th-sangha-location a {
      cursor: pointer; }
      .th-sangha-location a:hover {
        color: orange; }
  .th-sangha-description {
    flex-grow: 1;
    overflow-y: hidden;
    margin-top: 12px;
    color: #ffcb89;
    border-top: 1px dotted #805300; }
  .th-sangha-email {
    cursor: pointer; }
  .th-sangha-url {
    cursor: pointer; }

.th-hide {
  display: flex;
  align-items: center;
  position: absolute;
  left: 4px;
  bottom: 4px;
  z-index: 99; }
  .th-hide input {
    margin-right: 6px; }
  .th-hide div {
    color: var(--grayscale-color); }

#th-login:valid {
  border-color: orange; }

#th-login-action {
  height: 36px;
  background-color: var(--input-bg-color);
  pointer-events: none; }
  #th-login-action.active {
    background-color: #cc7000;
    cursor: pointer;
    pointer-events: all; }
  #th-login-action:hover {
    background-color: orange; }

#th-frequency {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
  margin-top: 8px; }
  #th-frequency > div {
    display: flex;
    align-items: center;
    column-gap: 6px; }

#th-sanghas-list {
  position: relative;
  display: grid;
  width: 100%; }
  #th-sanghas-list-prev, #th-sanghas-list-next {
    position: absolute;
    cursor: pointer;
    top: 12px;
    height: 26px;
    filter: invert(60%) sepia(100%) saturate(400%);
    z-index: 99; }
    #th-sanghas-list-prev:hover, #th-sanghas-list-next:hover {
      filter: invert(50%) sepia(100%) saturate(400%) hue-rotate(338deg); }
  #th-sanghas-list-prev {
    left: 4px;
    transform: rotate(-90deg); }
  #th-sanghas-list-next {
    right: 8px;
    transform: rotate(90deg); }

#th-sangha-name {
  width: 58ch; }

#th-sangha-summary {
  width: 100ch;
  max-width: 100%; }

#th-sangha-description {
  width: 100%;
  overflow-y: hidden; }

#th-sangha-continent {
  width: 18ch; }

#th-sangha-region {
  width: 20ch; }

#th-sangha-country {
  width: 32ch; }

#th-sangha-province {
  width: 42ch; }

#th-sangha-city {
  width: 42ch; }

#th-sangha-contact {
  width: 30ch; }

#th-sangha-email {
  width: 42ch; }

#th-sangha-website {
  width: 58ch; }

#th-sangha-labels {
  width: 36ch; }

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .th-home-title-container {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%; }
  .th-home-title {
    justify-content: center;
    font-size: 1.8em !important; }
  .th-home-subtitle {
    font-size: 1.6em;
    margin-top: 8px; }
  .th-home-lineage {
    font-size: 1.4em; }
  .th-home-action-container {
    font-size: 2.3em; }
  .th-home-about {
    font-size: 0.8em; }
  .th-home-home {
    bottom: 48px; }
  .th-panel {
    min-width: 100vw;
    overflow-y: auto; }
  #th-login-identify .th-panel-node {
    flex-direction: column;
    row-gap: 8px; } }